/* ═══════════════════════════════════════════════════════════════════════════
   ReFreshWeb — les solutions et leurs films
   ───────────────────────────────────────────────────────────────────────────
   Chargée APRÈS style.css, dont elle reprend tous les jetons (fond nuit,
   surfaces s1 → s3, accent unique, rayons, ombres, échelle de texte).
   Une seule couleur nouvelle : le jaune du mètre ruban, et seulement sur le
   ruban de Sur Mesure — c'est l'objet de son film, pas un second accent.

     1. Les trois étages (accueil)          6. Le lecteur
     2. Les cartes de solution              7. Le fil rouge
     3. Le menu « Solutions »               8. Les étapes des pages
     4. La salle de projection              9. Le socle, la confiance
     5. Ses trois partis pris              10. Les outils (calcul, check, équipe)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ruban: #F0B90B;         /* 10,4:1 avec l'encre ci-dessous */
  --ruban-encre: #14161A;
  --haut-tete: 5.25rem;     /* l'îlot de tête et son retrait du haut */
}

/* ─── 1. Les trois étages ───────────────────────────────────────────────── */

.rw-etages { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.rw-etage { display: grid; gap: var(--e-3); }
.rw-etage__tete {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.4rem var(--e-3);
  align-items: end; max-width: 58rem;
}
.rw-etage__n {
  grid-row: span 2; align-self: start;
  font-size: clamp(3.4rem, 7vw, 5.4rem); font-weight: 800; line-height: 0.82;
  letter-spacing: -0.06em; font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 1.5px var(--trait-fort);
}
.rw-etage--3 .rw-etage__n { -webkit-text-stroke: 0; color: var(--vert); text-shadow: 0 0 40px rgb(var(--vert-rgb) / 0.35); }
.rw-etage__quoi { font-size: var(--t-mini); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vert); }
.rw-etage__tete h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.035em; line-height: 1.05; }
.rw-etage__tete p:not(.rw-etage__quoi) { grid-column: 2; color: var(--t2); max-width: 60ch; }
@media (max-width: 620px) {
  .rw-etage__tete { grid-template-columns: 1fr; }
  .rw-etage__n { grid-row: auto; font-size: 3rem; }
  .rw-etage__tete p:not(.rw-etage__quoi) { grid-column: 1; }
}

/* Étage 2 : la réservation en grand, les autres modules en liste dense */
.rw-etage__grille { display: grid; gap: 14px; }
@media (min-width: 960px) { .rw-etage__grille { grid-template-columns: 1.1fr 1fr; align-items: stretch; } }
.rw-modules { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; }
@media (min-width: 620px) and (max-width: 959px) { .rw-modules { grid-template-columns: 1fr 1fr; } }
.rw-module {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.2rem 0.9rem; align-items: start;
  padding: 1rem 1.15rem; border-radius: var(--r-l);
  background: var(--s1); border: 1px solid var(--trait);
}
.rw-module svg { grid-row: span 2; width: 2.5rem; height: 2.5rem; padding: 0.55rem; border-radius: var(--r-m); background: var(--s2); color: var(--vert); }
.rw-module b { font-size: var(--t-petit); color: var(--t1); }
.rw-module span { font-size: var(--t-mini); color: var(--t2); line-height: 1.45; }

/* Le bandeau Peppol : une ligne, pas une alerte */
.rw-annonce {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.8rem 1rem 0.8rem 0.8rem; border-radius: var(--r-pilule);
  background: linear-gradient(90deg, rgb(var(--vert-rgb) / 0.12), rgb(var(--vert-rgb) / 0.03));
  border: 1px solid rgb(var(--vert-rgb) / 0.3);
  color: var(--t1); text-decoration: none; font-size: var(--t-petit);
  transition: border-color 0.3s var(--douce), background 0.3s var(--douce);
  justify-self: start; max-width: 100%;
}
.rw-annonce:hover { border-color: rgb(var(--vert-rgb) / 0.6); }
.rw-annonce__pt { flex: none; padding: 0.2rem 0.6rem; border-radius: var(--r-pilule); background: var(--vert-fond); color: var(--sur-accent); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; }
.rw-annonce .rw-fleche { color: var(--vert); transition: transform 0.4s var(--sortie); }
.rw-annonce:hover .rw-fleche { transform: translateX(4px); }
@media (max-width: 620px) { .rw-annonce { border-radius: var(--r-l); } }

.rw-methode-ligne {
  display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap;
  padding: 1.1rem 1.3rem; border-radius: var(--r-l);
  border: 1px dashed var(--trait-fort); color: var(--t2); font-size: var(--t-petit);
}
.rw-methode-ligne b { color: var(--t1); font-weight: 600; }
.rw-methode-ligne .rw-lien { margin-left: auto; }
@media (max-width: 620px) { .rw-methode-ligne .rw-lien { margin-left: 0; } }

/* ─── 2. Les cartes de solution ─────────────────────────────────────────── */

.rw-sol-cartes { display: grid; gap: 14px; }
@media (min-width: 700px)  { .rw-sol-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .rw-sol-cartes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rw-sol-carte {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--trait);
  background: linear-gradient(180deg, var(--s2), var(--s1));
  box-shadow: var(--ombre-2), inset 0 1px 0 var(--lumiere);
  text-decoration: none; color: var(--t1);
  transition: transform 0.5s var(--sortie), box-shadow 0.5s var(--douce), border-color 0.4s var(--douce);
}
.rw-sol-carte:hover { transform: translateY(-5px); border-color: rgb(var(--vert-rgb) / 0.4); box-shadow: var(--ombre-3), 0 0 0 1px rgb(var(--vert-rgb) / 0.15); }
.rw-sol-carte__vue { position: relative; aspect-ratio: 16 / 9; background: #0b0f11; overflow: hidden; }
.rw-sol-carte__vue img, .rw-sol-carte__vue video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--sortie);
}
.rw-sol-carte:hover .rw-sol-carte__vue img, .rw-sol-carte:hover .rw-sol-carte__vue video { transform: scale(1.03); }
.rw-sol-carte__vue::after {
  content: ""; position: absolute; inset: auto 0 0; height: 40%;
  background: linear-gradient(transparent, rgb(var(--nuit-rgb) / 0.55)); pointer-events: none;
}
.rw-sol-carte__lecture {
  position: absolute; left: 0.75rem; bottom: 0.75rem; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.65rem; border-radius: var(--r-pilule);
  background: rgb(var(--nuit-rgb) / 0.78); color: var(--t1); font-size: 0.75rem; font-weight: 600;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.rw-sol-carte__lecture svg { color: var(--vert); }
.rw-sol-carte__corps { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.15rem 1.25rem 1.3rem; flex: 1; }
.rw-sol-carte__pour { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vert); }
.rw-sol-carte h4 { font-size: 1.35rem; letter-spacing: -0.03em; line-height: 1.1; }
.rw-sol-carte p { font-size: var(--t-mini); color: var(--t2); line-height: 1.5; }
.rw-sol-carte__suite { margin-top: auto; padding-top: 0.6rem; font-size: var(--t-mini); font-weight: 600; color: var(--vert); display: inline-flex; gap: 0.35rem; align-items: center; }
.rw-sol-carte:hover .rw-fleche { transform: translateX(4px); }
.rw-sol-carte .rw-fleche { transition: transform 0.4s var(--sortie); }

/* ─── 3. Le menu « Solutions » ──────────────────────────────────────────── */

/* Le panneau se centre sous l'îlot entier, pas sous son lien : centré sur
   « Solutions », il débordait à gauche des écrans de 1 100 à 1 300 px. */
@media (min-width: 1101px) {
  .rw-nav__parent--large { position: static; }
  .rw-nav__parent--large .rw-panneau::before { top: -34px; height: 34px; }
}
.rw-mega {
  top: calc(100% + 10px);
  width: min(960px, calc(100vw - 2 * var(--marge))); margin-left: 0;
  left: 50%; transform: translateX(-50%) translateY(-8px) scale(0.98);
  display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: var(--e-2);
}
.rw-nav__parent:hover .rw-mega,
.rw-nav__parent:focus-within .rw-mega { transform: translateX(-50%) translateY(0) scale(1); }
.rw-mega__films { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; }
.rw-mega__film {
  display: flex; align-items: flex-start; gap: 0.85rem;
  padding: 0.6rem; border-radius: var(--r-m); text-decoration: none; color: var(--t1);
  transition: background 0.25s var(--douce);
}
.rw-mega__film:hover, .rw-mega__film:focus-visible { background: rgb(var(--encre-rgb) / 0.06); }
.rw-mega__vue { flex: none; width: 7rem; position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-s); overflow: hidden; background: #0b0f11; border: 1px solid var(--trait); }
.rw-mega__vue video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Le titre et sa description, empilés et calés en haut sur la vignette */
.rw-mega__txt { display: grid; gap: 0.2rem; min-width: 0; padding-top: 0.05rem; }
.rw-mega__txt b { display: block; font-size: var(--t-petit); font-weight: 600; line-height: 1.25; }
.rw-mega__txt span { display: block; font-size: var(--t-mini); line-height: 1.4; color: var(--t2); }
/* La colonne de droite : ses titres commencent là où commence le texte de
   ses liens (rembourrage + point + écart), pas au bord du point. */
.rw-mega__cote { display: grid; align-content: start; gap: 0.1rem; padding-left: var(--e-2); padding-top: 0.6rem; border-left: 1px solid var(--trait); }
.rw-mega__cote .rw-panneau__t { padding-left: calc(0.7rem + 8px + 0.7rem); margin-bottom: 0; }
.rw-mega__cote .rw-panneau__t:not(:first-child) { margin-top: 0.75rem; }

@media (max-width: 1100px) {
  /* Dans le menu replié : une liste, sans vignettes ni colonnes */
  .rw-mega { width: auto; left: auto; transform: none !important; display: block; }
  .rw-mega__films { display: block; }
  .rw-mega__film { gap: 0.7rem; padding: 0.45rem 0.5rem; }
  .rw-mega__film::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 0.45rem; background: var(--vert); box-shadow: 0 0 10px var(--vert); }
  .rw-mega__vue, .rw-mega__txt span { display: none; }
  .rw-mega__cote { display: block; padding-left: 0; padding-top: 0; border-left: 0; }
}

/* ─── 4. La salle de projection ─────────────────────────────────────────── */

