/* ==========================================================================
   PJM Technologie Web — feuille de style unique
   Thème sombre, bleu primaire. Le jaune est réservé aux étoiles d'évaluation.
   ========================================================================== */

:root {
  /* Couleurs */
  --fond:        #0B0C10;
  --fond-2:      #0E1015;
  --surface:     #14161D;
  --surface-2:   #1A1D26;
  --bleu:        #1F67B8;
  --bleu-clair:  #3183DC;
  --bleu-pale:   #6BA6E8;
  --jaune:       #FDD023;   /* étoiles uniquement */
  --texte:       #DADADA;
  --texte-doux:  #949BA9;
  --bordure:     rgba(218, 218, 218, .10);
  --bordure-2:   rgba(49, 131, 220, .45);

  /* Typographie */
  --titre: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --corps: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Rythme */
  --max:       1180px;
  --max-texte: 720px;
  --section:   clamp(4rem, 8vw, 7rem);
  --radius:    12px;
  --radius-l:  18px;
}

/* --- Transitions de page ------------------------------------------------ */

/* Fondu enchaîné natif entre les pages. N'ajoute AUCUN délai : le navigateur
   anime la bascule pendant que la nouvelle page se peint déjà. Les navigateurs
   qui ne connaissent pas la règle l'ignorent simplement. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: pjm-sortie .18s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: pjm-entree .26s cubic-bezier(0, 0, .2, 1) both;
}

@keyframes pjm-sortie {
  to { opacity: 0; }
}
@keyframes pjm-entree {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* L'en-tête ne doit pas clignoter : il est identique d'une page à l'autre. */
.entete { view-transition-name: entete-pjm; }
::view-transition-old(entete-pjm),
::view-transition-new(entete-pjm) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* --- Animations d'apparition -------------------------------------------- */

/* Tout est verrouillé derrière `html.anime`, que le JS n'ajoute que si le
   visiteur accepte le mouvement et que le navigateur sait observer le
   défilement. Sans JS ou avec « réduire les animations » : rien n'est caché,
   rien ne bouge. Uniquement opacity/transform — jamais de reflux de page. */

html.anime .js-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .55s cubic-bezier(0, 0, .2, 1),
    transform .55s cubic-bezier(0, 0, .2, 1);
  transition-delay: var(--reveal-delai, 0ms);
}
html.anime .js-reveal.est-visible {
  opacity: 1;
  transform: none;
}

/* Entrée du héros au chargement — courte, pour ne pas retarder la lecture. */
@keyframes pjm-lever {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
html.anime .heros .surligne,
html.anime .heros h1        { animation: pjm-lever .45s cubic-bezier(0, 0, .2, 1) both; }
html.anime .heros .plomb    { animation: pjm-lever .45s cubic-bezier(0, 0, .2, 1) .08s both; }
html.anime .heros .heros__actions { animation: pjm-lever .45s cubic-bezier(0, 0, .2, 1) .16s both; }

/* Micro-interactions au survol */
.icone-bloc { transition: transform .22s cubic-bezier(0, 0, .2, 1), color .22s ease; }
.carte:hover .icone-bloc,
a.carte:hover .icone-bloc { transform: translateY(-3px) scale(1.07); color: var(--bleu-pale); }
.service-lien .icone { transition: transform .2s ease; }
.service-lien:hover .icone { transform: translateX(3px); }

/* --- Base -------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 .6em;
  letter-spacing: -.01em;
}

h1 {
  font-size: clamp(1.75rem, 3.6vw, 2.9rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.18;
}
h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.3rem); }
h4 { font-size: 1.02rem; }

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

a { color: var(--bleu-clair); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--bleu-pale); }

img { max-width: 100%; height: auto; display: block; }
strong { color: #fff; font-weight: 600; }

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

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

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bleu);
  color: #fff;
  padding: .8rem 1.4rem;
  font-weight: 600;
  z-index: 200;
}
.saut-contenu:focus { left: 1rem; top: 1rem; color: #fff; }

/* --- Mise en page ------------------------------------------------------ */

.enveloppe { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; }

.section { padding-block: var(--section); }
.section--alt { background: var(--fond-2); }

.entete-section { max-width: var(--max-texte); margin-bottom: clamp(2.5rem, 4.5vw, 3.5rem); }
.entete-section.centre { margin-inline: auto; text-align: center; }
.entete-section .plomb { margin-inline: auto; }

/* Sur-titre : pastille bordée bleue */
.surligne {
  display: inline-block;
  font-family: var(--titre);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bleu-clair);
  border: 1px solid var(--bordure-2);
  border-radius: 999px;
  padding: .42rem 1.1rem;
  margin-bottom: 1.4rem;
  line-height: 1.4;
}

.plomb {
  font-size: clamp(.98rem, 1.4vw, 1.06rem);
  color: var(--texte-doux);
  max-width: var(--max-texte);
}

/* --- Boutons ----------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--titre);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 1rem 2.1rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .16s ease, background .18s ease, color .18s ease, border-color .18s ease;
  text-align: center;
}
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: translateY(0); }

.bouton--primaire { background: var(--bleu); color: #fff; }
.bouton--primaire:hover { background: var(--bleu-clair); color: #fff; }

.bouton--contour {
  border-color: var(--bordure-2);
  color: #fff;
  background: transparent;
  padding: .72rem 1.5rem;
}
.bouton--contour:hover { border-color: var(--bleu-clair); background: rgba(49, 131, 220, .12); color: #fff; }

.bouton--fantome { border-color: var(--bordure-2); color: var(--texte); background: transparent; }
.bouton--fantome:hover { border-color: var(--bleu-clair); color: #fff; }

/* --- Icônes ------------------------------------------------------------ */

.icone { width: 1em; height: 1em; display: block; flex-shrink: 0; }

.icone-bloc {
  width: 40px;
  height: 40px;
  color: var(--bleu-clair);
  margin-bottom: 1.5rem;
}
.icone-bloc .icone { width: 100%; height: 100%; }
.centre .icone-bloc, .carte--centre .icone-bloc { margin-inline: auto; }

/* --- En-tête ----------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 12, 16, .85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bordure);
}

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

.entete__logo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.entete__logo img { height: 46px; width: auto; }
/* Signature « par Projections Média » en Sign Painter, convertie en tracés SVG
   (police système Apple, non distribuable — le dessin des lettres l'est). */
.entete__logo .entete__signature { height: 16px; width: auto; margin-left: 0; opacity: .92; transition: opacity .18s ease; }
.entete__logo:hover .entete__signature { opacity: 1; }

.nav { display: flex; align-items: center; gap: 2rem; }

.nav__liens {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* `:not(.bouton)` est essentiel : sans lui, cette règle écrase la couleur du
   bouton « Nous joindre ». */
.nav__liens a:not(.bouton) {
  font-family: var(--titre);
  font-size: .9rem;
  font-weight: 500;
  color: var(--texte);
}
.nav__liens a:not(.bouton):hover { color: var(--bleu-clair); }

/* --- Sous-menu déroulant ------------------------------------------------ */

.nav__deroulant { position: relative; }

.nav__declencheur {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--titre);
  font-size: .9rem;
  font-weight: 500;
  color: var(--texte);
  transition: color .18s ease;
}
.nav__declencheur:hover { color: var(--bleu-clair); }
.nav__declencheur svg { transition: transform .2s ease; }
.nav__declencheur[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__sous {
  list-style: none;
  margin: 0;
  padding: .5rem;
  position: absolute;
  top: calc(100% + 1.1rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 290px;
  /* Volontairement plus clair que --surface : sur le héros sombre, un panneau
     à #14161D est opaque mais ne se détache pas à l'œil. */
  background: #212533;
  border: 1px solid rgba(49, 131, 220, .3);
  border-radius: var(--radius);
  box-shadow: 0 20px 46px rgba(0, 0, 0, .65);
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 110;
}
.nav__deroulant:hover > .nav__sous,
.nav__deroulant:focus-within > .nav__sous,
.nav__sous.ouvert {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav__sous li { width: 100%; }
.nav__sous a {
  display: flex !important;
  align-items: center;
  gap: .7rem;
  padding: .7rem .85rem !important;
  border-radius: 9px;
  font-size: .89rem !important;
  line-height: 1.35;
  color: var(--texte) !important;
}
.nav__sous a:hover { background: var(--surface-2); color: #fff !important; }
.nav__sous .icone { width: 18px; height: 18px; color: var(--bleu-clair); flex-shrink: 0; }
.nav__sous__texte { display: flex; flex-direction: column; gap: .12rem; }
.nav__sous__texte small { font-size: .76rem; color: var(--texte-doux); font-weight: 400; }
.nav__sous__tous {
  border-top: 1px solid var(--bordure);
  margin-top: .35rem;
  padding-top: .35rem;
}
.nav__sous__tous a { color: var(--bleu-clair) !important; font-weight: 500; }

.nav__bascule {
  display: none;
  background: none;
  border: 1px solid var(--bordure-2);
  border-radius: 10px;
  padding: .55rem .7rem;
  cursor: pointer;
  color: var(--texte);
}
.nav__bascule svg { display: block; }

/* --- Héros ------------------------------------------------------------- */

.heros {
  position: relative;
  padding-block: clamp(5rem, 12vw, 9.5rem);
  overflow: hidden;
  text-align: center;
  background: #060A14 url("/assets/img/fonds/heros-circuits.webp") center / cover no-repeat;
}

.heros::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 10, 20, .78), rgba(11, 12, 16, .90));
  pointer-events: none;
}

.heros > * { position: relative; }

.heros h1 { max-width: 38ch; margin-inline: auto; margin-bottom: .7em; }
.heros .plomb { margin-inline: auto; }

.heros__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.6rem;
  justify-content: center;
}

/* Héros réduit pour les pages intérieures */
.heros--compact { --pad-heros: clamp(3.2rem, 7vw, 5.5rem); padding-block: var(--pad-heros); }
.heros--compact h1 { max-width: 24ch; }

/* Fil d'Ariane — épinglé dans le coin supérieur gauche du héros, discret.
   Attention : `.heros > *` étant en position relative, le référent du
   positionnement est l'ENVELOPPE, pas le héros. Le top négatif remonte donc
   le fil dans le rembourrage du héros, aligné au bord gauche du contenu. */
.ariane {
  position: absolute;
  top: calc(1.4rem - var(--pad-heros, 3.2rem));
  left: 0;
  margin: 0;
  font-size: .76rem;
  letter-spacing: .02em;
  color: var(--texte-doux);
  opacity: .75;
  z-index: 5;
  transition: opacity .18s ease;
}
.ariane:hover { opacity: 1; }
.ariane a { color: var(--texte-doux); }
.ariane a:hover { color: var(--bleu-clair); }
.ariane span { opacity: .5; margin-inline: .4rem; }

/* --- Étapes numérotées -------------------------------------------------- */

.etapes { display: grid; gap: 1.6rem; counter-reset: etape; }
.etape { display: flex; gap: 1.3rem; align-items: flex-start; }
.etape__numero {
  counter-increment: etape;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(31, 103, 184, .16);
  border: 1px solid var(--bordure-2);
  color: var(--bleu-clair);
  font-family: var(--titre);
  font-weight: 600;
  font-size: .95rem;
}
.etape__numero::before { content: counter(etape, decimal-leading-zero); }
.etape h3 { margin-bottom: .3em; font-size: 1.12rem; }
.etape p { color: var(--texte-doux); font-size: .94rem; margin: 0; }

/* --- Encadré de preuve (cas réel, outil existant) ----------------------- */

.preuve {
  border-radius: var(--radius-l);
  border: 1px solid var(--bordure-2);
  background: linear-gradient(135deg, rgba(31, 103, 184, .14), rgba(31, 103, 184, .04));
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.preuve__etiquette {
  font-family: var(--titre);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--bleu-clair);
  margin-bottom: .9rem;
}
.preuve h3 { font-size: 1.2rem; margin-bottom: .5em; }
.preuve p { color: var(--texte-doux); font-size: .95rem; }
.preuve blockquote {
  margin: 0 0 1rem;
  font-style: italic;
  color: var(--texte);
  font-size: 1.02rem;
}
.preuve cite { display: block; font-style: normal; font-size: .87rem; color: var(--texte-doux); margin-top: .5rem; }

/* --- Rangée de chiffres ------------------------------------------------- */

.chiffres {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-block: 1.6rem;
}
.chiffre {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 1.5rem 1.1rem;
  text-align: center;
}
.chiffre__valeur {
  font-family: var(--titre);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--bleu-clair);
  margin-bottom: .3rem;
}
.chiffre__libelle { font-size: .87rem; color: var(--texte-doux); line-height: 1.4; }

/* Le détail méthodologique qu'on met en avant */
.detail-cle {
  border-left: 3px solid var(--bleu);
  padding: .2rem 0 .2rem 1.2rem;
  margin-block: 1.5rem;
}
.detail-cle__titre {
  font-family: var(--titre);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bleu-clair);
  margin-bottom: .5rem;
}
.detail-cle p { color: var(--texte-doux); margin: 0; font-size: .95rem; }

/* Avertissement de publication — visible en révision, à retirer avant la mise en ligne */
.avis-consentement {
  border: 1px dashed rgba(253, 208, 35, .55);
  background: rgba(253, 208, 35, .06);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  color: #E8C860;
  font-size: .87rem;
  margin-bottom: 2rem;
}
.avis-consentement strong { color: var(--jaune); }

/* Emplacement à remplir par le client — visible en révision, à retirer ensuite */
.a-remplir {
  border: 1px dashed rgba(253, 208, 35, .55);
  background: rgba(253, 208, 35, .06);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  color: #E8C860;
  font-size: .9rem;
}
.a-remplir strong { color: var(--jaune); }

/* --- Liste à puces cochées ---------------------------------------------- */

.liste-check { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.liste-check li { display: flex; gap: .75rem; align-items: flex-start; color: var(--texte-doux); font-size: .95rem; }
.liste-check li::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: .28rem;
  border-radius: 50%;
  background: rgba(31, 103, 184, .2);
  border: 1px solid var(--bordure-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233183DC' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- Navigation entre services ------------------------------------------ */

.services-lies { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.service-lien {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--texte);
  font-family: var(--titre);
  font-size: .93rem;
  font-weight: 500;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.service-lien:hover { border-color: var(--bordure-2); background: var(--surface-2); color: #fff; }
.service-lien .icone { width: 22px; height: 22px; color: var(--bleu-clair); flex-shrink: 0; }

/* --- Grilles ----------------------------------------------------------- */

.grille { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: clamp(2rem, 5vw, 4rem); }

/* Section « À propos » : 5 cartes. La dernière (sans photo) occupe les colonnes
   restantes pour ne pas laisser de trou dans la grille. */
.grille--apropos { grid-template-columns: repeat(3, 1fr); }
.grille--apropos > :last-child { grid-column: span 2; }
@media (max-width: 980px) {
  .grille--apropos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grille--apropos { grid-template-columns: 1fr; }
  .grille--apropos > :last-child { grid-column: span 1; }
}

/* --- Cartes ------------------------------------------------------------ */

.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-l);
  padding: 2.3rem 1.9rem;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.carte:hover { border-color: var(--bordure-2); transform: translateY(-3px); }

/* Une carte peut être un lien entier (grilles de services) */
a.carte { display: block; text-decoration: none; }
a.carte:hover h3, a.carte:hover h2 { color: var(--bleu-clair); }

.carte--centre { text-align: center; }
.carte h3 { margin-bottom: .6em; }
.carte p { color: var(--texte-doux); font-size: .94rem; margin: 0; }

/* Carte avec photo en fond (section « À propos ») */
.carte-photo {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.9rem;
  border: 1px solid var(--bordure);
  isolation: isolate;
  transition: transform .25s ease, border-color .25s ease;
}
.carte-photo:hover { transform: translateY(-4px); border-color: var(--bordure-2); }

.carte-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.carte-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(11, 12, 16, .35) 0%, rgba(11, 12, 16, .88) 62%, rgba(11, 12, 16, .96) 100%);
}
.carte-photo h3 {
  margin-bottom: .7rem;
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--bleu);
  display: inline-block;
  align-self: flex-start;
}
.carte-photo p { color: var(--texte-doux); font-size: .92rem; margin: 0; }