/* La bande de la salle : plus sombre que la nuit, comme une salle de cinéma.
   Elle se distingue ainsi de ses voisines sans être une bande « en relief ». */
/* `overflow: clip` et non `hidden` : les bandes du site sont en `hidden`, ce
   qui en fait un conteneur de défilement — et un élément collant ne colle
   plus qu'à lui. La toile du mode cinéma restait alors en haut de la section
   au lieu de suivre le défilement. `clip` rogne pareil, sans cet effet. */
.rw-band--salle { background: #0A0E10; overflow: clip; }
.rw-band--salle::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(90deg, transparent, var(--trait-fort) 20%, var(--trait-fort) 80%, transparent) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, var(--trait) 20%, var(--trait) 80%, transparent) bottom / 100% 1px no-repeat,
    linear-gradient(180deg, var(--nuit), transparent 180px, transparent calc(100% - 180px), var(--nuit));
}
.rw-band--salle > * { position: relative; z-index: 2; }
.rw-band--salle .rw-tete h2 em { font-style: normal; color: var(--vert); }

.rw-salle { display: grid; gap: var(--e-3); }
.rw-salle__choix {
  display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none;
  padding: 0.4rem; margin: -0.4rem; scroll-padding-inline: 1rem;
}
.rw-salle__choix::-webkit-scrollbar { display: none; }
.rw-salle__onglet {
  flex: none; display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.75rem 1.2rem; border-radius: var(--r-pilule);
  border: 1px solid var(--trait-fort); background: var(--s1); color: var(--t2);
  font: 600 var(--t-petit)/1.2 var(--texte); cursor: pointer; white-space: nowrap;
  transition: background 0.3s var(--douce), color 0.3s var(--douce), border-color 0.3s var(--douce), box-shadow 0.4s var(--sortie);
}
.rw-salle__onglet:hover { color: var(--t1); border-color: rgb(var(--vert-rgb) / 0.45); }
.rw-salle__onglet[aria-selected="true"] {
  background: var(--vert-fond); color: var(--sur-accent); border-color: var(--vert-fond);
  box-shadow: 0 0 0 5px var(--vert-halo);
}
.rw-salle__onglet[aria-selected="true"]:hover { color: var(--sur-accent); }
.rw-salle__onglet svg { flex: none; }

.rw-salle__scenes { position: relative; }
.rw-proj { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
@media (min-width: 1000px) { .rw-proj { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
.rw-proj.vient .rw-proj__fiche > *, .rw-proj.vient .rw-toile { animation: rw-vient 0.6s var(--sortie) both; }
.rw-proj.vient .rw-proj__fiche > :nth-child(2) { animation-delay: 0.04s; }
.rw-proj.vient .rw-proj__fiche > :nth-child(3) { animation-delay: 0.08s; }
.rw-proj.vient .rw-proj__fiche > :nth-child(4) { animation-delay: 0.12s; }
@keyframes rw-vient { from { opacity: 0.001; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* La toile : l'écran du film, posé dans le noir avec une lumière derrière */
.rw-toile {
  position: relative; border-radius: var(--r-xl); overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px var(--trait-fort), 0 40px 90px -36px rgb(0 0 0 / 0.95), 0 0 140px -50px rgb(var(--vert-rgb) / 0.45);
}
.rw-toile video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0b0f11; }
.rw-toile.est-vertical { max-width: min(100%, 24rem); margin-inline: auto; }
.rw-toile.est-vertical video { aspect-ratio: 9 / 16; max-height: 78svh; }
/* Les commandes de la toile vivent SOUS l'image, jamais dessus : posées sur
   le film, elles cachaient ses titres et ses sous-titres (Pierre, 31/10). */
.rw-toile__bas {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.6rem 0.7rem; background: #0b0f11; border-top: 1px solid var(--trait);
}
.rw-toile__bas .rw-btn { padding: 0.5rem 0.95rem; font-size: var(--t-mini); box-shadow: none; }
.rw-toile__duree { color: var(--t2); font-size: var(--t-mini); font-variant-numeric: tabular-nums; }
.rw-toile video::cue { background: rgb(0 0 0 / 0.78); color: #fff; font-family: var(--texte); font-size: clamp(0.8rem, 1.4vw, 1.02rem); line-height: 1.35; }
/* Le nom du film, posé dans le coin : sur le mur, on sait d'un coup d'œil
   quel film joue. À DROITE : les films posent leur propre titre en haut à
   gauche, l'étiquette le recouvrait. */
.rw-toile__nom {
  position: absolute; right: 0.7rem; top: 0.7rem; z-index: 2;
  padding: 0.28rem 0.65rem; border-radius: var(--r-pilule);
  background: rgb(11 15 17 / 0.82); color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.rw-toile__nom::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teinte-film, var(--vert)); }
.rw-proj[data-film="surmesure"] { --teinte-film: var(--ruban); }
.rw-proj[data-film="gestion"]   { --teinte-film: #5DB3E8; }
.rw-proj[data-film="agents"]    { --teinte-film: #B9A2F5; }
.rw-proj[data-film="socle"]     { --teinte-film: var(--vert); }
/* Sur le mur, un filet de la teinte du film en haut de chaque toile */
.rw-salle[data-parti="mur"] .rw-toile { border-top: 3px solid var(--teinte-film, var(--vert)); }

.rw-proj__fiche { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.rw-proj__pour { font-size: var(--t-mini); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vert); }
.rw-proj__fiche h3 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); letter-spacing: -0.035em; line-height: 1.04; }
.rw-proj__fiche h3 em { font-style: normal; color: var(--vert); }
.rw-proj__fiche > p { color: var(--t2); max-width: 46ch; }
.rw-proj__promesses { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.rw-proj__promesses li { display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.4rem 0; font-size: var(--t-petit); color: var(--t1); }
.rw-proj__promesses svg { flex: none; margin-top: 0.3em; color: var(--vert); }
.rw-proj__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--e-1); }

/* Les chapitres : des pastilles, chacune ouvre le film à son instant */
.rw-chapitres { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rw-chapitres:empty { display: none; }
.rw-chapitre {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.32rem 0.7rem; border-radius: var(--r-pilule);
  background: var(--s1); border: 1px solid var(--trait); color: var(--t2);
  font: 500 var(--t-mini)/1.2 var(--texte); cursor: pointer;
  transition: border-color 0.25s var(--douce), color 0.25s var(--douce), background 0.25s var(--douce);
}
.rw-chapitre:hover { border-color: rgb(var(--vert-rgb) / 0.5); color: var(--t1); }
.rw-chapitre__h { color: var(--t3); font-variant-numeric: tabular-nums; font-size: 0.78rem; }
.rw-sans-films [data-film-ouvre], .rw-sans-films .rw-chapitres { display: none !important; }

/* ─── 5. Les trois partis pris ──────────────────────────────────────────── */

/* Mur : quatre toiles vivantes, la fiche réduite à l'essentiel */
.rw-salle[data-parti="mur"] .rw-salle__scenes { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 900px) { .rw-salle[data-parti="mur"] .rw-salle__scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rw-salle[data-parti="mur"] .rw-proj { grid-template-columns: 1fr; gap: var(--e-2); align-items: start; }
.rw-salle[data-parti="mur"] .rw-proj__fiche > p,
.rw-salle[data-parti="mur"] .rw-proj__promesses,
.rw-salle[data-parti="mur"] .rw-chapitres { display: none; }
.rw-salle[data-parti="mur"] .rw-proj__fiche h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.rw-salle[data-parti="mur"] .rw-toile { box-shadow: 0 0 0 1px var(--trait-fort), 0 30px 60px -30px rgb(0 0 0 / 0.9); }

/* Cinéma : une toile collée à gauche, les métiers défilent à droite */
.rw-salle__ecran { display: none; }
@media (min-width: 901px) {
  .rw-salle[data-parti="cinema"] .rw-salle__scenes {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0 clamp(2rem, 4vw, 4rem); align-items: start;
  }
  .rw-salle[data-parti="cinema"] .rw-salle__ecran:not([hidden]) {
    display: block; grid-column: 1; grid-row: 1 / span 4;
    position: sticky; top: calc(50svh - 15vw); align-self: start;
    border-radius: var(--r-xl); overflow: hidden; background: #000;
    box-shadow: 0 0 0 1px var(--trait-fort), 0 40px 90px -36px rgb(0 0 0 / 0.95), 0 0 160px -50px rgb(var(--vert-rgb) / 0.5);
  }
  .rw-salle__ecran video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
  .rw-salle__ecran video::cue { background: rgb(0 0 0 / 0.72); color: #fff; font-size: 1rem; }
  .rw-salle__ecran .rw-toile__bas { display: flex; }
  .rw-salle[data-parti="cinema"] .rw-proj { grid-column: 2; grid-template-columns: 1fr; min-height: 72svh; align-content: center; opacity: 0.6; transition: opacity 0.5s var(--douce); }
  .rw-salle[data-parti="cinema"] .rw-proj.est-actif { opacity: 1; }
  .rw-salle[data-parti="cinema"] .rw-proj .rw-toile { display: none; }
}
@media (max-width: 900px) {
  .rw-salle[data-parti="cinema"] .rw-salle__scenes { display: grid; gap: var(--e-5); }
}

/* Le commutateur d'essai (local seulement, voir reglages-site.js) */
.rw-essai-salle {
  position: fixed; z-index: calc(var(--z-collant) + 5);
  left: calc(12px + env(safe-area-inset-left, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 0.25rem; padding: 0.3rem;
  border-radius: var(--r-pilule); background: rgb(var(--panneau-rgb) / 0.94); border: 1px solid var(--trait-fort);
  box-shadow: var(--ombre-3); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.rw-essai-salle span { padding: 0 0.5rem 0 0.6rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t3); }
.rw-essai-salle button { border: 0; border-radius: var(--r-pilule); padding: 0.45rem 0.8rem; background: transparent; color: var(--t2); font: 600 0.82rem var(--texte); cursor: pointer; }
.rw-essai-salle button:hover { color: var(--t1); background: rgb(var(--encre-rgb) / 0.06); }
.rw-essai-salle button[aria-pressed="true"] { background: var(--vert-fond); color: var(--sur-accent); }

/* ─── 6. Le lecteur ─────────────────────────────────────────────────────── */

.rw-lecteur { position: fixed; inset: 0; z-index: var(--z-modale); display: grid; place-items: center; padding: clamp(0.75rem, 3vw, 2.5rem); }
.rw-lecteur[hidden] { display: none; }
.rw-lecteur__fond { position: absolute; inset: 0; background: rgb(6 9 11 / 0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: rw-fondu 0.3s var(--douce); }
@keyframes rw-fondu { from { opacity: 0; } }
.rw-lecteur__boite {
  position: relative; width: min(1320px, 100%); max-height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-xl); border: 1px solid var(--trait-fort);
  background: var(--nuit); box-shadow: 0 50px 120px -40px rgb(0 0 0 / 0.95);
  animation: rw-vient 0.45s var(--sortie);
}
.rw-lecteur__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); padding: 0.75rem 0.75rem 0.75rem 1.25rem; border-bottom: 1px solid var(--trait); flex: none; }
.rw-lecteur__titre { font-weight: 700; letter-spacing: -0.02em; font-size: var(--t-petit); min-width: 0; overflow-wrap: anywhere; }
.rw-lecteur__st {
  flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px;
  padding: 0.5rem 0.9rem; border-radius: var(--r-pilule); border: 1px solid var(--trait-fort);
  background: transparent; color: var(--t2); font: 600 var(--t-mini) var(--texte); cursor: pointer;
}
.rw-lecteur__st:hover { color: var(--t1); background: rgb(var(--encre-rgb) / 0.05); }
.rw-lecteur__st[aria-pressed="true"] { color: var(--t1); border-color: rgb(var(--vert-rgb) / 0.5); }
.rw-lecteur__st[aria-pressed="true"] svg { color: var(--vert); }
.rw-lecteur__st[hidden] { display: none; }
@media (max-width: 560px) { .rw-lecteur__st-txt, .rw-lecteur__ferme-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
.rw-lecteur__ferme {
  flex: none; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px;
  padding: 0.5rem 0.9rem; border-radius: var(--r-pilule); border: 1px solid var(--trait-fort);
  background: var(--s1); color: var(--t1); font: 600 var(--t-mini) var(--texte); cursor: pointer;
}
.rw-lecteur__ferme:hover { background: var(--s2); }
.rw-lecteur__corps { display: grid; min-height: 0; overflow: auto; overscroll-behavior: contain; }
@media (min-width: 1000px) { .rw-lecteur__corps { grid-template-columns: minmax(0, 1fr) 17rem; overflow: hidden; } }
.rw-lecteur__ecran { background: #000; display: grid; place-items: center; min-height: 0; }
.rw-lecteur__ecran video { display: block; width: 100%; max-height: calc(100svh - 9rem); aspect-ratio: 16 / 9; background: #000; }
.rw-lecteur__ecran video::cue { background: rgb(0 0 0 / 0.75); color: #fff; font-family: var(--texte); }
.rw-lecteur__cote { padding: var(--e-2); border-left: 1px solid var(--trait); overflow-y: auto; min-height: 0; }
@media (max-width: 999px) { .rw-lecteur__cote { border-left: 0; border-top: 1px solid var(--trait); } }
.rw-lecteur__chap-t { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3); margin-bottom: 0.5rem; }
.rw-lecteur__chapitres { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
@media (min-width: 600px) and (max-width: 999px) { .rw-lecteur__chapitres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rw-lecteur__chapitres button {
  width: 100%; display: flex; align-items: baseline; gap: 0.6rem; text-align: left;
  padding: 0.5rem 0.6rem; border: 0; border-radius: var(--r-s); background: transparent;
  color: var(--t2); font: 500 var(--t-mini)/1.35 var(--texte); cursor: pointer;
}
.rw-lecteur__chapitres button:hover { background: rgb(var(--encre-rgb) / 0.05); color: var(--t1); }
.rw-lecteur__chapitres button.est-actif { background: var(--vert-halo); color: var(--t1); }
.rw-lecteur__chapitres button.est-actif .rw-chapitre__h { color: var(--vert); }
html.rw-lecteur-ouvert { overflow: hidden; }
html.rw-lecteur-ouvert .rw-head { visibility: hidden; }
/* Au téléphone, le lecteur prend tout l'écran ; l'en-tête reste collé */
@media (max-width: 700px) {
  .rw-lecteur { padding: 0; place-items: stretch; }
  .rw-lecteur__boite { border-radius: 0; border: 0; height: 100%; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .rw-lecteur__tete { position: sticky; top: 0; background: var(--nuit); z-index: 1; padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(0.75rem, env(safe-area-inset-right, 0px)); }
}

/* ─── 7. Le fil rouge ───────────────────────────────────────────────────── */

.rw-fil-rouge {
  position: sticky; top: var(--haut-tete); z-index: calc(var(--z-collant) - 1);
  margin-block: 0; padding-block: 0.6rem;
  transition: top 0.5s var(--sortie);
}
body:has(.rw-head.est-cache) .rw-fil-rouge { top: 0.6rem; }
.rw-fil-rouge__in {
  border-radius: var(--r-l); border: 1px solid var(--trait);
  background: rgb(var(--panneau-rgb) / 0.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--ombre-2), inset 0 1px 0 var(--lumiere);
  padding: 0.4rem; overflow: hidden;
}
.rw-fil-rouge ol {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 0.3rem;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
}
.rw-fil-rouge ol::-webkit-scrollbar { display: none; }
.rw-fil-rouge li { flex: 1 0 auto; scroll-snap-align: center; }
.rw-fil-rouge a {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem; white-space: nowrap;
  padding: 0.55rem 0.85rem; border-radius: var(--r-m);
  color: var(--t2); text-decoration: none; font-size: var(--t-mini); font-weight: 600;
  transition: background 0.3s var(--douce), color 0.3s var(--douce);
}
.rw-fil-rouge a:hover { color: var(--t1); background: rgb(var(--encre-rgb) / 0.05); }
.rw-fil-rouge .n {
  display: inline-grid; place-items: center; flex: none; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  border: 1.5px solid var(--trait-fort); font-size: 0.7rem; font-variant-numeric: tabular-nums;
  transition: background 0.3s var(--douce), border-color 0.3s var(--douce), color 0.3s var(--douce);
}
.rw-fil-rouge a.est-fait { color: var(--t1); }
.rw-fil-rouge a.est-fait .n { background: rgb(var(--vert-rgb) / 0.18); border-color: rgb(var(--vert-rgb) / 0.55); color: var(--vert); }
.rw-fil-rouge a.est-actif { background: var(--vert-fond); color: var(--sur-accent); }
.rw-fil-rouge a.est-actif .n { border-color: var(--sur-accent); color: var(--sur-accent); }
.rw-fil-rouge__avance { height: 2px; margin: 0.35rem 0.4rem 0; border-radius: 2px; background: var(--trait); overflow: hidden; }
.rw-fil-rouge__avance i { display: block; height: 100%; width: 100%; background: var(--vert); transform-origin: left; transform: scaleX(var(--avance, 0)); transition: transform 0.6s var(--sortie); }

/* Le ruban de Sur Mesure : le mètre jaune du film, gradué */
.rw-fil-rouge--ruban .rw-fil-rouge__in { background: var(--ruban); border-color: rgb(0 0 0 / 0.25); padding: 0; box-shadow: 0 12px 30px -12px rgb(240 185 11 / 0.45), var(--ombre-2); }
.rw-fil-rouge--ruban ol { gap: 0; }
.rw-fil-rouge--ruban li + li a { border-left: 1px solid rgb(0 0 0 / 0.2); }
.rw-fil-rouge--ruban a {
  position: relative; border-radius: 0; color: var(--ruban-encre); padding: 1.15rem 0.95rem 0.55rem;
}
.rw-fil-rouge--ruban a::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.75rem;
  background: repeating-linear-gradient(90deg, rgb(0 0 0 / 0.55) 0 1px, transparent 1px 8px);
  -webkit-mask: linear-gradient(#000 0 60%, transparent 60%); mask: linear-gradient(#000 0 60%, transparent 60%);
}
.rw-fil-rouge--ruban a:hover { background: rgb(0 0 0 / 0.07); color: var(--ruban-encre); }
.rw-fil-rouge--ruban .n { border-color: rgb(0 0 0 / 0.45); color: var(--ruban-encre); }
.rw-fil-rouge--ruban a.est-fait { color: var(--ruban-encre); }
.rw-fil-rouge--ruban a.est-fait .n { background: var(--ruban-encre); border-color: var(--ruban-encre); color: var(--ruban); }
.rw-fil-rouge--ruban a.est-actif { background: var(--ruban-encre); color: var(--ruban); }
.rw-fil-rouge--ruban a.est-actif .n { border-color: var(--ruban); color: var(--ruban); }
.rw-fil-rouge--ruban .rw-fil-rouge__avance { display: none; }

/* Le fil de la commande : les états du film (fait, en attente) */
.rw-fil-rouge--fil a .n { width: 0.7rem; height: 0.7rem; font-size: 0; border-width: 2px; }
.rw-fil-rouge--fil a.est-fait .n { background: var(--vert); border-color: var(--vert); }
.rw-fil-rouge--fil a[data-attend].est-fait .n { background: #F5B967; border-color: #F5B967; }

/* ─── 8. Les étapes des pages de solution ───────────────────────────────── */

.rw-etape { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem); }
.rw-etape + .rw-etape { border-top: 1px solid var(--trait); }
@media (min-width: 960px) {
  .rw-etape { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .rw-etape:nth-of-type(even) .rw-etape__vue { order: -1; }
}
.rw-etape__txt { display: grid; gap: var(--e-2); align-content: start; min-width: 0; }
.rw-etape__n { display: flex; align-items: center; gap: 0.7rem; font-size: var(--t-mini); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vert); }
.rw-etape__n b { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--vert-halo); border: 1px solid rgb(var(--vert-rgb) / 0.4); font-size: 0.85rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.rw-etape h2, .rw-etape h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.035em; line-height: 1.06; max-width: 22ch; }
.rw-etape__txt > p { color: var(--t2); max-width: 52ch; }
.rw-etape__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.rw-etape__points li { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.42rem 0; font-size: var(--t-petit); color: var(--t1); border-top: 1px solid var(--trait); }
.rw-etape__points li:first-child { border-top: 0; }
.rw-etape__points svg { flex: none; margin-top: 0.3em; color: var(--vert); }
.rw-etape__vue { margin: 0; position: relative; min-width: 0; }
.rw-etape__vue img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--s1);
  border-radius: var(--r-xl); border: 1px solid var(--trait);
  box-shadow: var(--ombre-3), 0 0 120px -50px rgb(var(--vert-rgb) / 0.3);
}
.rw-etape__vue .rw-chapitre { position: absolute; left: 0.9rem; bottom: 0.9rem; background: rgb(var(--nuit-rgb) / 0.85); color: var(--t1); border-color: var(--trait-fort); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 0.45rem 0.85rem; }
.rw-etape__vue .rw-chapitre svg { color: var(--vert); }
.rw-etape__vue figcaption { margin-top: 0.6rem; font-size: var(--t-mini); color: var(--t3); }

/* Le film entier, en ouverture de page */
.rw-film-entier { display: grid; gap: var(--e-3); align-items: center; }
@media (min-width: 1000px) { .rw-film-entier { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.rw-affiche {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--r-xl); overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px var(--trait-fort), 0 40px 90px -36px rgb(0 0 0 / 0.95), 0 0 140px -50px rgb(var(--vert-rgb) / 0.4);
}
.rw-affiche img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.8s var(--sortie), filter 0.5s var(--douce); filter: brightness(0.82); }
.rw-affiche:hover img { transform: scale(1.02); filter: brightness(0.92); }
.rw-affiche__jouer {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.95rem 1.4rem; border-radius: var(--r-pilule);
  background: var(--vert-fond); color: var(--sur-accent); font-weight: 700; font-size: var(--t-petit);
  box-shadow: 0 0 0 10px rgb(var(--vert-rgb) / 0.18), 0 20px 40px -12px rgb(0 0 0 / 0.6);
  transition: box-shadow 0.4s var(--sortie);
}
.rw-affiche:hover .rw-affiche__jouer { box-shadow: 0 0 0 16px rgb(var(--vert-rgb) / 0.14), 0 20px 40px -12px rgb(0 0 0 / 0.6); }
.rw-affiche__duree { position: absolute; right: 0.9rem; bottom: 0.9rem; color: #fff; font-size: var(--t-mini); background: rgb(0 0 0 / 0.6); padding: 0.3rem 0.7rem; border-radius: var(--r-pilule); font-variant-numeric: tabular-nums; }

/* Le haut de page d'une solution : la boucle du film à droite */
.rw-hero-page__film { margin: 0; }
.rw-hero-page__film .rw-toile { border-radius: var(--r-xl); }
@media (max-width: 999px) { .rw-hero-page__film { order: -1; } }

/* ─── 9. Le socle, la confiance, la méthode ─────────────────────────────── */

.rw-socle-vue { display: grid; gap: var(--e-4); align-items: center; }
@media (min-width: 1000px) { .rw-socle-vue { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.rw-socle-schema { display: grid; gap: 10px; }
.rw-socle-rangee { display: grid; gap: 10px; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
@media (max-width: 620px) { .rw-socle-rangee { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rw-bloc {
  padding: 0.95rem 0.8rem; border-radius: var(--r-m); text-align: center; min-width: 0;
  background: linear-gradient(180deg, var(--s3), var(--s2)); border: 1px solid var(--trait-fort);
  font-weight: 700; font-size: var(--t-mini); color: var(--t1);
  box-shadow: var(--ombre-1), inset 0 1px 0 var(--lumiere);
}
.rw-bloc small { display: block; margin-top: 0.15rem; font-weight: 500; font-size: 0.75rem; color: var(--t3); }
.rw-bloc--metier { background: var(--s1); border-style: dashed; }
.rw-bloc--porte { background: rgb(var(--vert-rgb) / 0.12); border-color: var(--vert); color: var(--vert); }
.rw-bloc--porte small { color: var(--t2); }
a.rw-bloc { text-decoration: none; transition: transform 0.4s var(--sortie), border-color 0.3s var(--douce); }
a.rw-bloc:hover { transform: translateY(-3px); border-color: var(--vert); }
.rw-socle-dalle { border-radius: var(--r-l); }

.rw-vecu { display: grid; gap: 0; }
.rw-vecu div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--e-2); align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--trait); }
.rw-vecu div:first-child { border-top: 1px solid var(--trait); }
.rw-vecu dt { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--vert); font-variant-numeric: tabular-nums; }
.rw-vecu dd { margin: 0; color: var(--t2); }
.rw-vecu dd b { display: block; color: var(--t1); font-size: var(--t-grand); letter-spacing: -0.02em; margin-bottom: 0.15rem; }

.rw-garanties { display: grid; gap: 14px; }
@media (min-width: 760px)  { .rw-garanties { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .rw-garanties { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rw-garantie { padding: 1.3rem 1.35rem; border-radius: var(--r-l); background: linear-gradient(180deg, var(--s2), var(--s1)); border: 1px solid var(--trait); box-shadow: var(--ombre-1), inset 0 1px 0 var(--lumiere); display: grid; gap: 0.5rem; align-content: start; }
.rw-garantie svg { color: var(--vert); }
.rw-garantie b { font-size: var(--t-grand); letter-spacing: -0.02em; }
.rw-garantie p { color: var(--t2); font-size: var(--t-petit); }

.rw-principes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .rw-principes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .rw-principes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rw-principes li { padding: 1.2rem 1.25rem; border-radius: var(--r-l); border: 1px solid rgb(var(--vert-rgb) / 0.28); background: rgb(var(--vert-rgb) / 0.05); display: grid; gap: 0.35rem; }
.rw-principes b { font-size: var(--t-grand); letter-spacing: -0.02em; }
.rw-principes span { color: var(--t2); font-size: var(--t-petit); }

/* La citation qui résume (les autres font le document…) */
.rw-exergue-grand { font-size: clamp(1.6rem, 3.6vw, 2.8rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; max-width: 26ch; }
.rw-exergue-grand em { font-style: normal; color: var(--vert); }

/* ─── 10. Les outils ────────────────────────────────────────────────────── */

/* Les curseurs, à la charte : piste sombre, poignée verte */
.rw-curseur { -webkit-appearance: none; appearance: none; width: 100%; height: 2.75rem; background: transparent; cursor: pointer; }
.rw-curseur::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: var(--s3); }
.rw-curseur::-moz-range-track { height: 6px; border-radius: 6px; background: var(--s3); }
.rw-curseur::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--vert); }
.rw-curseur::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--vert); border: 3px solid var(--nuit); box-shadow: 0 0 0 1px var(--vert), 0 4px 12px -2px rgb(var(--vert-rgb) / 0.6); }
.rw-curseur::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--vert); border: 3px solid var(--nuit); box-shadow: 0 0 0 1px var(--vert); }
.rw-curseur:focus-visible { outline: none; }
.rw-curseur:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--vert-halo), 0 0 0 1px var(--vert); }
.rw-curseur:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--vert-halo), 0 0 0 1px var(--vert); }

.rw-calc { display: grid; gap: var(--e-3); padding: clamp(1.3rem, 3vw, 2.2rem); }
@media (min-width: 900px) { .rw-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.rw-calc__champs { display: grid; gap: var(--e-2); }
.rw-calc label { display: flex; justify-content: space-between; gap: var(--e-2); font-size: var(--t-petit); color: var(--t2); }
.rw-calc output { color: var(--t1); font-weight: 700; font-variant-numeric: tabular-nums; }
.rw-calc__res { display: grid; gap: 0.6rem; padding: var(--e-3); border-radius: var(--r-l); background: var(--nuit); border: 1px solid var(--trait); }
.rw-calc__res p { color: var(--t2); }
.rw-calc__chiffre { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.rw-calc__chiffre b { font-size: clamp(2.2rem, 4.5vw, 3.2rem); font-weight: 800; letter-spacing: -0.05em; color: var(--vert); font-variant-numeric: tabular-nums; line-height: 1; }
.rw-calc__chiffre span { color: var(--t2); }
.rw-calc__note { font-size: var(--t-mini); color: var(--t3); }

.rw-check { display: grid; gap: var(--e-3); padding: clamp(1.3rem, 3vw, 2.2rem); }
.rw-check__liste { display: grid; gap: 0; }
.rw-check__l { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-2); align-items: center; padding: 0.8rem 0; border-top: 1px solid var(--trait); }
.rw-check__l:first-child { border-top: 0; }
.rw-check__t { font-size: var(--t-petit); color: var(--t1); }
.rw-check__boutons { display: inline-flex; border: 1px solid var(--trait-fort); border-radius: var(--r-pilule); padding: 3px; gap: 2px; }
.rw-check__boutons button { min-height: 2.5rem; padding: 0.4rem 0.85rem; border: 0; border-radius: var(--r-pilule); background: transparent; color: var(--t2); font: 600 var(--t-mini) var(--texte); cursor: pointer; white-space: nowrap; }
.rw-check__boutons button:hover { color: var(--t1); background: rgb(var(--encre-rgb) / 0.05); }
.rw-check__boutons button[data-r="oui"][aria-pressed="true"] { background: var(--s3); color: var(--t1); }
.rw-check__boutons button[data-r="non"][aria-pressed="true"] { background: rgb(255 138 128 / 0.16); color: var(--alerte); }
@media (max-width: 560px) { .rw-check__l { grid-template-columns: 1fr; gap: 0.5rem; } .rw-check__boutons { justify-self: start; } }
.rw-check__pied { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); flex-wrap: wrap; padding-top: var(--e-2); border-top: 1px solid var(--trait-fort); }
.rw-check__res { font-weight: 600; color: var(--t1); }

.rw-equipe { display: grid; gap: var(--e-3); }
.rw-equipe__grille { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.rw-agent {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 0.15rem 0.85rem; align-items: center; text-align: left;
  padding: 0.9rem 1rem; border-radius: var(--r-l); cursor: pointer;
  background: var(--s1); border: 1px solid var(--trait); color: var(--t1); font: inherit;
  transition: border-color 0.3s var(--douce), background 0.3s var(--douce), transform 0.4s var(--sortie);
}
.rw-agent:hover { border-color: var(--trait-fort); transform: translateY(-2px); }
.rw-agent__visage {
  grid-row: span 2; width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 1rem; letter-spacing: -0.02em;
  background: hsl(var(--teinte, 200) 40% 26%); color: hsl(var(--teinte, 200) 70% 86%);
  border: 2px solid hsl(var(--teinte, 200) 45% 40%);
}
.rw-agent__nom { font-weight: 700; font-size: var(--t-petit); align-self: end; }
.rw-agent__tache { font-size: var(--t-mini); color: var(--t2); align-self: start; line-height: 1.4; }
.rw-agent__coche { grid-row: span 2; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1.5px solid var(--trait-fort); display: grid; place-items: center; color: transparent; transition: all 0.3s var(--douce); }
.rw-agent[aria-pressed="true"] { border-color: var(--vert); background: rgb(var(--vert-rgb) / 0.08); }
.rw-agent[aria-pressed="true"] .rw-agent__coche { background: var(--vert-fond); border-color: var(--vert-fond); color: var(--sur-accent); }
.rw-equipe__pied { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); flex-wrap: wrap; }
.rw-equipe__res { color: var(--t2); }

/* L'escalier de la confiance (agents) */
.rw-escalier { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 860px) { .rw-escalier { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; } }
.rw-escalier li { padding: 1.3rem 1.35rem; border-radius: var(--r-l); background: linear-gradient(180deg, var(--s2), var(--s1)); border: 1px solid var(--trait); display: grid; gap: 0.4rem; }
@media (min-width: 860px) {
  .rw-escalier li:nth-child(1) { min-height: 11rem; }
  .rw-escalier li:nth-child(2) { min-height: 14rem; }
  .rw-escalier li:nth-child(3) { min-height: 17rem; border-color: rgb(var(--vert-rgb) / 0.45); background: linear-gradient(180deg, rgb(var(--vert-rgb) / 0.12), var(--s1)); }
}
.rw-escalier small { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vert); }
.rw-escalier b { font-size: 1.35rem; letter-spacing: -0.03em; }
.rw-escalier p { color: var(--t2); font-size: var(--t-petit); }

/* Les six ronds de Peppol */
.rw-trajet { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: trajet; }
@media (min-width: 700px)  { .rw-trajet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .rw-trajet { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rw-trajet li { counter-increment: trajet; position: relative; padding: 1.25rem 1.3rem 1.25rem 4.2rem; border-radius: var(--r-l); background: var(--s1); border: 1px solid var(--trait); display: grid; gap: 0.3rem; }
.rw-trajet li::before {
  content: counter(trajet); position: absolute; left: 1.2rem; top: 1.15rem;
  width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--vert-halo); border: 1px solid rgb(var(--vert-rgb) / 0.45); color: var(--vert); font-weight: 800; font-variant-numeric: tabular-nums;
}
.rw-trajet b { font-size: var(--t-grand); letter-spacing: -0.02em; }
.rw-trajet span { color: var(--t2); font-size: var(--t-petit); }

/* La date de l'obligation */
.rw-date-cle { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-3); align-items: center; padding: clamp(1.3rem, 3vw, 2rem); }
.rw-date-cle__j { text-align: center; padding: 0.9rem 1.2rem; border-radius: var(--r-l); background: var(--vert-fond); color: var(--sur-accent); line-height: 1; }
.rw-date-cle__j b { display: block; font-size: 3rem; font-weight: 800; letter-spacing: -0.05em; }
.rw-date-cle__j span { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.rw-date-cle p { color: var(--t2); }
.rw-date-cle p b { color: var(--t1); }
@media (max-width: 560px) { .rw-date-cle { grid-template-columns: 1fr; } .rw-date-cle__j { justify-self: start; } }

/* Le pied : une colonne « Solutions » de plus */
@media (min-width: 900px) { .rw-pied__haut:has(> :nth-child(5)) { grid-template-columns: 1.35fr 0.9fr 1fr 0.8fr 1.15fr; } }
@media (min-width: 560px) and (max-width: 899px) { .rw-pied__haut:has(> :nth-child(5)) { grid-template-columns: 1fr 1fr; } }

/* Le formulaire : quatre onglets */
@media (min-width: 720px) { .form-tabs:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .rw-proj.vient .rw-proj__fiche > *, .rw-proj.vient .rw-toile, .rw-lecteur__boite, .rw-lecteur__fond { animation: none; }
  .rw-fil-rouge, .rw-fil-rouge__avance i { transition: none; }
}

/* Le repère est une pilule : dans une colonne flex, il s'étirait sur toute
   la largeur. */
.rw-proj__fiche > .rw-repere { align-self: flex-start; }
.rw-etape { scroll-margin-top: 10rem; }


/* `hidden` doit gagner sur les `display` posés plus haut : sans ces règles,
   les quatre films restaient affichés en mode onglets. */
.rw-proj[hidden], .rw-salle__choix[hidden], .rw-salle__ecran[hidden] { display: none !important; }

/* Pendant un film, rien par-dessus : ni la bulle de l'assistant, ni le
   commutateur d'essai, ni le bouton de retour en haut. */
html.rw-lecteur-ouvert #rw-chatbot-toggle,
html.rw-lecteur-ouvert #rw-chatbot-widget,
html.rw-lecteur-ouvert .rw-essai-salle,
html.rw-lecteur-ouvert .rw-haut { visibility: hidden; }

/* `.rw-date-cle p` donnait sa couleur grise au pavé de la date (qui est un
   <p>) : « janvier 2026 » disparaissait dans le vert. */
.rw-date-cle .rw-date-cle__j { color: var(--sur-accent); }

/* Les cartes d'agents : placement explicite, sinon la tâche partait dans la
   troisième colonne et la coche sous le nom. */
.rw-agent__visage { grid-column: 1; grid-row: 1 / span 2; }
.rw-agent__nom { grid-column: 2; grid-row: 1; }
.rw-agent__tache { grid-column: 2; grid-row: 2; }
.rw-agent__coche { grid-column: 3; grid-row: 1 / span 2; }

/* Même famille de défaut : une règle « tout paragraphe de ce bloc » plus
   spécifique que la classe du paragraphe qui doit se distinguer. */
.rw-proj__fiche > .rw-proj__pour { color: var(--vert); }
.rw-etape__txt > .rw-etape__n { color: var(--vert); }
.rw-calc__res > .rw-calc__note { color: var(--t3); }

/* La liste « solution » est seule sur sa ligne : même écart que les rangées
   du formulaire (12 px), quel que soit l'habillage posé autour par rw-site.js. */
#form-solution .contact-form > :not(.form-group):not(textarea):not(button) { margin-bottom: 12px; }

/* ─── 11. Les deux chapitres de l'accueil (31/10) ───────────────────────────
   Sites d'un côté, logiciels métier de l'autre : chaque chapitre s'ouvre sur
   son numéro, son titre et un sommaire de ce qu'il contient. */

.rw-chap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 clamp(1.25rem, 3vw, 2.75rem); align-items: start; margin-bottom: var(--e-5); }
.rw-chap__n {
  font-size: clamp(4rem, 9vw, 7.5rem); font-weight: 800; line-height: 0.8; letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums; color: var(--vert); text-shadow: 0 0 60px rgb(var(--vert-rgb) / 0.3);
}
.rw-chap__txt { display: grid; gap: var(--e-2); justify-items: start; min-width: 0; max-width: 54rem; }
.rw-chap__txt h2 { font-size: var(--t-titre); max-width: 22ch; }
.rw-chap__txt .rw-chapeau { max-width: 60ch; }
.rw-chap__sommaire { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; }
.rw-chap__sommaire a {
  padding: 0.42rem 0.85rem; border-radius: var(--r-pilule); border: 1px solid var(--trait-fort);
  background: var(--s1); color: var(--t1); text-decoration: none; font-size: var(--t-mini); font-weight: 600;
  transition: border-color 0.25s var(--douce), color 0.25s var(--douce);
}
.rw-chap__sommaire a:hover { border-color: var(--vert); color: var(--vert); }
@media (max-width: 620px) {
  .rw-chap { grid-template-columns: 1fr; }
  .rw-chap__n { font-size: 3.4rem; margin-bottom: var(--e-2); }
}
/* Un étage sans numéro : son en-tête tient sur une colonne */
.rw-etage__tete:not(:has(.rw-etage__n)) { grid-template-columns: 1fr; }
.rw-etage__tete:not(:has(.rw-etage__n)) p:not(.rw-etage__quoi) { grid-column: 1; }
/* Le chapitre 2 vit dans la bande sombre de la salle */
.rw-band--salle .rw-chap { margin-bottom: var(--e-5); }
.rw-band--salle .rw-annonce { margin-top: var(--e-1); }

/* ─── Le haut de page : deux portes (31/10) ────────────────────────────────
   Le titre au centre ; dessous, deux fenêtres de même cadre — un navigateur
   pour le site d'un client, une fenêtre d'application pour nos logiciels —
   et sous chacune, la même carte : pictogramme et surtitre, titre, trois
   points, un pied aligné. Deux métiers, le même poids. */
@media (min-width: 1000px) { .rw-hero--portes .rw-hero__in { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vh, 3rem); } }
.rw-hero--portes { min-height: 0; padding-block: clamp(7rem, 12.5vh, 8.5rem) clamp(3rem, 6vh, 4.5rem); }
.rw-hero--portes .rw-entree { text-align: center; display: grid; justify-items: center; }
.rw-hero--portes h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); margin-bottom: var(--e-2); }
.rw-hero--portes .rw-hero__sous { max-width: 58ch; margin-inline: auto; }
.rw-hero--portes .rw-defile { display: none; }