/* Carte sans photo, même gabarit */
.carte-photo--nue {
  background: var(--surface);
  justify-content: center;
  min-height: 340px;
}
.carte-photo--nue::after { display: none; }

/* --- Liste à icônes (section « Pourquoi nous choisir ») ----------------- */

.liste-icones { display: grid; gap: 2rem; }
.liste-icones__item { display: flex; gap: 1.1rem; align-items: flex-start; }
.liste-icones__icone { width: 30px; height: 30px; color: var(--bleu-clair); flex-shrink: 0; margin-top: .2rem; }
.liste-icones__icone .icone { width: 100%; height: 100%; }
.liste-icones h3 { margin-bottom: .35em; font-size: 1.15rem; }
.liste-icones p { color: var(--texte-doux); font-size: .93rem; margin: 0; }

.visuel-cadre {
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--bordure);
}

/* --- Bandeau logos clients --------------------------------------------- */

.clients__piste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 4.5rem);
}
.clients__piste img {
  height: clamp(32px, 4.2vw, 46px);
  width: auto;
  opacity: .55;
  transition: opacity .22s ease, transform .22s ease;
}
/* Les logos hauts ou carrés paraissent minuscules à hauteur égale.
   On leur donne plus de hauteur pour équilibrer la masse visuelle. */
.clients__piste img.logo--carre { height: clamp(46px, 6vw, 68px); }
.clients__piste img:hover { opacity: 1; transform: scale(1.04); }

/* --- Témoignages -------------------------------------------------------- */

.temoignage {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-l);
  padding: 1.9rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transition: border-color .2s ease;
}
.temoignage:hover { border-color: var(--bordure-2); }

.etoiles { display: flex; gap: .18rem; color: var(--jaune); }
.etoiles .icone { width: 17px; height: 17px; }

.temoignage__personne { display: flex; align-items: center; gap: .85rem; }
.temoignage__personne img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--bordure-2);
}
.temoignage__nom { font-family: var(--titre); font-weight: 600; color: #fff; font-size: .96rem; line-height: 1.3; }
.temoignage__role { font-size: .83rem; color: var(--texte-doux); line-height: 1.35; }

.temoignage__citation {
  font-style: italic;
  font-size: .96rem;
  line-height: 1.65;
  color: var(--texte);
  margin: 0;
}
.temoignage__detail { color: var(--texte-doux); font-size: .84rem; line-height: 1.6; margin: 0; }
.temoignage__note { font-size: .78rem; color: var(--texte-doux); opacity: .75; margin: 0; }

/* --- Bande d'appel à l'action ------------------------------------------- */

.appel {
  position: relative;
  border-radius: var(--radius-l);
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  background: var(--surface) url("/assets/img/fonds/bande-cta.webp") center / cover no-repeat;
  border: 1px solid var(--bordure);
  text-align: center;
  overflow: hidden;
}
.appel > * { position: relative; }
.appel h2 { max-width: 20ch; margin-inline: auto; }
.appel .plomb { margin-inline: auto; }
.appel .bouton { margin-top: 2.2rem; }

/* --- Pied de page ------------------------------------------------------- */

.pied {
  background: var(--fond-2);
  border-top: 1px solid var(--bordure);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}

.pied__colonnes {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  padding-bottom: 3rem;
}

.pied__marque img { height: 58px; width: auto; margin-bottom: 1.2rem; }
.pied__marque p { color: var(--texte-doux); font-size: .93rem; max-width: 32ch; }

.pied__reseaux { display: flex; gap: .9rem; margin-top: 1.3rem; }
.pied__reseaux[hidden] { display: none; }
.pied__reseaux a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bordure); color: var(--texte-doux); transition: color .18s ease, border-color .18s ease, transform .16s ease; }
.pied__reseaux a:hover { color: #fff; border-color: var(--bleu-clair); transform: translateY(-2px); }
.pied__reseaux .icone { width: 18px; height: 18px; }
.pied__badge-partenaire { display: inline-block; margin-top: 1.4rem; }
.pied__partenariats { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.pied__partenariat {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .85rem; border: 1px solid var(--bordure); border-radius: 999px;
  font-family: var(--titre); font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  color: var(--texte-doux);
}
.pied__partenariat .icone { width: 15px; height: 15px; }

/* --- Liste à coches (pages de services) --------------------------------- */
.liste-coches { list-style: none; margin: 0; padding: 0; }
.liste-coches li {
  position: relative; padding: .45rem 0 .45rem 1.7rem;
  color: var(--texte-doux); border-bottom: 1px solid var(--bordure);
}
.liste-coches li:last-child { border-bottom: 0; }
.liste-coches li::before {
  content: ""; position: absolute; left: 0; top: .95rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bleu-clair); box-shadow: 0 0 0 4px rgba(49, 131, 220, .18);
}
.liste-coches strong { color: var(--texte); }

/* --- Page À propos : fondateur et partenariats ------------------------- */

.fondateur {
  display: flex; gap: 1.6rem; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--radius-l); padding: clamp(1.5rem, 3vw, 2.2rem);
  margin-top: 2.6rem;
}
.fondateur__monogramme {
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(49, 131, 220, .14); border: 1px solid var(--bordure-2);
  color: var(--bleu-pale); font-family: var(--titre); font-weight: 700;
  font-size: 1.1rem; letter-spacing: .02em;
}
.fondateur__photo {
  flex: 0 0 auto; width: 112px; height: 112px; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--bordure-2);
}
.fondateur__role {
  font-family: var(--titre); font-size: .72rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--bleu-clair); margin-bottom: 1.1rem;
}
.fondateur__contact { font-size: .88rem; margin-bottom: 1.1rem; }
.fondateur__contact a { color: var(--texte-doux); }
.fondateur__contact a:hover { color: var(--bleu-pale); }
.fiche {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.2rem;
  margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--bordure);
}
.fiche__bloc--large { grid-column: 1 / -1; }
.fiche h4 {
  font-family: var(--titre); font-size: .7rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--bleu-clair); margin-bottom: .55rem;
}
.contenu .fiche ul, .fiche ul { margin: 0; padding: 0; list-style: none; }
.contenu .fiche li { margin-bottom: 0; }
.fiche li { padding: .22rem 0; font-size: .93rem; color: var(--texte-doux); }
.fondateur > div > p { max-width: 68ch; }
.fiche li a { color: var(--texte); text-decoration: underline; text-underline-offset: 3px; }
.fiche li a:hover { color: var(--bleu-pale); }
.fiche__chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; }
.fiche__chips span {
  border: 1px solid var(--bordure); border-radius: 999px;
  padding: .3rem .8rem; font-family: var(--titre);
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  color: var(--texte-doux);
}
@media (max-width: 560px) { .fondateur { flex-direction: column; } }
@media (max-width: 560px) { .fiche { grid-template-columns: 1fr; } }
.pied__badge-partenaire img { height: 96px; width: auto; margin-bottom: 0; }