.rw-portes { display: grid; gap: clamp(1rem, 2vw, 1.5rem); max-width: 1180px; width: 100%; margin-inline: auto; }
@media (min-width: 1100px) { .rw-portes { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; } }
/* Le haut de page prend toute la largeur de l'écran (jusqu'à 1 800 px) :
   les trois portes ne restent plus serrées au centre d'un grand écran. */
.rw-hero--portes > .rw-wrap { max-width: 1800px; }
@media (min-width: 700px) and (max-width: 1099px) {
  .rw-portes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* La troisième porte, seule sur sa rangée : couchée, fenêtre à gauche */
  .rw-portes > .rw-porte:nth-child(3) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rw-portes > .rw-porte:nth-child(3) .rw-porte__fenetre { margin-bottom: 0.75rem; align-self: start; }
}
.rw-porte {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: var(--r-xl); border: 1px solid var(--trait);
  background: linear-gradient(180deg, var(--s2), var(--s1));
  box-shadow: var(--ombre-2), inset 0 1px 0 var(--lumiere);
  transition: border-color 0.4s var(--douce), box-shadow 0.5s var(--douce), transform 0.5s var(--sortie);
}
.rw-porte:hover { border-color: rgb(var(--vert-rgb) / 0.35); box-shadow: var(--ombre-3), inset 0 1px 0 var(--lumiere); transform: translateY(-3px); }

/* La fenêtre : une barre (trois points, l'adresse), puis l'image */
.rw-porte__fenetre { margin: 0.75rem 0.75rem 0; border-radius: calc(var(--r-xl) - 6px); overflow: hidden; border: 1px solid var(--trait-fort); background: #0b0f11; }
.rw-porte__chrome { display: flex; align-items: center; gap: 6px; height: 2.1rem; padding: 0 0.8rem; background: #161d22; border-bottom: 1px solid var(--trait); }
.rw-porte__chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--s3); }
.rw-porte__adresse {
  margin-left: 0.6rem; flex: 1; min-width: 0; height: 1.3rem; display: block; line-height: 1.3rem; text-align: center;
  border-radius: var(--r-pilule); background: rgb(var(--encre-rgb) / 0.05); color: var(--t3); font-size: 0.72rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rw-porte__adresse b { color: var(--t1); font-weight: 600; margin-left: 0.25rem; }
.rw-porte__vue { position: relative; aspect-ratio: 16 / 7.6; overflow: hidden; background: #0b0f11; }
.rw-porte__vue--film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Le carrousel, sans son propre cadre : la fenêtre en tient lieu */
.rw-porte__vue .rw-carrousel, .rw-porte__vue .rw-carrousel__cadre, .rw-porte__vue .rw-carrousel__scene { height: 100%; }
.rw-porte .rw-carrousel__cadre { border: 0; box-shadow: none; background: none; padding: 0; border-radius: 0; transform: none !important; }
.rw-porte .rw-carrousel__vue { aspect-ratio: auto; height: 100%; border-radius: 0; }
.rw-porte .rw-carrousel__jalons { position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.55rem; margin: 0; z-index: 2; }
.rw-porte .rw-carrousel__legende { padding: var(--e-2) var(--e-2) 1.5rem; }
/* Dans la fenêtre du haut, basse et large, le grand titre du site montré tombait
   juste derrière la légende (« s'attarde » sous « La Barbotte ») : le voile y
   monte plus haut et devient presque opaque sous le nom du client (01/11/2026). */
.rw-porte .rw-carrousel__voile { height: 78%; background: linear-gradient(180deg, transparent 0%, rgb(6 9 11 / 0.55) 34%, rgb(6 9 11 / 0.9) 62%, rgb(6 9 11 / 0.97) 100%); }
.rw-porte .rw-carrousel__legende .t, .rw-porte .rw-carrousel__legende .d { text-shadow: 0 1px 12px rgb(0 0 0 / 0.6); }
.rw-porte .rw-carrousel__legende .t { font-size: var(--t-grand); }

/* La carte */
.rw-porte__corps { display: flex; flex-direction: column; gap: 0.65rem; flex: 1; padding: clamp(1.15rem, 2vw, 1.5rem) clamp(1.25rem, 2.2vw, 1.75rem); }
.rw-porte__sur { display: flex; align-items: center; gap: 0.6rem; font-size: var(--t-mini); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vert); }
.rw-porte__ico { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: var(--r-m); background: var(--vert-halo); border: 1px solid rgb(var(--vert-rgb) / 0.35); color: var(--vert); }
.rw-porte__t { font-size: clamp(1.35rem, 2.1vw, 1.65rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; color: var(--t1); }
.rw-porte .rw-proj__promesses li { padding: 0.22rem 0; font-size: var(--t-petit); color: var(--t2); }
.rw-porte__pied { margin-top: auto; padding-top: 0.85rem; border-top: 1px solid var(--trait); display: flex; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; flex-wrap: wrap; }
.rw-porte__meta { font-size: var(--t-mini); color: var(--t3); }

/* Le conseil IA : trois cas, et la méthode à côté */
.rw-conseil { display: grid; gap: var(--e-3); align-items: start; }
@media (min-width: 1100px) { .rw-conseil { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
@media (min-width: 1100px) { .rw-cas--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 660px) and (max-width: 1099px) { .rw-cas--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rw-conseil__methode { padding: var(--e-3); display: grid; gap: var(--e-2); }
.rw-conseil__methode h3 { font-size: var(--t-h3); }
.rw-conseil__methode .rw-hero-page__actions { margin-top: 0; align-items: center; }

/* ─── 12. Le cinéma, retenu (31/10) ─────────────────────────────────────────
   L'écran collé : la toile (filet de la teinte du film en haut, nom dans le
   coin), ses commandes dessous, puis la liste des quatre films. Au changement,
   la toile bascule : fondu et netteté qui reviennent, on VOIT que le film
   n'est plus le même. */
@media (min-width: 901px) {
  .rw-salle[data-parti="cinema"] .rw-salle__ecran:not([hidden]) {
    display: grid; background: none; box-shadow: none; overflow: visible; border-radius: 0;
    top: max(calc(var(--haut-tete) + 1rem), calc(50svh - 17vw));
  }
}
.rw-salle__toile {
  position: relative; overflow: hidden; background: #000;
  border-radius: var(--r-xl) var(--r-xl) 0 0; border-top: 3px solid var(--teinte-film, var(--vert));
  box-shadow: 0 0 0 1px var(--trait-fort), 0 40px 90px -36px rgb(0 0 0 / 0.95), 0 0 160px -50px rgb(var(--vert-rgb) / 0.45);
  transition: border-color 0.5s var(--douce);
}
.rw-salle__toile video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.rw-salle__toile video::cue { background: rgb(0 0 0 / 0.78); color: #fff; font-size: 1rem; }
.rw-salle__ecran .rw-toile__bas { border-radius: 0 0 var(--r-xl) var(--r-xl); box-shadow: 0 0 0 1px var(--trait-fort); }
.rw-salle__ecran .rw-toile__nom { font-size: 0.85rem; padding: 0.35rem 0.8rem; }
.rw-salle__piste { list-style: none; margin: 0.9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rw-salle__piste button {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.42rem 0.85rem; border-radius: var(--r-pilule);
  border: 1px solid var(--trait-fort); background: var(--s1); color: var(--t2);
  font: 600 var(--t-mini) var(--texte); cursor: pointer;
  transition: background 0.3s var(--douce), color 0.3s var(--douce), border-color 0.3s var(--douce);
}
.rw-salle__piste button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teinte-film, var(--vert)); opacity: 0.5; }
.rw-salle__piste button:hover { color: var(--t1); }
.rw-salle__piste button[aria-current="true"] { background: var(--s3); color: var(--t1); border-color: var(--teinte-film, var(--vert)); }
.rw-salle__piste button[aria-current="true"]::before { opacity: 1; box-shadow: 0 0 10px var(--teinte-film, var(--vert)); }
.rw-salle__ecran.change video { animation: rw-bascule 0.8s var(--sortie); }
.rw-salle__ecran.change .rw-toile__nom { animation: rw-vient 0.5s var(--sortie); }
@keyframes rw-bascule { from { opacity: 0.1; filter: blur(10px) saturate(0.3); transform: scale(1.03); } to { opacity: 1; filter: none; transform: none; } }
/* Cinéma, deux ajustements (31/10/2026, Pierre) : à la largeur d'un iPad, les
   fiches se touchaient (« En parler » collé au titre de la suivante), et les
   deux boutons d'une fiche passaient l'un sous l'autre. */
@media (min-width: 901px) {
  .rw-salle[data-parti="cinema"] .rw-proj__actions { flex-wrap: nowrap; }
  .rw-salle[data-parti="cinema"] .rw-proj__actions .rw-btn { white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1279px) {
  .rw-salle[data-parti="cinema"] .rw-proj__actions .rw-btn { font-size: 0.86rem; padding-inline: 0.85rem; }
}
/* Les fiches du cinéma (31/10/2026, Pierre) : la première commence au même
   niveau que le haut de l'écran du film ; les suivantes s'enchaînent avec un
   écart régulier, au lieu d'être centrées dans 72 % de la hauteur (0 px
   d'écart sur iPad, 450 px sur un écran de 2 560). */
@media (min-width: 901px) {
  .rw-salle[data-parti="cinema"] .rw-proj { min-height: 0; align-content: start; }
  .rw-salle[data-parti="cinema"] .rw-proj ~ .rw-proj { padding-top: clamp(4rem, 8vh, 6.5rem); }
  .rw-salle[data-parti="cinema"] .rw-proj:last-child { padding-bottom: 18vh; }
}

/* La fiche du film qui joue prend sa teinte */
.rw-salle[data-parti="cinema"] .rw-proj.est-actif .rw-proj__pour { color: var(--teinte-film, var(--vert)); }
@media (prefers-reduced-motion: reduce) { .rw-salle__ecran.change video, .rw-salle__ecran.change .rw-toile__nom { animation: none; } }

/* ─── 13. Le bandeau Peppol, refait ─────────────────────────────────────────
   En pilule, deux lignes de texte donnaient une forme de gélule et la flèche
   tombait seule sur une troisième ligne. Une carte, sur une grille. */
.rw-annonce {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.6rem 1rem;
  padding: 0.9rem 1.1rem; border-radius: var(--r-l); max-width: 46rem; width: 100%;
}
.rw-annonce .rw-fleche { font-size: 1.1rem; }
@media (max-width: 620px) {
  .rw-annonce { grid-template-columns: minmax(0, 1fr) auto; }
  .rw-annonce__pt { grid-column: 1 / -1; justify-self: start; }
}

/* ─── 14. Le socle détaillé (31/10) ─────────────────────────────────────────
   Dix fonctions décrites, au lieu de six pastilles ; « Le vôtre » mis en
   avant comme une porte ouverte, pas comme une case vide. */
.rw-socle { display: grid; gap: var(--e-4); }
.rw-socle-dalle { padding: 0; overflow: hidden; background: linear-gradient(180deg, var(--s2), var(--s1)); color: var(--t1); border: 1px solid rgb(var(--vert-rgb) / 0.45); box-shadow: var(--ombre-2), 0 30px 70px -40px rgb(var(--vert-rgb) / 0.5); }
.rw-socle-dalle__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.9rem 1.25rem; background: var(--vert-fond); color: var(--sur-accent); }
.rw-socle-dalle__tete b { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.rw-socle-dalle__tete span { font-size: var(--t-mini); font-weight: 600; }
.rw-fonctions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.rw-fonction { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2rem 0.75rem; padding: 1.1rem 1.25rem; border-top: 1px solid var(--trait); border-left: 1px solid var(--trait); margin: 0 0 -1px -1px; }
.rw-fonction svg { grid-row: span 2; color: var(--vert); margin-top: 0.1rem; }
.rw-fonction b { font-size: var(--t-petit); letter-spacing: -0.01em; }
.rw-fonction span { font-size: var(--t-mini); color: var(--t2); line-height: 1.5; }
.rw-bloc--vous {
  display: grid; justify-items: center; align-content: center; gap: 0.2rem; text-decoration: none;
  background: linear-gradient(160deg, rgb(var(--vert-rgb) / 0.22), rgb(var(--vert-rgb) / 0.06));
  border: 1.5px solid var(--vert); color: var(--t1);
  box-shadow: 0 0 0 4px var(--vert-halo), 0 16px 40px -18px rgb(var(--vert-rgb) / 0.6);
}
.rw-bloc--vous svg { color: var(--vert); }
.rw-bloc--vous > span { font-size: 1.05rem; }
.rw-bloc--vous small { color: var(--t2); line-height: 1.4; max-width: 18ch; }
.rw-bloc--vous em { font-style: normal; margin-top: 0.3rem; color: var(--vert); font-size: 0.8rem; display: inline-flex; gap: 0.3rem; }
a.rw-bloc--vous:hover { transform: translateY(-3px); box-shadow: 0 0 0 6px var(--vert-halo), 0 20px 50px -18px rgb(var(--vert-rgb) / 0.7); }
.rw-vecu--ligne { display: grid; gap: var(--e-2); }
@media (min-width: 860px) { .rw-vecu--ligne { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rw-vecu--ligne div, .rw-vecu--ligne div:first-child { border-top: 1px solid var(--trait); } }
/* Les blocs d'une même rangée prennent la hauteur du plus grand : leur
   contenu se centre au lieu de rester collé en haut. */
.rw-bloc { display: grid; align-content: center; justify-items: center; }
/* Chaque fonction : titre et description collés en haut, même quand la
   rangée est plus haute que son contenu. */
.rw-fonction { align-content: start; }

/* ─── 15. L'IA dans le logiciel (31/10) ─────────────────────────────────────
   Trois passages réels du film du socle, côte à côte : le compagnon, les
   documents lus, la question qui trouve sa réponse. Puis où l'IA sert dans
   chaque solution. */
.rw-ial { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 1000px) { .rw-ial { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 700px) and (max-width: 999px) { .rw-ial { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rw-ial__carte { display: grid; gap: var(--e-2); align-content: start; min-width: 0; }
.rw-ial__carte .rw-toile { box-shadow: 0 0 0 1px var(--trait-fort), 0 30px 60px -30px rgb(0 0 0 / 0.9), 0 0 100px -40px rgb(var(--vert-rgb) / 0.4); }
.rw-ial__carte h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); letter-spacing: -0.03em; line-height: 1.08; }
.rw-ial__carte h3 em { font-style: normal; color: var(--vert); }
.rw-ial__partout { margin-top: var(--e-4); display: grid; gap: var(--e-2); }
.rw-ial__partout-t { font-size: var(--t-mini); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t3); }
.rw-ial__lieux { display: grid; gap: 10px; }
@media (min-width: 900px) { .rw-ial__lieux { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rw-ial__lieu {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 0.8rem; align-items: start;
  padding: 1rem 1.15rem; border-radius: var(--r-l); text-decoration: none; color: var(--t1);
  background: var(--s1); border: 1px solid var(--trait);
  transition: border-color 0.3s var(--douce), transform 0.4s var(--sortie);
}
.rw-ial__lieu:hover { border-color: rgb(var(--vert-rgb) / 0.5); transform: translateY(-2px); }
.rw-ial__lieu b { font-size: var(--t-petit); }
.rw-ial__lieu span:not(.rw-fleche) { grid-column: 1; font-size: var(--t-mini); color: var(--t2); line-height: 1.5; }
.rw-ial__lieu .rw-fleche { grid-column: 2; grid-row: 1; color: var(--vert); }

/* Même famille de défaut que .rw-proj : une variante cachée doit le rester,
   quel que soit son display. */
.rw-hv[hidden] { display: none !important; }

/* ─── 16. Le compagnon, à la DA du socle (31/10) ────────────────────────────
   Couleurs et animations reprises de socle-metier (globals.css, themes.css),
   préfixées cp- : la teinte vient de l'entreprise (--cp-teinte). */
.rw-cp, .rw-cp [data-teinte], [data-cp-porte] {
  --cp-sat: 0.13;
  --cp: oklch(0.6 var(--cp-sat) var(--cp-teinte, 150));
  --cp-clair: oklch(0.76 calc(var(--cp-sat) * 1.05) var(--cp-teinte, 150));
  --cp-fonce: oklch(0.47 var(--cp-sat) var(--cp-teinte, 150));
  --cp-visiere: oklch(0.23 calc(var(--cp-sat) * 0.45) var(--cp-teinte, 150));
  --cp-lueur: oklch(0.95 calc(var(--cp-sat) * 0.7) calc(var(--cp-teinte, 150) - 25));
  --cp-joue: oklch(0.74 0.13 15);
  --cp-fond: var(--s1);
}
.cp-svg { overflow: visible; display: block; }
.cp-corps { transform-box: view-box; transform-origin: 32px 58px; }
@keyframes cp-orbite { to { transform: rotate(360deg); } }
.cp-orbite { transform-origin: 32px 32px; animation: cp-orbite 1.6s linear infinite; }
@keyframes cp-respire { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-0.8px) scale(1.012, 0.99); } }
.cp-respire { animation: cp-respire 3.2s ease-in-out infinite; }
@keyframes cp-regard { 0%, 18%, 100% { transform: translateX(0); } 28%, 44% { transform: translateX(-2.2px); } 56%, 74% { transform: translateX(2.2px); } 84% { transform: translateX(0); } }
.cp-regard { animation: cp-regard 4.6s ease-in-out infinite; }
@keyframes cp-cligne { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.12); } }
.cp-cligne { transform-box: fill-box; transform-origin: center; animation: cp-cligne 4.2s ease-in-out infinite; }
@keyframes cp-saute { 0% { transform: translateY(0) scale(1, 1); } 18% { transform: translateY(0) scale(1.06, 0.92); } 45% { transform: translateY(-4px) scale(0.97, 1.04); } 70% { transform: translateY(0) scale(1.03, 0.97); } 100% { transform: translateY(0) scale(1, 1); } }
.cp-saute { animation: cp-saute 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) 1; }
@keyframes cp-penche { from { transform: rotate(0deg); } to { transform: rotate(-7deg); } }
.cp-penche { animation: cp-penche 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) 1 forwards; }
@keyframes cp-affaisse { from { transform: translateY(0) scale(1, 1); } to { transform: translateY(1px) scale(1.02, 0.96); } }
.cp-affaisse { animation: cp-affaisse 0.6s ease-out 1 forwards; }
@keyframes cp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.cp-pulse { animation: cp-pulse 1.4s ease-in-out infinite; }
@keyframes cp-halo { 0% { transform: scale(0.5); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } }
.cp-halo { transform-box: fill-box; transform-origin: center; animation: cp-halo 1.4s ease-out infinite; }
@keyframes cp-surgit { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cp-surgit { transform-box: fill-box; transform-origin: center; animation: cp-surgit 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 1; }
@media (prefers-reduced-motion: reduce) {
  .cp-orbite, .cp-respire, .cp-regard, .cp-cligne, .cp-saute, .cp-affaisse, .cp-surgit, .cp-pulse { animation: none; }
  .cp-halo { display: none; }
  .cp-penche { animation: none; transform: rotate(-7deg); }
}

.rw-cp {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin-bottom: var(--e-5);
  padding: clamp(1.4rem, 3.5vw, 2.75rem); border-radius: var(--r-xl);
  background: radial-gradient(60% 80% at 22% 40%, rgb(var(--vert-rgb) / 0.10), transparent 70%), linear-gradient(180deg, var(--s2), var(--s1));
  border: 1px solid var(--trait); box-shadow: var(--ombre-2), inset 0 1px 0 var(--lumiere);
}
@media (min-width: 960px) { .rw-cp { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.rw-cp__scene { display: grid; justify-items: center; gap: var(--e-2); }
.rw-cp__perso { width: 168px; height: 168px; }
.rw-cp__bulle {
  position: relative; max-width: 26rem; padding: 0.9rem 1.1rem; border-radius: var(--r-l);
  background: var(--nuit); border: 1px solid var(--trait-fort); font-size: var(--t-petit); color: var(--t2); min-height: 4.6rem;
}
.rw-cp__bulle::before { content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; margin-left: -6px; background: var(--nuit); border-left: 1px solid var(--trait-fort); border-top: 1px solid var(--trait-fort); transform: rotate(45deg); }
.rw-cp__bulle b { color: var(--t1); }
.rw-cp__txt { display: grid; gap: var(--e-2); align-content: start; min-width: 0; }
.rw-cp__txt h3 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); letter-spacing: -0.035em; line-height: 1.06; }
.rw-cp__txt h3 em { font-style: normal; color: var(--vert); }
.rw-cp__txt > p:not(.rw-proj__pour):not(.rw-cp__sous) { color: var(--t2); max-width: 52ch; }
.rw-cp__choix { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rw-cp__choix button {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.85rem 0.35rem 0.45rem;
  border-radius: var(--r-pilule); border: 1px solid var(--trait-fort); background: var(--nuit);
  color: var(--t2); font: 600 var(--t-mini) var(--texte); cursor: pointer;
}
.rw-cp__choix button[aria-pressed="true"] { color: var(--t1); border-color: var(--vert); background: var(--s3); }
.rw-cp__mini { display: inline-grid; place-items: center; }
.rw-cp__sous { font-size: var(--t-mini); color: var(--t3); margin-top: 0.4rem; }
.rw-cp__persos { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.rw-cp__persos button { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: var(--r-l); border: 1px solid var(--trait-fort); background: var(--nuit); cursor: pointer; transition: border-color 0.3s var(--douce), transform 0.4s var(--sortie); }
.rw-cp__persos button:hover { transform: translateY(-2px); }
.rw-cp__persos button[aria-pressed="true"] { border-color: var(--cp-clair); box-shadow: 0 0 0 3px oklch(0.6 0.13 var(--cp-teinte) / 0.25); }

/* L'encart MCP, pour les équipes techniques */
.rw-mcp {
  display: grid; gap: var(--e-3); align-items: center; margin-top: var(--e-5);
  padding: clamp(1.3rem, 3vw, 2.25rem); border-radius: var(--r-xl); border: 1px dashed var(--trait-fort);
}
@media (min-width: 1000px) { .rw-mcp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rw-mcp__txt { display: grid; gap: var(--e-2); min-width: 0; }
.rw-mcp__txt h3 { font-size: clamp(1.35rem, 2.3vw, 1.8rem); letter-spacing: -0.03em; line-height: 1.1; }
.rw-mcp__txt > p:not(.rw-proj__pour) { color: var(--t2); }
.rw-mcp__code {
  margin: 0; overflow-x: auto; padding: 1.1rem 1.25rem; border-radius: var(--r-l);
  background: #0a0e10; border: 1px solid var(--trait-fort); box-shadow: inset 0 1px 0 var(--lumiere);
  font: 0.86rem/1.7 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: var(--t1); white-space: pre;
}
.rw-mcp__code .c { color: var(--t3); }
.rw-mcp__code .o { color: var(--vert); }
.rw-mcp__code i { font-style: normal; color: var(--vert-clair, #7BEF97); }
.rw-mcp__code span[data-lang-key] { white-space: pre-wrap; }

/* La troisième porte : le compagnon du socle, et ce que disent les clients */
.rw-porte__vue--ia {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(0.6rem, 1.5vw, 1.1rem);
  padding: 0 clamp(0.9rem, 2vw, 1.4rem);
  background: radial-gradient(70% 90% at 25% 55%, rgb(var(--vert-rgb) / 0.16), transparent 70%), #0e1417;
}
.rw-porte__cp { width: clamp(84px, 9vw, 112px); height: clamp(84px, 9vw, 112px); }
.rw-porte__cp .cp-svg { width: 100%; height: 100%; }
.rw-porte__citations { position: relative; }
.rw-porte__citations p {
  position: relative; padding: 0.75rem 0.9rem; border-radius: var(--r-m);
  background: var(--s1); border: 1px solid var(--trait-fort); color: var(--t1);
  font-size: clamp(0.82rem, 1.05vw, 0.95rem); line-height: 1.45; font-style: italic;
  animation: rw-vient 0.5s var(--sortie);
}
.rw-porte__citations p::before { content: ""; position: absolute; left: -6px; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: var(--s1); border-left: 1px solid var(--trait-fort); border-bottom: 1px solid var(--trait-fort); transform: rotate(45deg); }
@media (min-width: 1100px) { .rw-porte__t { font-size: clamp(1.25rem, 1.6vw, 1.5rem); } .rw-porte__pied { justify-content: flex-start; } }

/* ─── 17. Pourquoi maintenant (31/10) ───────────────────────────────────────
   Le texte et le chiffre sourcé côte à côte ; la frise de l'IA, de 1950 à
   aujourd'hui ; et la veille. */
.rw-maintenant { display: grid; gap: var(--e-4); align-items: center; }
@media (min-width: 1000px) { .rw-maintenant { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.rw-maintenant__txt { display: grid; gap: var(--e-2); justify-items: start; }
.rw-maintenant__txt .rw-chapeau { margin: 0; }
.rw-maintenant__txt h2 { font-size: var(--t-titre); max-width: 20ch; }
.rw-maintenant__txt .rw-chapeau { max-width: 60ch; }

.rw-frise-bloc { margin-top: var(--e-5); display: grid; gap: var(--e-3); }
.rw-frise__t { font-size: var(--t-grand); font-weight: 700; letter-spacing: -0.02em; color: var(--t1); }
.rw-frise__defile { overflow-x: auto; scrollbar-width: thin; padding-bottom: 0.5rem; }
.rw-frise {
  list-style: none; margin: 0; padding: 1.6rem 0 0; position: relative;
  display: grid; grid-template-columns: repeat(8, minmax(9.5rem, 1fr)); gap: 1rem; min-width: 76rem;
}
/* La ligne du temps : grise, puis verte sur ses derniers pas */
.rw-frise::before { content: ""; position: absolute; left: 0; right: 0; top: 0.55rem; height: 2px; background: linear-gradient(90deg, var(--trait-fort) 0, var(--trait-fort) 58%, var(--vert) 82%, var(--vert)); }
.rw-frise li { position: relative; display: grid; gap: 0.3rem; align-content: start; padding-right: 0.5rem; }
.rw-frise li::before { content: ""; position: absolute; top: -1.35rem; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--nuit); border: 2px solid var(--trait-fort); }
.rw-frise li:nth-child(n+6)::before { border-color: var(--vert); }
.rw-frise time { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; color: var(--t1); font-variant-numeric: tabular-nums; }
.rw-frise b { font-size: var(--t-petit); color: var(--t1); line-height: 1.3; }
.rw-frise span { font-size: var(--t-mini); color: var(--t2); line-height: 1.5; }
.rw-frise li.est-maintenant::before { background: var(--vert); border-color: var(--vert); box-shadow: 0 0 0 5px var(--vert-halo), 0 0 18px var(--vert); }
.rw-frise li.est-maintenant time { color: var(--vert); }
@media (max-width: 760px) {
  .rw-frise { grid-template-columns: 1fr; min-width: 0; padding: 0 0 0 1.6rem; gap: 1.1rem; }
  .rw-frise::before { left: 0.5rem; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--trait-fort) 0, var(--trait-fort) 58%, var(--vert) 82%, var(--vert)); }
  .rw-frise li::before { top: 0.45rem; left: -1.48rem; }
}

.rw-veille { margin-top: var(--e-5); display: grid; gap: 14px; }
@media (min-width: 1000px) { .rw-veille { grid-template-columns: minmax(0, 0.9fr) repeat(3, minmax(0, 1fr)); align-items: stretch; } }
@media (min-width: 640px) and (max-width: 999px) { .rw-veille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rw-veille__t { display: grid; gap: 0.4rem; align-content: center; }
.rw-veille__t h3 { font-size: clamp(1.35rem, 2.1vw, 1.7rem); letter-spacing: -0.03em; line-height: 1.12; }
.rw-veille__item { display: grid; gap: 0.35rem; align-content: start; padding: 1.1rem 1.2rem; border-radius: var(--r-l); background: var(--s1); border: 1px solid var(--trait); border-top: 2px solid rgb(var(--vert-rgb) / 0.6); }
.rw-veille__item b { font-size: var(--t-petit); color: var(--t1); }
.rw-veille__item span { font-size: var(--t-mini); color: var(--t2); line-height: 1.5; }

/* La barre de menu épouse la largeur du haut de page (1 800 px, marges
   déduites) sur l'accueil, où le haut de page s'élargit. Ailleurs, elle
   garde la largeur des pages (1 440 px). */
body:has(.rw-hero--portes) .rw-head { width: min(calc(100% - 2 * var(--marge)), calc(1800px - 2 * var(--marge))); }

/* La FAQ par thème */
.rw-faq__filtres { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--e-2); }
.rw-faq__filtres button {
  padding: 0.45rem 0.95rem; border-radius: var(--r-pilule); border: 1px solid var(--trait-fort);
  background: var(--s1); color: var(--t2); font: 600 var(--t-mini) var(--texte); cursor: pointer;
  transition: background 0.25s var(--douce), color 0.25s var(--douce), border-color 0.25s var(--douce);
}
.rw-faq__filtres button:hover { color: var(--t1); }
.rw-faq__filtres button[aria-pressed="true"] { background: var(--vert-fond); border-color: var(--vert-fond); color: var(--sur-accent); }
.rw-faq__item[hidden] { display: none !important; }

/* ── Le toucher et le verre (audit apple-design, 03/11/2026) ─────────────────
   Même règle que la section 41 de style.css, pour les éléments propres aux
   pages des solutions. Ici, parce que ce fichier passe APRÈS style.css : ses
   :hover l'emporteraient sinon sur la réponse à l'appui. */
@media (hover: none) {
  .rw-annonce:hover .rw-fleche, .rw-sol-carte:hover, .rw-sol-carte:hover .rw-fleche,
  .rw-sol-carte:hover .rw-sol-carte__vue img, .rw-sol-carte:hover .rw-sol-carte__vue video,
  .rw-affiche:hover img, a.rw-bloc:hover, a.rw-bloc--vous:hover, .rw-agent:hover,
  .rw-porte:hover, .rw-ial__lieu:hover, .rw-cp__persos button:hover { transform: none; }
}
.rw-agent:active, .rw-affiche:active, .rw-cp__persos button:active,
.rw-essai__serie:active, .rw-faq__filtres button:active {
  transform: scale(0.97); transition-duration: 0.1s;
}
a.rw-bloc:active, a.rw-bloc--vous:active, .rw-ial__lieu:active, .rw-sol-carte:active {
  transform: scale(0.985); transition-duration: 0.1s;
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .rw-sol-carte__lecture { background: rgb(var(--nuit-rgb)); }
  .rw-toile__nom { background: rgb(11 15 17); }
  .rw-essai-salle, .rw-fil-rouge__in { background: rgb(var(--panneau-rgb)); }
  .rw-lecteur__fond { background: rgb(6 9 11 / 0.96); }
  .rw-sol-carte__lecture, .rw-toile__nom, .rw-essai-salle, .rw-lecteur__fond,
  .rw-fil-rouge__in, .rw-etape__vue .rw-chapitre {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}
/* Le lecteur des films sort par où il est entré (rw-site.js, fenetresSymetriques) */
.rw-lecteur.rw-sort[hidden] { display: grid; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .rw-lecteur__boite { animation-name: rw-nait; }
  .rw-lecteur.rw-sort .rw-lecteur__boite { animation: rw-rentre 0.24s var(--douce) both; }
  .rw-lecteur.rw-sort .rw-lecteur__fond { animation: rw-s-efface 0.24s var(--douce) both; }
}