.pied__titre {
  font-family: var(--titre);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.3rem;
}

.pied__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.pied__liste li { color: var(--texte-doux); font-size: .92rem; display: flex; gap: .7rem; align-items: flex-start; }
.pied__liste a { color: var(--texte-doux); }
.pied__liste a:hover { color: var(--bleu-clair); }
.pied__liste .icone { width: 17px; height: 17px; color: var(--bleu-clair); margin-top: .28rem; }

.pied__bas {
  border-top: 1px solid var(--bordure);
  padding-block: 1.5rem 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.8rem;
  align-items: center;
  justify-content: space-between;
  font-size: .84rem;
  color: var(--texte-doux);
}
.pied__bas a { color: var(--texte-doux); }
.pied__bas a:hover { color: var(--bleu-clair); }
.pied__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }

/* --- Formulaire --------------------------------------------------------- */

.formulaire { display: grid; gap: 1.25rem; max-width: 620px; }
.champ { display: grid; gap: .5rem; }
.champ label { font-family: var(--titre); font-size: .86rem; font-weight: 500; color: var(--texte); }

.champ input,
.champ textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: .9rem 1.1rem;
  color: var(--texte);
  font-family: var(--corps);
  font-size: 1rem;
  transition: border-color .18s ease, background .18s ease;
}
.champ input:focus,
.champ textarea:focus { outline: none; border-color: var(--bleu-clair); background: var(--surface-2); }
.champ textarea { resize: vertical; min-height: 160px; }
.champ input::placeholder, .champ textarea::placeholder { color: #666D7C; }

.pot-de-miel {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
}

.message-formulaire { display: none; padding: 1.05rem 1.25rem; border-radius: 10px; font-size: .94rem; }
.message-formulaire.visible { display: block; }
.message-formulaire--ok { background: rgba(45, 170, 100, .12); border: 1px solid rgba(45, 170, 100, .45); color: #64D89B; }
.message-formulaire--erreur { background: rgba(220, 70, 70, .12); border: 1px solid rgba(220, 70, 70, .45); color: #F08A8A; }

/* --- Blocs coordonnées -------------------------------------------------- */

.coordonnees { display: grid; gap: 1.5rem; }
.coordonnees__item { display: flex; gap: .9rem; align-items: flex-start; }
.coordonnees__item .icone { width: 19px; height: 19px; color: var(--bleu-clair); margin-top: .38rem; flex-shrink: 0; }
.coordonnees__etiquette {
  font-family: var(--titre);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bleu-clair);
  margin-bottom: .15rem;
}
.coordonnees__valeur { color: var(--texte); font-size: .98rem; }

/* --- Pages de contenu long (légal, fiches d'app) ------------------------ */

.contenu { max-width: var(--max-texte); }
.contenu h1 { text-transform: none; letter-spacing: -.01em; }
.contenu h2 { margin-top: 2.6em; font-size: clamp(1.3rem, 2.2vw, 1.65rem); }
.contenu h2:first-child { margin-top: 0; }
.contenu h3 { margin-top: 2em; font-size: 1.1rem; }
.contenu ul, .contenu ol { padding-left: 1.3rem; margin: 0 0 1.1em; }
.contenu li { margin-bottom: .5em; color: var(--texte-doux); }
.contenu p { color: var(--texte-doux); }
.contenu a { text-decoration: underline; text-underline-offset: 3px; }

.maj {
  font-size: .87rem;
  color: var(--texte-doux);
  border-left: 3px solid var(--bleu);
  padding-left: 1rem;
  margin-bottom: 2.5rem;
}

/* --- Éléments des fiches d'application ---------------------------------- */

.etiquette-code {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .84rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 7px;
  padding: .28rem .7rem;
  color: var(--bleu-pale);
  margin: 0 .2rem .4rem 0;
}

.flux { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.4rem; margin-block: 2.5rem; }
.flux__etape { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 1.2rem 1.6rem; text-align: center; min-width: 150px; }
.flux__etape strong { display: block; font-family: var(--titre); font-size: 1rem; }
.flux__etape span { font-size: .86rem; color: var(--texte-doux); }
.flux__fleche { color: var(--bleu-clair); font-size: 1.4rem; line-height: 1; }

.etat { border-radius: var(--radius); padding: 1.6rem; border: 2px solid var(--bordure); background: var(--surface); }
.etat--ok      { border-color: rgba(74, 222, 128, .55); }
.etat--erreur  { border-color: rgba(239, 68, 68, .55); }
.etat--attente { border-color: rgba(49, 131, 220, .55); }
.etat__titre { font-family: var(--titre); font-weight: 600; font-size: 1.04rem; margin: 0 0 .5rem; }
.etat--ok .etat__titre      { color: #4ADE80; }
.etat--erreur .etat__titre  { color: #EF4444; }
.etat--attente .etat__titre { color: var(--bleu-clair); }
.etat__corps { margin: 0; color: var(--texte-doux); font-size: .95rem; }
.etat__code {
  margin-top: 1rem;
  background: #0F172A;
  border: 2px solid rgba(74, 222, 128, .55);
  border-radius: 9px;
  padding: 1rem;
  word-break: break-all;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #4ADE80;
  font-size: .83rem;
}

/* Transcript de terminal */
.terminal {
  background: #07080B;
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  overflow: hidden;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .84rem;
  line-height: 1.75;
}
.terminal__barre { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; background: var(--surface-2); border-bottom: 1px solid var(--bordure); color: var(--texte-doux); font-size: .78rem; }
.terminal__pastille { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.terminal__titre { margin-left: .6rem; }
.terminal__corps { padding: 1.2rem 1.3rem; overflow-x: auto; margin: 0; white-space: pre; color: var(--texte-doux); }
.terminal__corps b { color: #fff; font-weight: 500; }
.terminal__corps .invite { color: var(--bleu-clair); font-weight: 700; }
.terminal__corps .ok { color: #4ADE80; }
.terminal__corps .avert { color: var(--jaune); }

.avis-interne {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(49, 131, 220, .1);
  border: 1px solid var(--bordure-2);
  color: var(--bleu-clair);
  border-radius: 999px;
  padding: .4rem 1rem;
  font-size: .82rem;
  font-family: var(--titre);
  font-weight: 500;
  margin-bottom: 1.5rem;
}

/* --- FAQ (accordéon natif details/summary) ------------------------------ */

.faq {
  max-width: 760px;
  margin-inline: auto;
  display: grid;
  gap: .8rem;
}

.faq details {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  transition: border-color .2s ease;
}
.faq details:hover,
.faq details[open] { border-color: var(--bordure-2); }

.faq summary {
  cursor: pointer;
  padding: 1.1rem 1.3rem;
  font-family: var(--titre);
  font-size: .98rem;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(31, 103, 184, .16);
  border: 1px solid var(--bordure-2);
  color: var(--bleu-clair);
  font-size: 1.05rem;
  line-height: 1;
  transition: transform .22s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }

.faq__reponse {
  padding: 0 1.3rem 1.2rem;
  color: var(--texte-doux);
  font-size: .95rem;
  line-height: 1.7;
}
.faq__reponse p { margin: 0 0 .8em; }
.faq__reponse p:last-child { margin-bottom: 0; }

/* --- Adaptatif ---------------------------------------------------------- */

@media (max-width: 980px) {
  .pied__colonnes { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}

@media (max-width: 860px) {
  .nav__bascule { display: block; }

  .nav__liens {
    position: fixed;
    inset: 78px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--fond-2);
    border-bottom: 1px solid var(--bordure);
    padding: .5rem 1.25rem 1.5rem;
    display: none;
  }
  .nav__liens.ouvert { display: flex; }
  .nav__liens li { border-bottom: 1px solid var(--bordure); }
  .nav__liens li:last-child { border-bottom: 0; padding-top: 1rem; }
  .nav__liens a:not(.bouton) { display: block; padding: 1rem 0; font-size: 1rem; }
  .nav__liens .bouton { width: 100%; }

  /* Le sous-menu devient un accordéon empilé : pas de survol au doigt. */
  .nav__declencheur { width: 100%; justify-content: space-between; padding: 1rem 0; font-size: 1rem; }
  .nav__sous {
    position: static;
    transform: none;
    min-width: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 .8rem .4rem;
    display: none;
    opacity: 1;
    visibility: visible;
  }
  /* Au doigt, il n'y a pas de survol : seul le clic ouvre. On neutralise donc
     les règles de survol du bureau. La règle « ouvert » doit avoir AU MOINS la
     même spécificité que `:focus-within`, sinon le focus resté sur le bouton
     après le clic la garde fermée. */
  .nav__deroulant:hover > .nav__sous,
  .nav__deroulant:focus-within > .nav__sous { display: none; }
  .nav__deroulant > .nav__sous.ouvert { display: block; transform: none; }
  .nav__sous a { padding: .75rem .5rem !important; }
  .nav__sous__tous { border-top: 1px solid var(--bordure); }

  .pied__bas { flex-direction: column; align-items: flex-start; }

  /* Au doigt, les liens du pied faisaient ~22 px de haut. Le rembourrage doit
     être sur l'ancre elle-même : sur le <li>, la zone cliquable ne bouge pas. */
  .pied__liste { gap: .15rem; }
  .pied__liste li { align-items: center; }
  .pied__liste a { display: inline-block; padding-block: .55rem; }
  .pied__legal a { display: inline-block; padding-block: .5rem; }
  .lien-carte { display: inline-block; padding-block: .5rem; }
}

@media (max-width: 520px) {
  .heros__actions .bouton { width: 100%; }
  .heros h1 { font-size: 1.55rem; }
  .flux__fleche { transform: rotate(90deg); }
  .carte-photo, .carte-photo--nue { min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .bouton:hover, .carte:hover, .carte-photo:hover, .clients__piste img:hover { transform: none; }
}

@media print {
  .entete, .pied, .appel, .saut-contenu { display: none; }
  body { background: #fff; color: #000; }
  h1, h2, h3 { color: #000; }
}

/* --- Le petit robot PJM (clavardage) ------------------------------------ */

.robot-bouton {
  position: fixed;
  right: clamp(1rem, 3vw, 1.8rem);
  bottom: clamp(1rem, 3vw, 1.8rem);
  z-index: 200;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid var(--bordure-2);
  background: var(--surface-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  transition: transform .18s ease, border-color .18s ease;
}
.robot-bouton:hover { transform: scale(1.06); border-color: var(--bleu-clair); }
.robot-bouton img { width: 54px; height: 54px; object-fit: contain; }

.robot-panneau {
  position: fixed;
  right: clamp(1rem, 3vw, 1.8rem);
  bottom: clamp(5.4rem, 3vw + 4.6rem, 6.2rem);
  z-index: 200;
  width: min(370px, calc(100vw - 2rem));
  height: min(520px, calc(100dvh - 8rem));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure-2);
  border-radius: var(--radius-l);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .65);
  overflow: hidden;
}
.robot-panneau[hidden] { display: none; }

.robot-entete {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--bordure);
}
.robot-entete img { width: 30px; height: 30px; object-fit: contain; }
.robot-entete strong { font-family: var(--titre); font-size: .95rem; }
.robot-entete small { display: block; color: var(--texte-doux); font-size: .74rem; }
.robot-fermer {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--texte-doux);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: .2rem .4rem;
}
.robot-fermer:hover { color: #fff; }

.robot-fil {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.robot-bulle {
  max-width: 85%;
  padding: .6rem .85rem;
  border-radius: 14px;
  font-size: .9rem;
  line-height: 1.45;
  overflow-wrap: break-word;
}
.robot-bulle--robot {
  align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--bordure);
  border-bottom-left-radius: 4px;
}
.robot-bulle--visiteur {
  align-self: flex-end;
  background: var(--bleu);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.robot-bulle--attente { padding: .75rem .9rem; }
.robot-frappe { display: inline-flex; gap: 5px; align-items: center; height: 10px; }
.robot-frappe i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bleu-clair);
  animation: robot-frappe 1.2s ease-in-out infinite;
}
.robot-frappe i:nth-child(2) { animation-delay: .18s; }
.robot-frappe i:nth-child(3) { animation-delay: .36s; }
@keyframes robot-frappe {
  0%, 60%, 100% { transform: translateY(0); opacity: .35; }
  30% { transform: translateY(-5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .robot-frappe i { animation: none; opacity: .7; } }
.robot-bulle a { color: var(--bleu-clair); text-decoration: underline; }

.robot-formulaire {
  display: flex;
  gap: .5rem;
  padding: .7rem;
  border-top: 1px solid var(--bordure);
  background: var(--surface-2);
}
.robot-formulaire input {
  flex: 1;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: .55rem .8rem;
  color: var(--texte);
  font-size: .9rem;
}
.robot-formulaire input:focus { outline: none; border-color: var(--bleu-clair); }
.robot-formulaire button {
  background: var(--bleu);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: .55rem .9rem;
  font-size: .9rem;
  cursor: pointer;
}
.robot-formulaire button:hover { filter: brightness(1.1); }

@media print { .robot-bouton, .robot-panneau { display: none; } }

/* Le bouton affiche l'illustration de Pixel avec sa bulle (assets/img/pixel-bulle.png). */

/* Accroche d'accueil : petite bulle qui apparaît quelques secondes après l'arrivée */
.robot-accroche {
  position: fixed;
  right: clamp(1rem, 3vw, 1.8rem);
  bottom: clamp(5.6rem, 3vw + 4.8rem, 6.4rem);
  z-index: 199;
  width: min(280px, calc(100vw - 2rem));
  padding: .85rem 2.2rem .85rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--bordure-2);
  border-radius: 14px;
  border-bottom-right-radius: 4px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
  font-size: .88rem;
  line-height: 1.4;
  animation: robot-surgir .4s cubic-bezier(0, 0, .2, 1) both;
}
.robot-accroche[hidden] { display: none; }
.robot-accroche--sortie { animation: robot-retrait .25s ease-in both; }
@keyframes robot-retrait {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(8px) scale(.97); }
}
@media (prefers-reduced-motion: reduce) { .robot-accroche--sortie { animation: none; opacity: 0; } }
.robot-accroche strong { display: block; color: #fff; margin-bottom: .2rem; font-family: var(--titre); font-size: .9rem; }
.robot-accroche span { color: var(--texte-doux); }
.robot-accroche__fermer {
  position: absolute;
  top: .3rem;
  right: .45rem;
  background: none;
  border: none;
  color: var(--texte-doux);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: .2rem .35rem;
}
.robot-accroche__fermer:hover { color: #fff; }
@keyframes robot-surgir {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .robot-accroche { animation: none; } }
@media print { .robot-accroche { display: none; } }

/* --- Bandeau de consentement (témoins) --------------------------------- */

/* Overlay centré : le site reste visible derrière, mais il faut choisir —
   Refuser est aussi gros et aussi proche qu'Accepter (Loi 25 : choix libre). */
body.consentement-visible { overflow: hidden; }
body.consentement-visible::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 205;
  background: rgba(11, 12, 16, .72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.consentement {
  position: fixed;
  inset: 0;
  margin: auto;                 /* centrage sans transform (l'animation en a un) */
  height: fit-content;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  z-index: 210;
  width: min(480px, calc(100vw - 2rem));
  padding: 1.5rem 1.6rem;
  background: var(--surface-2);
  border: 1px solid var(--bordure-2);
  border-radius: var(--radius-l);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
  font-size: .9rem;
  line-height: 1.5;
  animation: consentement-apparaitre .35s cubic-bezier(0, 0, .2, 1) both;
}
@keyframes consentement-apparaitre { from { opacity: 0; } to { opacity: 1; } }
.consentement h2 { font-size: 1.15rem; margin: 0 0 .6rem; }
.consentement p { color: var(--texte); margin: 0 0 1.1rem; }
.consentement p a { text-decoration: underline; }
.consentement__boutons { display: flex; gap: .6rem; }
.consentement__boutons .bouton { flex: 1; padding: .85rem 1rem; font-size: .74rem; }
@media (max-width: 480px) { .consentement__boutons { flex-direction: column-reverse; } }
@media (prefers-reduced-motion: reduce) { .consentement { animation: none; } }
@media print { .consentement { display: none; } }

/* --- Mobile : Pixel plein écran, bandeau qui laisse le coin libre --------- */

@media (max-width: 640px) {
  /* Le panneau prend tout l'écran : plus de boîte flottante à moitié cachée,
     et 100dvh suit le clavier virtuel pour que le champ reste visible. */
  .robot-panneau {
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border: none;
  }
  .robot-entete { padding-top: max(.85rem, env(safe-area-inset-top)); }
  .robot-formulaire { padding-bottom: max(.7rem, env(safe-area-inset-bottom)); }
  .robot-formulaire input { font-size: 16px; }   /* évite le zoom auto d'iOS Safari */
  /* Quand le panneau est ouvert, le bouton flottant est inutile et gênant */
  body.robot-ouvert .robot-bouton,
  body.robot-ouvert .robot-accroche,
  body.robot-ouvert .consentement { display: none; }
  body.robot-ouvert { overflow: hidden; }

  /* L'overlay de consentement reste centré sur mobile */
  .consentement { width: calc(100vw - 1.5rem); padding: 1.3rem 1.2rem; }
  .consentement__boutons { flex-direction: row; }
  .consentement__boutons .bouton { padding: .6rem .5rem; font-size: .68rem; }

  /* L'accroche ne se superpose jamais au bandeau de consentement */
  body.consentement-visible .robot-accroche { display: none; }
}

/* --- Prise de rendez-vous (/rendez-vous/) -------------------------------- */

.agenda { max-width: 720px; margin-inline: auto; }
.agenda [hidden] { display: none !important; }   /* hidden doit gagner sur display:grid/flex */
.agenda__chargement, .agenda__vide { color: var(--texte-doux); }
.agenda__chargement { display: flex; align-items: center; justify-content: center; gap: .7rem; padding: 2.5rem 0; }
.agenda__chargement .robot-frappe i { width: 9px; height: 9px; }
.agenda__jours { display: grid; gap: 1.6rem; }
.agenda__jour h3 { font-size: 1rem; margin-bottom: .6rem; color: var(--texte); }
.agenda__creneaux { display: flex; flex-wrap: wrap; gap: .55rem; }
.agenda__creneau {
  font-family: var(--titre);
  font-size: .9rem;
  font-weight: 600;
  padding: .65rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--bordure-2);
  background: var(--surface);
  color: #fff;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .16s ease;
}
.agenda__creneau:hover { background: var(--bleu); border-color: var(--bleu); transform: translateY(-2px); }
.agenda__choix { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; color: #fff; }
.agenda__changer { background: none; border: none; color: var(--bleu-clair); text-decoration: underline; cursor: pointer; font-size: .9rem; padding: 0; }
.agenda__merci h2 { margin-bottom: .6rem; }
.champ label small { color: var(--texte-doux); font-weight: 400; }

/* --- Espace client : page protégée par mot de passe ---------------------- */

.protege { max-width: 470px; margin-inline: auto; text-align: center; padding: 2.6rem 2.2rem 2.3rem; }
.protege__icone {
  width: 54px; height: 54px; margin: 0 auto 1.3rem;
  border-radius: 50%; display: grid; place-items: center;
  background: rgba(31, 103, 184, .16); border: 1px solid var(--bordure-2); color: var(--bleu-clair);
}
.protege__icone svg { width: 24px; height: 24px; }
.protege h2 { font-size: 1.35rem; margin-bottom: .45em; }
.protege > p { color: var(--texte-doux); font-size: .93rem; }
.protege__champ { display: block; text-align: left; margin: 1.6rem 0 1rem; }
.protege__champ span {
  display: block; margin-bottom: .45rem;
  font-family: var(--titre); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texte-doux);
}
.protege__champ input {
  width: 100%; padding: .9rem 1.1rem;
  font-family: var(--corps); font-size: 16px; letter-spacing: .1em; color: #fff;
  background: var(--fond-2); border: 1px solid var(--bordure-2); border-radius: 10px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.protege__champ input:focus { outline: none; border-color: var(--bleu-clair); box-shadow: 0 0 0 3px rgba(49, 131, 220, .22); }
.protege .bouton { width: 100%; }
.protege .bouton:disabled { opacity: .55; cursor: progress; transform: none; }
.protege__erreur { margin-top: 1rem; color: #F09A9A; font-size: .9rem; }
.protege__aide { margin-top: 1.4rem; font-size: .84rem; color: var(--texte-doux); }
.protege__aide a { text-decoration: underline; }

/* --- Espace client : suivi de projet (généré par suivi.js) --------------- */

.suivi__date {
  display: inline-block; margin-top: 1.2rem;
  font-family: var(--titre); font-size: .74rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texte-doux);
}
.suivi__date::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bleu-clair); margin-right: .55rem; vertical-align: 1px; }

.suivi__tete { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1.15fr .85fr; align-items: center; }
@media (max-width: 860px) { .suivi__tete { grid-template-columns: 1fr; } }

.progres { padding: 1.9rem 1.8rem; }
.progres:hover { transform: none; }
.progres__entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.progres__valeur { font-family: var(--titre); font-size: clamp(2.4rem, 4.5vw, 3.2rem); font-weight: 700; line-height: 1; color: #fff; }
.progres__libelle { text-align: right; color: var(--texte-doux); font-size: .88rem; line-height: 1.35; }
.progres__barre { height: 10px; border-radius: 999px; background: rgba(218, 218, 218, .08); overflow: hidden; margin: 1.1rem 0 1.3rem; }
.progres__barre { display: flex; }
.progres__barre span {
  display: block; height: 100%; width: var(--valeur, 0%); border-radius: 999px;
  background: linear-gradient(90deg, var(--bleu), var(--bleu-clair));
  animation: progres-remplir 1.1s cubic-bezier(0, 0, .2, 1) both;
}
.progres__barre span + span { margin-left: 2px; }
.progres__seg--offert { background: linear-gradient(90deg, #2BB39A, var(--offert)) !important; }
@keyframes progres-remplir { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { .progres__barre span { animation: none; } }
.progres__chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.progres__chiffre { text-align: center; padding: .85rem .4rem; border-radius: var(--radius); background: var(--fond-2); border: 1px solid var(--bordure); }
.progres__chiffre strong { display: block; font-family: var(--titre); font-size: 1.55rem; line-height: 1.1; color: #fff; }
.progres__chiffre span { font-size: .76rem; color: var(--texte-doux); }
.progres__chiffre--fait strong { color: var(--bleu-clair); }

/* Pastilles de statut. L'ambre est réservé au statut « à confirmer » :
   c'est un signal d'attention, pas une couleur de marque. */
.statut {
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  font-family: var(--titre); font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  padding: .3rem .8rem .3rem .65rem; border-radius: 999px; border: 1px solid;
}
.statut::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-sizing: border-box; }
.statut--fait { color: var(--bleu-pale); border-color: rgba(49, 131, 220, .5); background: rgba(31, 103, 184, .16); }
.statut--confirmer { color: #F0BE5C; border-color: rgba(240, 190, 92, .45); background: rgba(240, 190, 92, .09); }
.statut--faire { color: var(--texte-doux); border-color: rgba(218, 218, 218, .22); background: rgba(218, 218, 218, .04); }
.statut--faire::before { background: transparent; border: 1.5px solid currentColor; }

.suivi__legende { display: flex; flex-wrap: wrap; gap: .8rem 1.8rem; margin-bottom: 1.5rem; }
.suivi__legende__item { display: flex; align-items: center; gap: .7rem; font-size: .88rem; color: var(--texte-doux); }

.tableau-defile { overflow-x: auto; border: 1px solid var(--bordure); border-radius: var(--radius-l); background: var(--surface); }
.suivi__tableau { width: 100%; border-collapse: collapse; font-size: .94rem; }
.suivi__tableau th, .suivi__tableau td { padding: 1.05rem 1.1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bordure); }
.suivi__tableau thead th {
  font-family: var(--titre); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texte-doux); background: var(--surface-2); white-space: nowrap; padding-block: .85rem;
}
.suivi__tableau tbody tr:last-child > * { border-bottom: 0; }
.suivi__tableau tbody tr { transition: background .18s ease; }
.suivi__tableau tbody tr:hover { background: rgba(49, 131, 220, .06); }
.suivi__tableau tbody th { color: #fff; font-family: var(--titre); font-weight: 600; font-size: .97rem; line-height: 1.35; min-width: 200px; }
.suivi__num { font-family: var(--titre); font-weight: 600; color: var(--texte-doux); width: 1%; white-space: nowrap; }
.suivi__tableau tr.est-fait .suivi__num { color: var(--bleu-clair); }
.suivi__statut { white-space: nowrap; }
.suivi__detail { color: var(--texte-doux); min-width: 280px; line-height: 1.6; }

@media (max-width: 760px) {
  .tableau-defile { overflow: visible; border: 0; background: none; border-radius: 0; }
  .suivi__tableau, .suivi__tableau tbody, .suivi__tableau tr, .suivi__tableau th, .suivi__tableau td { display: block; }
  .suivi__tableau thead { display: none; }
  .suivi__tableau tbody tr {
    display: grid; grid-template-columns: auto 1fr auto; gap: .35rem .8rem; align-items: center;
    background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--radius-l);
    padding: 1.15rem 1.2rem 1.25rem; margin-bottom: .85rem;
  }
  .suivi__tableau tbody tr:hover { background: var(--surface); }
  .suivi__tableau th, .suivi__tableau td { padding: 0; border: 0; min-width: 0; }
  .suivi__tableau tbody th { grid-column: 2; grid-row: 1; }
  .suivi__num { grid-column: 1; grid-row: 1; }
  .suivi__statut { grid-column: 3; grid-row: 1; }
  .suivi__detail { grid-column: 1 / -1; grid-row: 2; font-size: .9rem; margin-top: .45rem; padding-top: .7rem; border-top: 1px solid var(--bordure); }
}
@media (max-width: 420px) {
  .suivi__tableau tbody tr { grid-template-columns: auto 1fr; }
  .suivi__statut { grid-column: 1 / -1; grid-row: 2; }
  .suivi__detail { grid-row: 3; }
}

.suivi__deux { align-items: start; }
.suivi__actions { list-style: none; margin: 0; padding: 0; }
.suivi__actions .etape p { color: var(--texte); margin-top: .5rem; }
.suivi__contact { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--bordure); color: var(--texte-doux); font-size: .92rem; max-width: var(--max-texte); }

/* « Avez-vous quelque chose à faire ? » — bloc en tête de page */
.suivi__afaire-section { padding-block: clamp(2rem, 4vw, 3rem) 0; }
.afaire { border-radius: var(--radius-l); border: 1px solid var(--bordure); background: var(--surface); padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.2rem); }
.afaire--oui { border-color: rgba(240, 190, 92, .55); background: linear-gradient(135deg, rgba(240, 190, 92, .10), rgba(240, 190, 92, .03)); }
.afaire--non { border-color: var(--bordure-2); background: linear-gradient(135deg, rgba(31, 103, 184, .14), rgba(31, 103, 184, .04)); }
.afaire__entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.2rem; }
.afaire__question { font-family: var(--titre); font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.4rem); color: #fff; }
.afaire__reponse { font-family: var(--titre); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.4rem); text-transform: uppercase; letter-spacing: .04em; }
.afaire--oui .afaire__reponse { color: #F0BE5C; }
.afaire--non .afaire__reponse { color: var(--bleu-pale); }
.afaire__intro { color: var(--texte-doux); margin: .5rem 0 0; font-size: .95rem; }
.afaire__liste { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .7rem; counter-reset: afaire; }
.afaire__liste li { display: grid; grid-template-columns: auto 1fr; gap: .15rem .9rem; align-items: baseline; padding: .9rem 1.1rem; border-radius: var(--radius); background: rgba(11, 12, 16, .45); border: 1px solid var(--bordure); }
.afaire__liste li::before { counter-increment: afaire; content: counter(afaire); grid-row: 1 / 3; align-self: start; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--titre); font-weight: 600; font-size: .8rem; color: #F0BE5C; border: 1px solid rgba(240, 190, 92, .5); }
.afaire__liste strong { color: #fff; }
.afaire__liste span { color: var(--texte-doux); font-size: .93rem; }
@media print { .afaire { background: #fff; border-color: #999; } .afaire__question, .afaire__reponse, .afaire__liste strong { color: #000; } }

/* Hors contrat : ce que PJM offre en plus de la soumission (couleur sarcelle, distincte
   du bleu du contrat et de l'ambre des points à confirmer) */
:root { --offert: #4FD1C5; }
.offert {
  display: inline-flex; align-items: center; gap: .35rem; vertical-align: middle; margin-left: .55rem; white-space: nowrap;
  font-family: var(--titre); font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--offert); border: 1px solid rgba(79, 209, 197, .5); background: rgba(79, 209, 197, .1);
  padding: .2rem .55rem; border-radius: 999px;
}
.offert::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.suivi__legende__item .offert { margin-left: 0; }
.progres__offert { margin: -.5rem 0 1rem; font-size: .84rem; color: var(--texte-doux); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.progres__offert .offert { margin-left: 0; }
.suivi__tableau tr.est-offert .suivi__num { color: var(--offert); }
.suivi__tableau tr.est-offert th .offert { display: inline-flex; margin: .15rem 0 0; }
.suivi__tableau tr.est-offert { background: rgba(79, 209, 197, .035); }
.suivi__tableau tbody tr.est-offert:hover { background: rgba(79, 209, 197, .07); }
.mandat--offert .mandat__numero { color: var(--offert); border-color: rgba(79, 209, 197, .5); }
.mandat--offert .mandat__titre h3 .offert { margin-left: .7rem; vertical-align: .2em; }
.mandat--offert .mandat__livrable { border-left-color: var(--offert); background: rgba(79, 209, 197, .07); }
.suivi__sommaire a.est-offert { color: var(--offert); border-color: rgba(79, 209, 197, .45); }
.journal__entree--offert::before { border-color: var(--offert) !important; }
.journal__entree--offert:first-child::before { background: var(--offert) !important; box-shadow: 0 0 0 4px rgba(79, 209, 197, .2) !important; }
.journal__entree--offert .journal__date { color: var(--offert); display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
.journal__entree--offert .journal__date .offert { margin-left: .3rem; }
@media print { .offert { color: #000; border-color: #999; background: none; } .progres__seg--offert, .volet__seg--offert { background: #2BB39A !important; } }

/* Statut global du projet et des mandats */
.etat {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  font-family: var(--titre); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: .38rem .95rem .38rem .75rem; border-radius: 999px; border: 1px solid;
}
.etat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-sizing: border-box; }
.etat--actif   { color: #fff; border-color: var(--bleu-clair); background: var(--bleu); }
.etat--actif::before { box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.etat--attente { color: #F0BE5C; border-color: rgba(240, 190, 92, .5); background: rgba(240, 190, 92, .1); }
.etat--neutre  { color: var(--texte-doux); border-color: rgba(218, 218, 218, .22); background: rgba(218, 218, 218, .04); }
.etat--neutre::before { background: transparent; border: 1.5px solid currentColor; }
.etat--fini    { color: var(--bleu-pale); border-color: rgba(49, 131, 220, .5); background: rgba(31, 103, 184, .16); }
.etat--grand   { font-size: .8rem; padding: .5rem 1.2rem .5rem .95rem; }

.suivi__meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .9rem 1.4rem; margin-top: 1.6rem; }
.suivi__meta .suivi__date { margin-top: 0; }

.suivi__sommaire { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.8rem; }
.suivi__sommaire a {
  font-family: var(--titre); font-size: .76rem; font-weight: 500; letter-spacing: .03em;
  color: var(--texte); padding: .45rem .95rem; border-radius: 999px;
  border: 1px solid var(--bordure); background: rgba(20, 22, 29, .7);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.suivi__sommaire a:hover { color: #fff; border-color: var(--bleu-clair); background: rgba(49, 131, 220, .14); }

/* Vue d'ensemble : un volet par ligne, avec sa mini-barre */
.volets { list-style: none; margin: 1.4rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--bordure); display: grid; gap: .7rem; }
.volets li { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; align-items: center; font-size: .88rem; }
.volets a { color: var(--texte); font-weight: 500; }
.volets a:hover { color: var(--bleu-clair); }
.volet__compte { font-family: var(--titre); font-size: .8rem; color: var(--texte-doux); }
.volet__compte b { color: var(--texte); font-weight: 600; margin-left: .2rem; }
.volet__barre { grid-column: 1 / -1; height: 5px; border-radius: 999px; background: rgba(218, 218, 218, .08); overflow: hidden; }
.volet__barre { display: flex; }
.volet__barre span { display: block; height: 100%; width: var(--valeur, 0%); border-radius: 999px; background: var(--bleu-clair); animation: progres-remplir 1.1s cubic-bezier(0, 0, .2, 1) both; }
.volet__barre span + span { margin-left: 2px; }
.volet__seg--offert, .volet--offert .volet__barre span { background: var(--offert) !important; }
.volet--offert a { color: var(--offert); }
@media (prefers-reduced-motion: reduce) { .volet__barre span { animation: none; } }

.suivi__entete { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .6rem 2rem; max-width: none; }
.suivi__entete h2 { margin-bottom: 0; }
.suivi__entete .surligne { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 640px) { .suivi__entete { grid-template-columns: 1fr; } }
.suivi__compte { font-family: var(--titre); font-size: .84rem; color: var(--texte-doux); margin: 0 0 .35rem; }

/* Mandats */
.mandats { display: grid; gap: clamp(2.2rem, 4vw, 3.5rem); }
.mandat { padding-top: clamp(2rem, 3.5vw, 3rem); border-top: 1px solid var(--bordure); scroll-margin-top: 100px; }
.mandat:first-child { border-top: 0; padding-top: 0; }
.mandat__entete { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem 1.6rem; align-items: start; margin-bottom: 1.4rem; }
.mandat__numero {
  display: inline-block; font-family: var(--titre); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bleu-clair); border: 1px solid var(--bordure-2); border-radius: 999px; padding: .42rem 1rem; white-space: nowrap; margin-top: .2rem;
}
.mandat__titre h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); margin-bottom: .4em; }
.mandat__objectif, .mandat__intro { color: var(--texte-doux); font-size: .95rem; margin: 0 0 .5em; max-width: 62ch; }
.mandat__etat { display: grid; gap: .5rem; justify-items: end; min-width: 190px; }
.mandat__compte { font-family: var(--titre); font-size: .8rem; color: var(--texte-doux); }
.mandat__etat .progres__barre { width: 100%; height: 6px; margin: 0; }
.mandat__livrable {
  margin: 1.1rem 0 0; padding: .9rem 1.2rem; font-size: .93rem; color: var(--texte-doux);
  border-left: 3px solid var(--bleu); background: rgba(31, 103, 184, .07); border-radius: 0 var(--radius) var(--radius) 0;
}
@media (max-width: 760px) {
  .mandat__entete { grid-template-columns: 1fr; gap: .8rem; }
  .mandat__etat { justify-items: start; min-width: 0; }
  .mandat__etat .progres__barre { max-width: 260px; }
}

/* Journal : ligne du temps verticale */
/* Le journal défile dans sa propre boîte : la page ne s'allonge pas avec les entrées */
.journal {
  list-style: none; margin: 0; padding: .2rem .8rem 1.5rem 2.2rem; display: grid; gap: 1.4rem;
  max-height: 540px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--bordure-2) transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent);
}
.journal::-webkit-scrollbar { width: 6px; }
.journal::-webkit-scrollbar-thumb { background: var(--bordure-2); border-radius: 999px; }
@media (max-width: 860px) { .journal { max-height: 460px; } }
@media print { .journal { max-height: none; overflow: visible; mask-image: none; -webkit-mask-image: none; } }
.journal__entree { position: relative; }
/* La ligne verticale est portée par chaque entrée (et non par la liste) pour rester
   visible dans la boîte défilante ; le point est dessiné par-dessus. */
.journal__entree::after {
  content: ""; position: absolute; left: calc(-2.2rem + 12px); top: .6rem; bottom: -1.5rem; width: 1px; background: var(--bordure);
}
.journal__entree:last-child::after { display: none; }
.journal__entree::before {
  content: ""; position: absolute; left: calc(-2.2rem + 7px); top: .45rem; z-index: 1;
  width: 11px; height: 11px; border-radius: 50%; background: var(--fond); border: 2px solid var(--bleu-clair);
}
.journal__entree:first-child::before { background: var(--bleu-clair); box-shadow: 0 0 0 4px rgba(49, 131, 220, .2); }
.journal__date { display: block; font-family: var(--titre); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bleu-clair); margin-bottom: .25rem; }
.journal__entree p { margin: 0; color: var(--texte-doux); font-size: .94rem; }
.journal__entree:first-child p { color: var(--texte); }

@media print {
  .protege, .robot-bouton, .robot-accroche { display: none; }
  .suivi__tableau tbody th, .progres__valeur, .progres__chiffre strong, .suivi__actions .etape p { color: #000; }
  .tableau-defile, .carte, .progres__chiffre, .suivi__tableau thead th { background: #fff; border-color: #ccc; }
  .suivi__detail, .suivi__num, .suivi__legende__item, .progres__libelle, .progres__chiffre span { color: #333; }
  .statut, .etat, .mandat__numero { color: #000; border-color: #999; background: none; }
  .suivi__sommaire { display: none; }
  .journal__entree::before { background: #fff; }
  .journal__date, .volets a, .mandat__titre h3 { color: #000; }
  .progres__barre { background: #eee; }
  .progres__barre span { animation: none; background: #1F67B8; }
  .suivi__tableau tbody tr { break-inside: avoid; }
}