/* ==========================================================================
   BRL Digital : pages intérieures
   Composants communs aux pages de service (hero de page, avant/après à
   faire glisser, cartes « règles », offres, frise, calculs, formulaire
   court), puis les interfaces dessinées propres à chaque page.

   Même règle que style.css : chaque bloc a un état final lisible sans JS
   et sans animation. Le mouvement est regroupé en bas de fichier.
   ========================================================================== */

/* « hidden » gagne toujours, même sur un bloc en grille (panneaux d'onglets) */
[hidden] { display: none !important; }

/* La rubrique de la page en cours reste allumée dans le menu */
.nav-bouton.actif { color: var(--violet); }
.sous-menu a[aria-current="page"] strong { color: var(--violet); }

@media (min-width: 75em) {
  .nav-bouton.actif { color: var(--blanc); background: rgba(128, 121, 247, .14); }
  .nav-liste > li > a[aria-current="page"] { color: var(--blanc); background: rgba(128, 121, 247, .14); }
}

/* ==========================================================================
   Hero de page
   ========================================================================== */
.ph {
  position: relative;
  padding-top: clamp(7.5rem, 5.5rem + 7vw, 10.5rem);
  overflow-x: clip;
  text-align: center;
}

.ph-tete { position: relative; z-index: 1; }

.fil { margin-bottom: var(--e-5); }

.fil ol {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem .5rem;
  padding: .375rem 1rem;
  border: 1px solid var(--bordure);
  border-radius: var(--pilule);
  background: rgba(20, 20, 22, .72);
  color: var(--discret);
  font-size: var(--t-mini);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.fil li { display: inline-flex; align-items: center; gap: .5rem; }

.fil li + li::before {
  content: "";
  width: .25rem;
  height: .625rem;
  background: var(--violet);
  transform: skewX(-30deg);
  opacity: .7;
}

.fil a { text-decoration: none; transition: color .2s; }
@media (pointer: coarse) { .fil a { display: inline-block; padding-block: .75rem; margin-block: -.75rem; } }
.fil a:hover { color: var(--blanc); }
.fil [aria-current] { color: var(--gris-texte); }

.ph h1 { max-width: 16ch; margin-inline: auto; }

.ph-sous-titre {
  max-width: 40rem;
  margin: var(--e-5) auto 0;
  font-size: var(--t-chapo);
  line-height: 1.5;
}

.ph .actions { margin-top: var(--e-6); }

.ph-scene {
  position: relative;
  z-index: 1;
  margin-top: clamp(3rem, 2rem + 4vw, 4.5rem);
  text-align: left;
}

/* Un socle éclairé sous l'interface du hero */
.ph-socle {
  position: absolute;
  inset: 30% 0 0;
  border-top: 1px solid var(--trait-sombre);
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(128, 121, 247, .13), transparent 70%),
    linear-gradient(var(--carte-1), var(--encre));
  pointer-events: none;
}

.ph-scene .wrap { position: relative; }

.ph-legende {
  margin-top: var(--e-4);
  color: var(--discret);
  font-size: var(--t-petit);
  text-align: center;
}

/* Hero en deux colonnes : texte à gauche, interface à droite */
.ph-duo { text-align: left; }
.ph-duo .ph-tete { display: grid; gap: var(--e-7); align-items: center; }
.ph-duo h1 { margin-inline: 0; }
.ph-duo .ph-sous-titre { margin-inline: 0; }
.ph-duo .actions,
.ph-duo .hero-preuves,
.ph-duo .fil ol { justify-content: flex-start; }
.ph-duo .ph-scene { margin-top: 0; }
.ph-duo { padding-bottom: var(--e-8); }

@media (min-width: 62em) {
  .ph-duo .ph-tete { grid-template-columns: 1fr 1.05fr; gap: var(--e-8); }
}

/* ==========================================================================
   Briques de contenu
   ========================================================================== */
.section-claire-titre { color: var(--titre); }

/* Texte d'un côté, visuel de l'autre ; « inverse » échange les côtés */
.duo { display: grid; gap: var(--e-7); align-items: center; }
.duo + .duo { margin-top: var(--e-9); }
.duo-texte > p:not(.sur-titre) { margin-top: var(--e-4); }
.duo-texte h2 + p,
.duo-texte h3 + p { margin-top: var(--e-4); }
.duo-texte .btn,
.duo-texte .lien-fleche { margin-top: var(--e-5); }

@media (min-width: 62em) {
  .duo { grid-template-columns: 1fr 1fr; gap: var(--e-9); }
  .duo-inverse .duo-texte { order: 2; }
}

/* Liste à coches violettes */
.coches { display: grid; gap: var(--e-3); margin-top: var(--e-5); }

.coches li {
  position: relative;
  padding-left: 2rem;
}

.coches li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .25em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%230B0B0C' stroke-width='1.6'/%3E%3C/svg%3E") center / 70% no-repeat;
}

.coches b { color: var(--titre); font-weight: var(--gras-bouton); }

/* Liste barrée : ce que je ne fais pas */
.croix { display: grid; gap: var(--e-3); }

.croix li {
  position: relative;
  padding: 1rem 1.25rem 1rem 3.25rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte);
}

.croix li::before,
.croix li::after {
  content: "";
  position: absolute;
  left: 1.375rem;
  top: 1.625rem;
  width: .875rem;
  height: 2px;
  background: var(--discret);
  transform: rotate(45deg);
}

.croix li::after { transform: rotate(-45deg); }
.croix b { display: block; color: var(--titre); font-weight: var(--gras-bouton); }
.croix span { color: var(--discret); font-size: var(--t-petit); }

/* Encart : une phrase qui renvoie ailleurs */
.encart {
  position: relative;
  display: grid;
  gap: var(--e-4);
  align-items: center;
  margin-top: var(--e-8);
  padding: var(--e-6);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: var(--carte);
}

.encart h3 { font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); }
.encart p { margin-top: var(--e-2); }

@media (min-width: 48em) {
  .encart { grid-template-columns: 1fr auto; gap: var(--e-6); padding: var(--e-6) var(--e-7); }
}

/* Pastille d'information sous un bloc */
.note {
  margin-top: var(--e-5);
  color: var(--discret);
  font-size: var(--t-petit);
  text-align: center;
}

/* Grille d'icônes : ce qui est inclus */
.inclus { display: grid; gap: var(--e-3); }

.inclus li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem var(--e-4);
  align-items: start;
  padding: var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte);
  transition: border-color .3s, transform .4s var(--sortie);
}

.inclus li:hover { border-color: var(--violet); transform: translateY(-3px); }
.inclus .tuile { grid-row: span 2; }
.inclus b { color: var(--titre); font-weight: var(--gras-bouton); line-height: 1.35; }
.inclus span:not(.tuile) { color: var(--discret); font-size: var(--t-petit); line-height: 1.5; }

@media (min-width: 40em) { .inclus { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .inclus { grid-template-columns: repeat(3, 1fr); } }

/* Cartes « à voir aussi » : le maillage entre les pages */
.voir { display: grid; gap: var(--e-3); }

.voir a {
  position: relative;
  display: grid;
  gap: .25rem;
  height: 100%;
  padding: var(--e-5) 3.5rem var(--e-5) var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte);
  text-decoration: none;
  transition: border-color .25s, transform .35s var(--sortie);
}

.voir a::after {
  content: "";
  position: absolute;
  right: 1.5rem;
  top: 50%;
  width: .5rem;
  height: .5rem;
  margin-top: -.25rem;
  border-top: 2px solid var(--accent-texte);
  border-right: 2px solid var(--accent-texte);
  transform: rotate(45deg);
  transition: transform .25s var(--sortie);
}

.voir a:hover { border-color: var(--violet); transform: translateY(-3px); }
.voir a:hover::after { transform: translateX(4px) rotate(45deg); }
.voir b { color: var(--titre); font-weight: var(--gras-bouton); }
.voir span { color: var(--discret); font-size: var(--t-petit); }

@media (min-width: 48em) { .voir { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75em) { .voir-3 { grid-template-columns: repeat(3, 1fr); } .voir-4 { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   Avant / après à faire glisser
   Le curseur est un vrai <input type="range"> : clavier, souris et doigt.
   ========================================================================== */
.ba {
  position: relative;
  --pos: 50%;
  border: 1px solid var(--trait-sombre);
  border-radius: var(--rayon-l);
  background: var(--carte-1);
  overflow: hidden;
  box-shadow: var(--ombre-fenetre);
  user-select: none;
  -webkit-user-select: none;
}

.ba-vue { position: relative; }
.ba-apres { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }

.ba-etiquette {
  position: absolute;
  top: 1rem;
  z-index: 3;
  padding: .3125rem .75rem;
  border-radius: var(--pilule);
  background: rgba(11, 11, 12, .82);
  color: var(--blanc);
  font-size: var(--t-mini);
  font-weight: var(--gras-bouton);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;
  transition: opacity .3s;
}

.ba-etiquette-avant { left: 1rem; }
.ba-etiquette-apres { right: 1rem; background: var(--violet); color: var(--encre); }

.ba-ligne {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 2;
  width: 2px;
  margin-left: -1px;
  background: var(--violet);
  pointer-events: none;
}

.ba-poignee {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: -1.5rem 0 0 -1.5rem;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 0 6px rgba(128, 121, 247, .25), 0 10px 30px rgba(0, 0, 0, .5);
  transition: transform .25s var(--sortie);
}

.ba-poignee svg { width: 1.375rem; fill: none; stroke: var(--encre); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.ba input[type="range"] {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
}

.ba:has(input:focus-visible) .ba-poignee { outline: 2px solid var(--blanc); outline-offset: 4px; }
.ba:hover .ba-poignee,
.ba:active .ba-poignee { transform: scale(1.08); }

/* ==========================================================================
   Trois règles : une interface en haut, le texte dessous
   ========================================================================== */
.regles { display: grid; gap: var(--e-4); }

.regle {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: var(--carte);
}

.regle-visuel {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 13.5rem;
  padding: var(--e-5);
  overflow: hidden;
  border-bottom: 1px solid var(--bordure);
  background-color: var(--carte-2);
  background-image: radial-gradient(#2E2E34 1px, transparent 1px);
  background-size: 18px 18px;
  color: var(--gris-texte);
  font-size: .75rem;
  line-height: 1.4;
}

.clair .regle-visuel { background-color: #ECEAE4; background-image: radial-gradient(#D9D6CE 1px, transparent 1px); }

.regle-texte { position: relative; z-index: 1; padding: var(--e-5) var(--e-5) var(--e-6); }
.regle-texte .tuile { margin-bottom: var(--e-4); }
.regle-texte p { margin-top: var(--e-2); font-size: 1rem; }

@media (min-width: 62em) {
  .regles { grid-template-columns: repeat(3, 1fr); }
  .regles-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Offres : des cartes de taille égale, prix « à partir de », toujours HT
   ========================================================================== */
.offres { display: grid; gap: var(--e-4); align-items: stretch; }

.offre {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--e-6) var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: var(--carte);
}

.offre-vedette { border: 2px solid var(--violet-fonce); }

.offre-ruban {
  position: absolute;
  top: -.8125rem;
  left: var(--e-5);
  padding: .1875rem .75rem;
  border-radius: var(--pilule);
  background: var(--violet);
  color: var(--encre);
  font-size: var(--t-mini);
  font-weight: var(--gras-bouton);
}

.offre-nom { color: var(--titre); font-size: 1.375rem; font-weight: var(--gras-titre); letter-spacing: -.01em; }
.offre-pour { margin-top: .25rem; color: var(--discret); font-size: var(--t-petit); }

.offre-prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .375rem;
  margin-top: var(--e-5);
  color: var(--discret);
  font-size: var(--t-petit);
}

.offre-prix strong {
  color: var(--titre);
  font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem);
  font-weight: var(--gras-titre);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.offre-alt { margin-top: var(--e-2); color: var(--texte); font-size: var(--t-petit); }
.offre-alt b { color: var(--titre); }

.offre .coches { flex: 1; margin-block: var(--e-5); font-size: 1rem; }
.offre .coches li::before { width: 1.125rem; height: 1.125rem; }
.offre .btn { align-self: stretch; }

.clair .offre .coches li::before { background-color: var(--violet); }

@media (min-width: 48em) { .offres-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .offres-3 { grid-template-columns: repeat(3, 1fr); } .offres-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75em) { .offres-4 { grid-template-columns: repeat(4, 1fr); } }

/* Bascule en pilule, réutilisée partout (deux ou trois choix) */
.bascule {
  position: relative;
  display: inline-grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  padding: .25rem;
  border: 1px solid var(--bordure);
  border-radius: var(--pilule);
  background: var(--carte);
}

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

.bascule label,
.bascule button {
  position: relative;
  z-index: 1;
  padding: .625rem 1.25rem;
  border: 0;
  border-radius: var(--pilule);
  background: none;
  color: var(--texte);
  font: inherit;
  font-size: var(--t-petit);
  font-weight: var(--gras-bouton);
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  transition: color .3s, background-color .3s;
}

.bascule label:has(input:checked),
.bascule button[aria-pressed="true"],
.bascule button[aria-selected="true"] { background: var(--titre); color: var(--fond); }
.bascule label:has(input:focus-visible) { outline: 2px solid var(--violet); outline-offset: 2px; }

.centre { text-align: center; }
.centre .bascule { margin-bottom: var(--e-6); }

/* ==========================================================================
   Frise horizontale : les étapes d'un projet
   ========================================================================== */
.frise {
  position: relative;
  display: grid;
  gap: var(--e-4);
  counter-reset: frise;
}

.frise li {
  position: relative;
  padding: var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte);
  counter-increment: frise;
}

.frise li::before {
  content: counter(frise, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--e-4);
  border-radius: 50%;
  background: var(--violet);
  color: var(--encre);
  font-size: var(--t-petit);
  font-weight: var(--gras-titre);
}

.frise h3 { font-size: 1.125rem; }
.frise p { margin-top: var(--e-2); font-size: var(--t-petit); line-height: 1.55; }

@media (min-width: 48em) { .frise { grid-template-columns: repeat(2, 1fr); } }

@media (min-width: 62em) {
  .frise { grid-template-columns: repeat(var(--n, 4), 1fr); gap: var(--e-3); }

  /* Le fil qui relie les pastilles */
  .frise::before {
    content: "";
    position: absolute;
    left: 2.5rem;
    right: 2.5rem;
    top: calc(var(--e-5) + 1.25rem);
    height: 2px;
    background: var(--bordure);
  }

  .frise::after {
    content: "";
    position: absolute;
    left: 2.5rem;
    right: 2.5rem;
    top: calc(var(--e-5) + 1.25rem);
    height: 2px;
    background: var(--accent-texte);
    transform: scaleX(var(--fp, 1));
    transform-origin: left;
  }

  .frise li { border: 0; background: none; padding: var(--e-5) var(--e-3) 0 0; }
  .frise li::before { position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--fond); }
}

/* ==========================================================================
   Calculs : curseurs, puces de choix, résultat qui compte
   ========================================================================== */
.calc {
  display: grid;
  gap: var(--e-6);
  padding: var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: var(--carte);
}

.calc-reglages { display: grid; gap: var(--e-5); align-content: start; }

.reglage { display: grid; gap: var(--e-2); }

.reglage-tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e-3);
  color: var(--titre);
  font-weight: var(--gras-bouton);
}

.reglage-tete output {
  color: var(--accent-texte);
  font-weight: var(--gras-titre);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.reglage-aide { color: var(--discret); font-size: var(--t-mini); }

/* Curseur : la partie remplie suit la valeur (--v, posé en JS) */
.curseur {
  width: 100%;
  height: 1.75rem;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.curseur::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--violet) var(--v, 50%), var(--bordure) var(--v, 50%));
}

.curseur::-moz-range-track { height: 6px; border-radius: 6px; background: var(--bordure); }
.curseur::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--violet); }

.curseur::-webkit-slider-thumb {
  width: 1.375rem;
  height: 1.375rem;
  margin-top: -.5rem;
  border: 3px solid var(--fond);
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 0 1px var(--violet), 0 4px 12px rgba(0, 0, 0, .4);
  -webkit-appearance: none;
  appearance: none;
  transition: transform .2s;
}

.curseur::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border: 3px solid var(--fond);
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 0 1px var(--violet);
}

.curseur:active::-webkit-slider-thumb { transform: scale(1.15); }
.curseur:focus-visible { outline: none; }
.curseur:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--violet); outline-offset: 3px; }

/* Puces de choix (boutons radio) */
.puces { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; border: 0; }
.puces legend { margin-bottom: var(--e-2); padding: 0; color: var(--titre); font-weight: var(--gras-bouton); }
.puces input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.puces label {
  padding: .5rem 1rem;
  border: 1px solid var(--bordure);
  border-radius: var(--pilule);
  background: var(--carte);
  color: var(--texte);
  font-size: var(--t-petit);
  font-weight: var(--gras-bouton);
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}

.puces label:hover { border-color: var(--accent-texte); }
.puces label:has(input:checked) { border-color: var(--violet); background: var(--violet); color: var(--encre); }
.puces label:has(input:focus-visible) { outline: 2px solid var(--violet); outline-offset: 2px; }

.calc-resultat {
  display: grid;
  align-content: start;
  gap: var(--e-4);
  padding: var(--e-5);
  border-radius: var(--rayon);
  background: var(--carte-haute);
  border: 1px solid var(--bordure);
}

.clair .calc-resultat { background: var(--papier); }

.gros-chiffre {
  color: var(--titre);
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
  font-weight: var(--gras-titre);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.gros-chiffre small { font-size: .4em; letter-spacing: 0; color: var(--discret); font-weight: var(--gras-bouton); }

@media (min-width: 62em) {
  .calc { grid-template-columns: 1fr 1.1fr; padding: var(--e-6); gap: var(--e-7); }
}

/* ==========================================================================
   Petit test : on coche, le verdict suit
   ========================================================================== */
.test { display: grid; gap: var(--e-5); }

.test-liste { display: grid; gap: var(--e-2); }

.test-liste label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-4);
  align-items: center;
  padding: 1rem 1.25rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte);
  color: var(--titre);
  font-weight: var(--gras-bouton);
  cursor: pointer;
  transition: border-color .25s, background-color .25s, transform .3s var(--sortie);
}

.test-liste label:hover { transform: translateX(4px); }
.test-liste label small { display: block; color: var(--discret); font-size: var(--t-petit); font-weight: var(--gras-texte); }

.test-liste input {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: 2px solid var(--bordure);
  border-radius: .4rem;
  background: var(--carte-haute);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .2s, border-color .2s;
}

.test-liste input:checked {
  border-color: var(--violet);
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%230B0B0C' stroke-width='1.8'/%3E%3C/svg%3E") center / 80% no-repeat;
}

.test-liste label:has(input:checked) { border-color: var(--violet); }

.verdict {
  position: relative;
  display: grid;
  gap: var(--e-3);
  align-content: center;
  padding: var(--e-6) var(--e-5);
  border-radius: var(--rayon-l);
  background: var(--carte);
  border: 1px solid var(--bordure);
  text-align: center;
}

.verdict-jauge {
  position: relative;
  width: 9rem;
  height: 9rem;
  margin-inline: auto;
  border-radius: 50%;
  background: conic-gradient(var(--violet) calc(var(--score, 0) * 1%), var(--bordure) 0);
  transition: --score .6s;
}

.verdict-jauge::after {
  content: "";
  position: absolute;
  inset: .75rem;
  border-radius: 50%;
  background: var(--carte);
}

.verdict-jauge b {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--titre);
  font-size: 2.25rem;
  font-weight: var(--gras-titre);
  font-variant-numeric: tabular-nums;
}

.verdict-titre { color: var(--titre); font-size: 1.375rem; font-weight: var(--gras-titre); }
.verdict p:not(.verdict-titre) { color: var(--texte); font-size: 1rem; }

@property --score {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@media (min-width: 62em) {
  .test { grid-template-columns: 1.3fr 1fr; gap: var(--e-6); align-items: stretch; }
}

/* ==========================================================================
   Onglets en pilule + panneau (contenus courts)
   ========================================================================== */
.pilules {
  display: flex;
  gap: var(--e-2);
  margin-bottom: var(--e-5);
  padding-bottom: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
}

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

.pilules [role="tab"] {
  flex: none;
  padding: .625rem 1.125rem;
  border: 1px solid var(--bordure);
  border-radius: var(--pilule);
  background: var(--carte);
  color: var(--texte);
  font: inherit;
  font-size: var(--t-petit);
  font-weight: var(--gras-bouton);
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}

.pilules [role="tab"]:hover { border-color: var(--accent-texte); }
.pilules [aria-selected="true"] { border-color: var(--violet); background: var(--violet); color: var(--encre); }

.centre .pilules { justify-content: safe center; }

/* ==========================================================================
   Formulaire court en deux temps (bloc « rdv ») et champs communs
   ========================================================================== */
.rdv { padding-block: var(--e-section); }

.rdv-panneau {
  position: relative;
  display: grid;
  gap: var(--e-7);
  max-width: 68rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background:
    radial-gradient(50rem 30rem at 0% 0%, rgba(128, 121, 247, .1), transparent 60%),
    var(--carte);
}

.rdv-panneau h2 { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); }

.rdv-chapo { margin-top: var(--e-4); font-size: var(--t-chapo); line-height: 1.5; }

.rdv-hugo {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  margin-top: var(--e-6);
}

.rdv-hugo img {
  width: 3.75rem;
  height: 3.75rem;
  border: 2px solid var(--violet);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
}

.rdv-hugo p { display: grid; line-height: 1.35; }
.rdv-hugo b { color: var(--titre); font-weight: var(--gras-bouton); }
.rdv-hugo span { color: var(--discret); font-size: var(--t-petit); }

.rdv-points {
  display: grid;
  gap: var(--e-2);
  margin-top: var(--e-5);
  color: var(--texte);
  font-size: var(--t-petit);
}

.rdv-points li { display: flex; align-items: center; gap: .625rem; }

.rdv-points li::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%230B0B0C' stroke-width='1.8'/%3E%3C/svg%3E") center / 75% no-repeat;
}

.rdv-form {
  position: relative;
  align-self: start;
  padding: var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte-haute);
}

.rdv-piege { position: absolute; left: -9999px; }

.rdv-etapes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-2);
  margin-bottom: var(--e-5);
  color: var(--discret);
  font-size: var(--t-mini);
  font-weight: var(--gras-bouton);
}

.rdv-etapes li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-top: .625rem;
  border-top: 3px solid var(--bordure);
  transition: border-color .4s, color .4s;
}

.rdv-etapes span {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--bordure);
  color: var(--titre);
  font-size: .6875rem;
  transition: background-color .4s, color .4s;
}

.rdv-etapes li.actif,
.rdv-etapes li.fait { border-color: var(--violet); color: var(--titre); }
.rdv-etapes li.actif span,
.rdv-etapes li.fait span { background: var(--violet); color: var(--encre); }

.rdv-pas { display: grid; gap: var(--e-4); min-width: 0; margin: 0; padding: 0; border: 0; }
.rdv-pas > legend { margin-bottom: var(--e-4); padding: 0; color: var(--titre); font-size: 1.25rem; font-weight: var(--gras-titre); }

/* Sans JS, tout le formulaire est visible d'un bloc ; avec JS, une étape à la fois */
.js .rdv-pas:not(.actif) { display: none; }
.rdv-merci { display: none; }
.js .rdv-merci.actif { display: grid; }

.rdv-boutons { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.rdv-boutons .btn-grand { flex: 1; }
.rdv-form .btn-grand { width: 100%; }
.rdv-boutons .btn-grand { width: auto; }

.rdv-merci { justify-items: center; padding-block: var(--e-5); text-align: center; }
.rdv-merci-titre { color: var(--titre); font-size: 1.5rem; font-weight: var(--gras-titre); }

.rdv-coche {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%230B0B0C' stroke-width='1.4'/%3E%3C/svg%3E") center / 60% no-repeat;
  box-shadow: 0 0 0 8px rgba(128, 121, 247, .18);
}

.rdv-erreur {
  margin-top: var(--e-4);
  padding: .75rem 1rem;
  border: 1px solid #F28B82;
  border-radius: var(--rayon-s);
  color: #F8B4AE;
  font-size: var(--t-petit);
}

.rdv-legal { margin-top: var(--e-4); color: var(--discret); font-size: var(--t-mini); }
.rdv-legal a { color: var(--discret); }

@media (min-width: 62em) {
  .rdv-panneau { grid-template-columns: 1fr 1fr; gap: var(--e-8); padding: var(--e-8) var(--e-7); }
  .rdv-form { padding: var(--e-6); }
}

/* Champs de formulaire */
.champ { display: grid; gap: .375rem; }

.champ > span {
  color: var(--titre);
  font-size: var(--t-petit);
  font-weight: var(--gras-bouton);
}

.champ small { color: var(--discret); font-weight: var(--gras-texte); }

.champ input,
.champ textarea,
.champ select {
  width: 100%;
  min-height: 3.25rem;
  padding: .75rem 1rem;
  border: 1px solid var(--bordure-champ);
  border-radius: var(--rayon-s);
  background: var(--fond);
  color: var(--titre);
  font: inherit;
  font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}

.champ textarea { resize: vertical; min-height: 6rem; }
.champ input::placeholder,
.champ textarea::placeholder { color: var(--discret); }

.champ input:focus,
.champ textarea:focus,
.champ select:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(128, 121, 247, .25);
}

.champ.invalide input,
.champ.invalide textarea { border-color: #F28B82; }

.engagements { max-width: 46rem; margin: var(--e-7) auto 0; }
.engagements .regle-texte > p { margin-top: var(--e-4); color: var(--discret); font-size: var(--t-petit); }

.champs-2 { display: grid; gap: var(--e-4); }
@media (min-width: 40em) { .champs-2 { grid-template-columns: 1fr 1fr; } }

/* Message d'erreur écrit, sous le champ : la bordure rouge ne suffit pas */
.champ-erreur {
  display: block;
  margin-top: var(--e-1);
  color: #F28B82;
  font-size: .875rem;
  font-weight: 600;
}
.champ-erreur::before { content: "! "; }

/* Téléphone ou e-mail : l'un des deux suffit */
.champs-joindre { display: grid; gap: var(--e-4); }
.champs-joindre-aide { color: var(--discret); font-size: .9375rem; }
@media (min-width: 40em) {
  .champs-joindre.champs-2 .champs-joindre-aide { grid-column: 1 / -1; }
}

/* ==========================================================================
   Petit kit d'interface : fenêtres, téléphone, avatars, étiquettes
   (.app et .app-barre viennent de style.css)
   ========================================================================== */
.ui-av {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c, #8079F7) 22%, #1C1C20);
  color: var(--c, #8079F7);
  font-size: .625rem;
  font-weight: 700;
  font-style: normal;
}

.ui-tag {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  padding: .125rem .5rem;
  border-radius: var(--pilule);
  background: color-mix(in srgb, var(--c, #8E8F93) 16%, transparent);
  color: var(--c, #8E8F93);
  font-size: .625rem;
  font-weight: 700;
  font-style: normal;
  white-space: nowrap;
}

.ui-tag::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: currentColor; }

.ui-trait { display: block; height: .4375rem; border-radius: 4px; background: #2A2A30; }

/* Téléphone */
.tl {
  position: relative;
  width: 100%;
  max-width: 17.5rem;
  margin-inline: auto;
  padding: .5rem;
  border: 1px solid #3A3A40;
  border-radius: 2.5rem;
  background: #0E0E10;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), inset 0 0 0 1px #000;
}

.tl-ecran {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 19;
  border-radius: 2rem;
  background: #131316;
  color: var(--gris-texte);
  font-size: .6875rem;
  line-height: 1.4;
}

.tl-ecran::before {
  content: "";
  position: absolute;
  top: .5rem;
  left: 50%;
  z-index: 5;
  width: 5rem;
  height: 1.375rem;
  margin-left: -2.5rem;
  border-radius: var(--pilule);
  background: #000;
}

.tl-statut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75rem 1.5rem .25rem;
  color: var(--blanc);
  font-size: .6875rem;
  font-weight: 700;
}

.tl-statut i { width: 2.25rem; height: .5rem; border-radius: 3px; background: linear-gradient(90deg, #fff 70%, rgba(255, 255, 255, .35) 0); }

/* Cadre de navigateur autour d'une capture réelle */
.navig {
  overflow: hidden;
  border: 1px solid #34343A;
  border-radius: .875rem;
  background: #121214;
  box-shadow: var(--ombre-fenetre);
}

.navig img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

/* Notification flottante, posée sur une interface */
.notif {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: 17rem;
  padding: .75rem 1rem;
  border: 1px solid #3A3A40;
  border-radius: 1rem;
  background: rgba(28, 28, 32, .9);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .7);
  color: var(--gris-texte);
  font-size: .75rem;
  line-height: 1.35;
  text-align: left;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.notif b { display: block; color: var(--blanc); font-size: .8125rem; }

.notif-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .625rem;
  background: var(--violet);
}

.notif-ico svg { width: 1.125rem; fill: none; stroke: var(--encre); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Titre discret des cartes « à voir aussi » */
.section-voir { padding-block: 0 var(--e-section); }
.clair + .section-voir { padding-top: var(--e-8); }
.voir-titre { margin-bottom: var(--e-5); font-size: var(--t-h3); }

/* ==========================================================================
   Création de site
   ========================================================================== */

/* Hero : un vrai site, sa version téléphone, une demande qui arrive */
.cs-scene { position: relative; max-width: 62rem; margin-inline: auto; padding-bottom: var(--e-4); }
.cs-bureau { width: 88%; }

.cs-tel {
  position: absolute;
  right: 0;
  bottom: 2.5rem;
  width: 31%;
  max-width: 15rem;
  border-radius: 2rem;
}

.cs-tel .tl-ecran { border-radius: 1.6rem; }

.cs-notif { left: -1rem; bottom: 22%; }

@media (max-width: 39.99em) {
  .cs-bureau { width: 100%; }
  .cs-tel { display: none; }
  .cs-notif { left: auto; right: .5rem; top: -1.5rem; bottom: auto; transform: scale(.9); transform-origin: right top; }
}

/* Un petit site de téléphone, dessiné en HTML */
.mini-site { padding: .25rem .75rem .75rem; font-size: .625rem; }

.ms-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .375rem 0 .625rem;
  color: var(--blanc);
  font-size: .6875rem;
}

.ms-nav span { width: .875rem; height: .5rem; border-block: 2px solid var(--blanc); }

.ms-hero {
  display: grid;
  gap: .375rem;
  padding: .875rem .75rem;
  border-radius: .75rem;
  background:
    linear-gradient(rgba(11, 11, 12, .2), rgba(11, 11, 12, .85)),
    repeating-linear-gradient(115deg, #2B2A3A 0 18px, #262535 18px 36px);
}

.ms-hero small { color: var(--violet); font-weight: 700; }
.ms-hero b { color: var(--blanc); font-size: .875rem; line-height: 1.2; }
.ms-boutons { display: flex; gap: .375rem; margin-top: .25rem; }
.ms-boutons span { padding: .3125rem .625rem; border: 1px solid #4A4A52; border-radius: var(--pilule); color: var(--blanc); font-weight: 700; }
.ms-boutons .ms-appel { border-color: var(--violet); background: var(--violet); color: var(--encre); }

.ms-avis { margin-top: .625rem; color: var(--gris-texte); }
.ms-avis span { color: #FBBC04; letter-spacing: .05em; }
.ms-titre { margin-top: .75rem; color: var(--blanc); font-weight: 700; }
.ms-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: .375rem; margin-top: .5rem; }
.ms-cartes i { height: 3.75rem; border-radius: .5rem; background: #232329; }
.ms-cartes i:first-child { background: repeating-linear-gradient(45deg, #2A2A33 0 8px, #26262E 8px 16px); }

/* Le parcours d'un visiteur : trois onglets, un téléphone */
.parcours { display: grid; gap: var(--e-5); justify-items: center; }

.parcours-onglets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-2);
  width: 100%;
  max-width: 30rem;
}

.parcours-onglets button {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .375rem;
  padding: .75rem .5rem 1rem;
  overflow: hidden;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte);
  color: var(--discret);
  font: inherit;
  font-size: var(--t-mini);
  font-weight: var(--gras-bouton);
  cursor: pointer;
  transition: color .3s, border-color .3s;
}

.parcours-onglets button span {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--carte-haute);
  border: 1px solid var(--bordure);
  color: var(--titre);
  transition: background-color .3s, color .3s;
}

.parcours-onglets [aria-selected="true"] { color: var(--titre); border-color: var(--violet); }
.parcours-onglets [aria-selected="true"] span { background: var(--violet); border-color: var(--violet); color: var(--encre); }

.parcours-temps {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--violet);
  transform: scaleX(0);
  transform-origin: left;
}

.parcours [aria-selected="false"] .parcours-temps { visibility: hidden; }
.parcours-tel { max-width: 16.5rem; }
.parcours-panneau { height: calc(100% - 2rem); }

/* Écran 1 : la recherche */
.pp-google { padding: .75rem .875rem; }
.pp-logo { margin: .75rem 0 .625rem; color: var(--blanc); font-size: 1.25rem; font-weight: 700; text-align: center; letter-spacing: -.02em; }

.pp-champ {
  margin-bottom: .875rem;
  padding: .5rem .875rem;
  border-radius: var(--pilule);
  background: #2A2A30;
  color: var(--blanc);
}

.pp-res { display: grid; gap: .125rem; padding: .625rem 0; border-bottom: 1px solid #26262C; }
.pp-res small { color: var(--gris-discret); font-size: .5625rem; }
.pp-res b { color: #8AB4F8; font-size: .75rem; font-weight: 500; line-height: 1.25; }
.pp-res span { color: var(--gris-texte); font-size: .5625rem; }
.pp-res span:empty { height: .375rem; width: 80%; border-radius: 3px; background: #26262C; }
.pp-moi { margin-inline: -.5rem; padding-inline: .5rem; border: 1px solid rgba(128, 121, 247, .5); border-radius: .5rem; background: rgba(128, 121, 247, .08); }

/* Écran 3 : l'appel */
.pp-appel {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .375rem;
  height: 100%;
  padding-bottom: 2rem;
  color: var(--blanc);
  text-align: center;
}

.pp-avatar {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: .5rem;
  border-radius: 50%;
  background: var(--violet);
  color: var(--encre);
  font-size: 1.25rem;
  font-weight: 800;
  box-shadow: 0 0 0 10px rgba(128, 121, 247, .18), 0 0 0 22px rgba(128, 121, 247, .08);
}

.pp-appel b { font-size: 1rem; }
.pp-appel small { color: var(--gris-texte); }
.pp-touches { display: grid; grid-template-columns: repeat(3, 2.25rem); gap: .625rem; margin-top: 1.25rem; }
.pp-touches i { height: 2.25rem; border-radius: 50%; background: #2A2A30; }
.pp-raccrocher { width: 2.75rem; height: 2.75rem; margin-top: 1rem; border-radius: 50%; background: #E5484D; }

@media (min-width: 62em) {
  .parcours { grid-template-columns: auto 1fr; align-items: center; gap: var(--e-6); }
  .parcours-onglets { grid-template-columns: 1fr; width: 11rem; }
  .parcours-onglets button { justify-items: start; grid-template-columns: auto 1fr; align-items: center; text-align: left; padding: .875rem 1rem 1rem; }
}

/* Les options : cinq cartes, la fiche Google mène à sa page */
.options { display: grid; gap: var(--e-3); }

/* Les options de la création de site, repliées sous le choix de la formule */
.options-repli { max-width: 52rem; margin: var(--e-7) auto 0; border-top: 1px solid var(--bordure); }
.options-repli .coches { margin-bottom: var(--e-3); }

.option {
  display: flex;
  flex-direction: column;
  padding: var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte);
  text-decoration: none;
  transition: border-color .25s, transform .35s var(--sortie);
}

.option > * { position: relative; z-index: 1; }
.option-prix { color: var(--accent-texte); font-size: var(--t-mini); font-weight: var(--gras-bouton); }
.option h3 { margin-top: var(--e-3); }
.option p:not(.option-prix) { margin-top: var(--e-2); font-size: var(--t-petit); line-height: 1.55; }
.option .a-fournir { display: block; margin-top: var(--e-2); text-align: left; }
.option-lien { border-color: rgba(128, 121, 247, .45); }
.option-lien:hover { border-color: var(--violet); transform: translateY(-4px); }
.option-lien .lien-fleche { margin-top: auto; padding-top: var(--e-4); font-size: var(--t-petit); }

@media (min-width: 40em) { .options { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .options { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 75em) { .options { grid-template-columns: repeat(5, 1fr); } }

/* Pensé pour Google : la check-list, puis l'aperçu du résultat */
.seo { position: relative; display: grid; gap: var(--e-4); }
.seo-app { max-width: 26rem; }
.seo-corps { padding: 1rem 1.125rem 1.25rem; }

.seo-titre { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; color: var(--blanc); font-size: .875rem; }
.seo-compte { color: var(--gris-discret); font-size: .75rem; }
.seo-compte b { color: var(--violet); font-size: 1rem; }

.seo-liste { display: grid; gap: .5rem; }

.seo-liste li {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .625rem;
  border-radius: .5rem;
  background: #19191C;
  color: var(--gris-texte);
  font-size: .8125rem;
}

.seo-liste li::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%230B0B0C' stroke-width='1.8'/%3E%3C/svg%3E") center / 75% no-repeat;
}

.seo-apercu {
  justify-self: end;
  width: min(100%, 26rem);
  margin-top: -2.5rem;
  padding: 1rem 1.125rem;
  border: 1px solid #3C4043;
  border-radius: .875rem;
  background: #202124;
  box-shadow: var(--ombre-fenetre);
  color: #BDC1C6;
  font-family: Arial, sans-serif;
  font-size: .8125rem;
  line-height: 1.45;
}

.seo-apercu-label { margin-bottom: .625rem; color: #9AA0A6; font-family: var(--police); font-size: .6875rem; font-weight: 600; }
.seo-url { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; color: #DADCE0; font-size: .75rem; }
.seo-url i { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--violet); color: var(--encre); font-size: .6875rem; font-style: normal; font-weight: 700; }
.seo-url span { display: grid; line-height: 1.25; }
.seo-url small { color: #9AA0A6; font-size: .6875rem; }
.seo-apercu b { display: block; color: #8AB4F8; font-size: 1.0625rem; font-weight: 400; line-height: 1.3; }

/* Vignettes de réalisations */
.vignettes { display: grid; gap: var(--e-4); }

.vignettes a { display: grid; gap: .25rem; text-decoration: none; }
.vignettes .navig { display: block; margin-bottom: var(--e-3); transition: transform .5s var(--sortie), border-color .3s; }
.vignettes img { transition: transform 1.2s var(--sortie); }
.vignettes a:hover .navig { transform: translateY(-6px); border-color: var(--violet); }
.vignettes a:hover img { transform: scale(1.04); }
.vignettes b { color: var(--titre); font-weight: var(--gras-bouton); }
.vignettes a > span:last-child { color: var(--discret); font-size: var(--t-petit); }
.vignettes-lien { margin-top: var(--e-6); }

@media (min-width: 40em) { .vignettes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75em) { .vignettes { grid-template-columns: repeat(4, 1fr); } }
/* Cinq vignettes : trois puis deux, sur une grille de six colonnes */
@media (min-width: 40em) and (max-width: 74.99em) { .vignettes-5 li:last-child { grid-column: 1 / -1; max-width: calc(50% - var(--e-4) / 2); justify-self: center; } }
@media (min-width: 75em) {
  .vignettes-5 { grid-template-columns: repeat(6, 1fr); }
  .vignettes-5 li { grid-column: span 2; }
  .vignettes-5 li:nth-child(n+4) { grid-column: span 3; }
}

@media (prefers-reduced-motion: no-preference) {
  .parcours.auto [aria-selected="true"] .parcours-temps { animation: temps var(--auto, 5s) linear both; }
  .parcours.pause .parcours-temps,
  .parcours:hover .parcours-temps,
  .parcours:focus-within .parcours-temps { animation-play-state: paused; }
  .js .parcours-panneau:not([hidden]) > * { animation: monte .5s var(--sortie) both; }
  .js .pp-moi { animation: brille 2.4s ease-in-out .6s infinite; }

  .js .cs-notif { animation: monte .7s var(--sortie) 1.6s both, flotte 6s ease-in-out 2.4s infinite; }
  .js .cs-tel { animation: flotte 7s ease-in-out 1s infinite; }

  .js .seo-liste li { animation: monte .45s var(--sortie) calc(.3s + var(--i) * .22s) both; }
  .js .seo-liste li::before { animation: coche .4s var(--sortie) calc(.5s + var(--i) * .22s) both; }
  .js .seo-apercu { animation: monte .7s var(--sortie) 1.9s both; }
}

@keyframes flotte {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@keyframes brille {
  0%, 100% { box-shadow: 0 0 0 0 rgba(128, 121, 247, 0); }
  50% { box-shadow: 0 0 0 4px rgba(128, 121, 247, .18); }
}

.frise + .centre { margin-top: var(--e-7); }

/* ==========================================================================
   Refonte
   ========================================================================== */
.rf-figure { max-width: 64rem; margin-inline: auto; }
.rf-ba .ba-etiquette { top: 3rem; }
.rf-ba .ba-vue { aspect-ratio: 16 / 10; overflow: hidden; }

/* L'ancien site : tout ce qu'on ne fait plus */
.vieux {
  height: 100%;
  background: #E9E6D8;
  color: #222;
  font-family: Verdana, Geneva, sans-serif;
  font-size: clamp(.4375rem, .25rem + .6vw, .75rem);
  line-height: 1.35;
}

.vieux-tete {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 1.25em 1.5em;
  background: linear-gradient(#3B5998, #1D3466);
  border-bottom: 3px solid #C9A227;
  color: #fff;
}

.vieux-tete b { font-family: "Times New Roman", serif; font-size: 2.2em; letter-spacing: .08em; text-shadow: 2px 2px 0 #000; }
.vieux-tete span { color: #F4E3A1; font-style: italic; }

.vieux-nav { display: flex; gap: .8em; padding: .5em 1.5em; background: #C9C3A6; color: #555; }
.vieux-nav span { color: #00E; text-decoration: underline; }

.vieux-corps { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5em; padding: 1.5em; }
.vieux-titre { margin-bottom: .8em; color: #B00; font-family: "Comic Sans MS", "Comic Neue", cursive; font-size: 1.7em; font-weight: 700; }
.vieux-gauche p + p { margin-top: .8em; }

.vieux-photo {
  display: grid;
  place-items: center;
  height: 7em;
  border: 2px inset #999;
  background: #CCC;
  color: #777;
  font-size: .9em;
}

.vieux-lien { color: #00E; font-weight: 700; text-decoration: underline; text-align: center; }
.vieux-droite { display: grid; gap: 1em; align-content: start; }
.vieux-encadre { padding: .6em; border: 1px dashed #888; background: #FFFDE8; }
.vieux-encadre b { display: block; color: #1D3466; }
.vieux-compteur { text-align: center; }
.vieux-compteur span { padding: 0 .3em; background: #000; color: #0F0; font-family: monospace; letter-spacing: .1em; }
.vieux-pied { margin: 0 1.5em; padding-top: .8em; border-top: 1px solid #AAA; color: #777; font-size: .85em; text-align: center; }

/* Le nouveau site */
.neuf { height: 100%; padding: 0 4%; background: #0F0F11; color: #C9CACD; font-size: clamp(.4375rem, .25rem + .6vw, .8125rem); line-height: 1.4; }

.neuf-nav {
  display: flex;
  align-items: center;
  gap: 2em;
  padding: 1.6em 0;
  color: #9A9BA0;
}

.neuf-nav b { margin-right: auto; color: #fff; font-size: 1.15em; }
.neuf-nav em { padding: .5em 1em; border-radius: 99px; background: #fff; color: #0F0F11; font-style: normal; font-weight: 700; }

.neuf-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3em; align-items: center; padding: 2em 0 2.5em; }
.neuf-hero small { color: #E8B04B; font-weight: 700; }
.neuf-hero b { display: block; margin: .4em 0 .6em; color: #fff; font-size: 2.6em; line-height: 1.05; letter-spacing: -.02em; }
.neuf-boutons { display: flex; gap: .8em; margin-top: 1.4em; }
.neuf-boutons span { padding: .7em 1.3em; border: 1px solid #3A3A40; border-radius: 99px; color: #fff; font-weight: 700; }
.neuf-boutons .neuf-cta { border-color: #E8B04B; background: #E8B04B; color: #111; }
.neuf-avis { margin-top: 1.2em; }
.neuf-avis span { color: #FBBC04; }

.neuf-photo {
  position: relative;
  aspect-ratio: 4 / 3.4;
  border-radius: 1.2em;
  background:
    linear-gradient(transparent 55%, rgba(0, 0, 0, .7)),
    repeating-linear-gradient(100deg, #3A2E22 0 2.4em, #4A3A2A 2.4em 4.8em);
}

.neuf-photo span { position: absolute; left: 1em; bottom: 1em; color: #fff; font-weight: 700; }
.neuf-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.neuf-cartes p { display: grid; padding: 1.1em 1.2em; border: 1px solid #26262C; border-radius: 1em; background: #16161A; }
.neuf-cartes b { color: #fff; }

/* Le plan des redirections, puis la courbe de la Search Console */
.redir { display: grid; gap: var(--e-4); }
.redir-corps { padding: 1rem 1.125rem 1.25rem; }

.redir-tete,
.redir-ligne {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: .75rem;
  align-items: center;
}

.redir-tete { padding-bottom: .5rem; color: var(--gris-discret); font-size: .6875rem; }
.redir-tete span:last-child { grid-column: 3; }

.redir-ligne { padding: .5rem 0; border-top: 1px solid #222226; }
.redir-ligne code { overflow: hidden; color: var(--gris-texte); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.redir-ligne code:first-child { color: var(--gris-discret); text-decoration: line-through; text-decoration-color: rgba(242, 139, 130, .6); }
.redir-ligne code:last-child { color: var(--blanc); }

.redir-ligne i {
  position: relative;
  padding: .125rem .5rem;
  border-radius: var(--pilule);
  background: rgba(128, 121, 247, .16);
  color: var(--violet);
  font-size: .625rem;
  font-style: normal;
  font-weight: 700;
}

.redir-courbe { width: 85%; justify-self: end; margin-top: -1.5rem; }
.redir-graph { position: relative; height: 8rem; padding: 1rem 1rem .75rem; }
.redir-graph svg { width: 100%; height: 100%; overflow: visible; }
.redir-grille { fill: none; stroke: #24242A; stroke-width: 1; vector-effect: non-scaling-stroke; }
.redir-avant { fill: none; stroke: var(--gris-discret); stroke-width: 2; vector-effect: non-scaling-stroke; }
.redir-apres { fill: none; stroke: var(--violet); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.redir-mise { fill: none; stroke: var(--blanc); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; opacity: .5; }

.redir-label {
  position: absolute;
  left: 50%;
  top: .5rem;
  padding: .125rem .5rem;
  border-radius: var(--pilule);
  background: var(--carte-2);
  color: var(--blanc);
  font-size: .625rem;
  font-weight: 700;
  transform: translateX(-50%);
}

.rf-encart-section { padding-top: 0; }
.rf-encart-section .encart { margin-top: 0; }

@media (prefers-reduced-motion: no-preference) {
  .js .redir-ligne { animation: glisse .5s var(--sortie) calc(.3s + var(--i) * .25s) both; }
  .js .redir-ligne i { animation: monte .4s var(--sortie) calc(.6s + var(--i) * .25s) both; }
  .js .redir-apres { stroke-dasharray: 220; animation: dessine 1.6s var(--sortie) 1.6s both; }
}

@keyframes dessine {
  from { stroke-dashoffset: 220; }
  to { stroke-dashoffset: 0; }
}

/* ==========================================================================
   Fiche Google
   ========================================================================== */

/* Google Maps sur téléphone, thème sombre */
.gm-tel { max-width: 19rem; }
.gm-tel .tl-ecran { display: flex; flex-direction: column; background: #1D2330; }

.gm-recherche {
  position: relative;
  z-index: 2;
  margin: .375rem .75rem 0;
  padding: .625rem 1rem .625rem 2.25rem;
  border-radius: var(--pilule);
  background: #2A2E37;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
  color: var(--blanc);
  font-size: .75rem;
}

.gm-recherche::before {
  content: "";
  position: absolute;
  left: .875rem;
  top: 50%;
  width: .625rem;
  height: .625rem;
  margin-top: -.375rem;
  border: 2px solid #9AA0A6;
  border-radius: 50%;
}

.gm-filtres { position: relative; z-index: 2; display: flex; gap: .375rem; margin: .5rem .75rem 0; }
.gm-filtres span { padding: .25rem .625rem; border-radius: var(--pilule); background: #2A2E37; color: #E8EAED; font-size: .625rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }

.gm-carte { position: absolute; inset: 0; }
.gm-carte svg { width: 100%; height: 100%; }

.gm-epingle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 1.25rem;
  height: 1.25rem;
  margin: -1.25rem 0 0 -.625rem;
  border-radius: 50% 50% 50% 0;
  background: #EA4335;
  transform: rotate(-45deg);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5);
}

.gm-epingle::after { content: ""; position: absolute; inset: .375rem; border-radius: 50%; background: #7A1C14; }
.gm-moi { width: 1.75rem; height: 1.75rem; margin: -1.75rem 0 0 -.875rem; background: var(--violet); z-index: 1; }
.gm-moi::after { background: var(--encre); inset: .5rem; }

.gm-moi span {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: .5rem;
  padding: .125rem .5rem;
  border-radius: .375rem;
  background: rgba(11, 11, 12, .85);
  color: var(--blanc);
  font-size: .625rem;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
  transform: rotate(45deg);
  transform-origin: left top;
}

.gm-fiche {
  position: relative;
  z-index: 2;
  display: grid;
  gap: .1875rem;
  margin-top: auto;
  padding: .5rem 1rem 1rem;
  border-radius: 1.25rem 1.25rem 0 0;
  background: #202124;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .5);
  color: #BDC1C6;
  font-size: .6875rem;
}

.gm-poignee { justify-self: center; width: 2rem; height: .25rem; margin-bottom: .375rem; border-radius: 4px; background: #5F6368; }
.gm-fiche b { color: var(--blanc); font-size: .9375rem; }
.gm-fiche em { color: #81C995; font-style: normal; }
.gm-note { display: flex; align-items: center; gap: .3125rem; }
.gm-note span:first-child { color: #E8EAED; }

.gm-etoiles {
  display: inline-block;
  width: 3.75rem;
  height: .6875rem;
  background: linear-gradient(90deg, #FBBC04 calc(var(--n, 5) / 5 * 100%), #5F6368 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 11'%3E%3Cg%3E%3Cpath id='e' d='M5.5 0l1.6 3.5 3.9.4-2.9 2.6.8 3.8-3.4-2-3.4 2 .8-3.8L0 3.9l3.9-.4z'/%3E%3Cuse href='%23e' x='12'/%3E%3Cuse href='%23e' x='24'/%3E%3Cuse href='%23e' x='36'/%3E%3Cuse href='%23e' x='48'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 11'%3E%3Cg%3E%3Cpath id='e' d='M5.5 0l1.6 3.5 3.9.4-2.9 2.6.8 3.8-3.4-2-3.4 2 .8-3.8L0 3.9l3.9-.4z'/%3E%3Cuse href='%23e' x='12'/%3E%3Cuse href='%23e' x='24'/%3E%3Cuse href='%23e' x='36'/%3E%3Cuse href='%23e' x='48'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.gm-boutons { display: flex; gap: .375rem; margin-top: .375rem; }
.gm-boutons span { padding: .3125rem .625rem; border: 1px solid #5F6368; border-radius: var(--pilule); color: #8AB4F8; font-size: .625rem; font-weight: 600; }
.gm-boutons .gm-appel { border-color: #8AB4F8; background: #8AB4F8; color: #202124; }
.gm-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; margin-top: .5rem; }
.gm-photos i { aspect-ratio: 1; border-radius: .375rem; background: repeating-linear-gradient(120deg, #3A3328 0 6px, #453C2E 6px 12px); }
.gm-photos i:nth-child(2) { background: repeating-linear-gradient(60deg, #2B3540 0 6px, #34404C 6px 12px); }
.gm-photos i:nth-child(3) { background: repeating-linear-gradient(0deg, #3A2E3A 0 6px, #443644 6px 12px); }
.gm-photos i:nth-child(4) { background: #2A2E37; }

/* La fiche avant et après */
.gf { display: grid; gap: var(--e-7); align-items: center; }
.gf-bascule { margin-bottom: var(--e-5); }
.gf-liste { display: grid; gap: var(--e-3); }

.gf-liste li {
  display: grid;
  gap: .125rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--bordure);
  transition: border-color .5s calc(var(--i, 0) * 60ms);
}

.gf-liste b { color: var(--titre); font-weight: var(--gras-bouton); }
.gf-liste span { color: var(--discret); font-size: var(--t-petit); }
[data-gf][data-etat="apres"] .gf-liste li { border-color: var(--violet); }
.gf-liste li:nth-child(2) { --i: 1; } .gf-liste li:nth-child(3) { --i: 2; } .gf-liste li:nth-child(4) { --i: 3; } .gf-liste li:nth-child(5) { --i: 4; } .gf-liste li:nth-child(6) { --i: 5; }

.gf-prix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  margin-top: var(--e-6);
  padding: var(--e-4) var(--e-4) var(--e-4) var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte);
}

.gf-prix p { display: grid; }
.gf-prix strong { color: var(--titre); font-size: 1.75rem; font-weight: var(--gras-titre); letter-spacing: -.02em; }
.gf-prix span { color: var(--discret); font-size: var(--t-petit); }
.gf-prix-clair { display: inline-flex; }
.gf-garantie { margin-top: var(--e-4); color: var(--discret); font-size: var(--t-petit); }

.gf-panneau {
  overflow: hidden;
  border: 1px solid #3C4043;
  border-radius: 1rem;
  background: #202124;
  box-shadow: var(--ombre-fenetre);
  color: #BDC1C6;
  font-family: Arial, sans-serif;
  font-size: .8125rem;
  line-height: 1.45;
}

.gf-photos { position: relative; height: 9rem; background: #2A2E37; }
.gf-photos .gf-vide { position: absolute; inset: 0; display: grid; place-items: center; color: #9AA0A6; }
.gf-photos .gf-plein { position: absolute; inset: 0; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2px; }
.gf-photos .gf-plein i { background: repeating-linear-gradient(110deg, #3A3328 0 14px, #4A3E2E 14px 28px); }
.gf-photos .gf-plein i:nth-child(2) { background: repeating-linear-gradient(60deg, #2B3540 0 10px, #34404C 10px 20px); }
.gf-photos .gf-plein i:nth-child(3) { background: repeating-linear-gradient(0deg, #3A2E3A 0 10px, #443644 10px 20px); }

.gf-corps { padding: 1rem 1.25rem 1.25rem; }
.gf-nom { color: #E8EAED; font-size: 1.375rem; }
.gf-note { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; color: #E8EAED; }
.gf-illustratif { flex-basis: 100%; color: #9AA0A6; font-size: .75rem; }
.gf-cat { color: #9AA0A6; }

.gf-boutons { display: flex; gap: .5rem; margin: .875rem 0; padding-bottom: .875rem; border-bottom: 1px solid #3C4043; }
.gf-boutons span { padding: .375rem .875rem; border: 1px solid #5F6368; border-radius: var(--pilule); color: #8AB4F8; font-size: .75rem; }
.gf-desc { margin-bottom: .875rem; }
.gf-infos { display: grid; gap: .5rem; margin: 0; }
.gf-infos div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .75rem; }
.gf-infos dt { color: #E8EAED; font-weight: 700; }
.gf-infos dd { margin: 0; }
.gf-infos em { color: #81C995; font-style: normal; }
.gf-lien { color: #8AB4F8; }
.gf-manque { color: #F28B82; }

/* Les états : la fiche incomplète, puis la fiche remplie */
.gf-vide, .gf-plein, .gf-plein-flex { transition: opacity .45s var(--sortie); }
[data-gf][data-etat="avant"] .gf-plein,
[data-gf][data-etat="avant"] .gf-plein-flex { display: none; }
[data-gf][data-etat="apres"] .gf-vide { display: none; }
.gf-photos .gf-vide, .gf-photos .gf-plein { display: grid !important; }
[data-gf][data-etat="avant"] .gf-photos .gf-plein { opacity: 0; }
[data-gf][data-etat="apres"] .gf-photos .gf-vide { opacity: 0; }

@media (min-width: 62em) {
  .gf { grid-template-columns: 1fr 1.05fr; gap: var(--e-9); }
}

/* Trois noms qui se rangent en un seul */
.noms {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--e-3);
  padding: var(--e-6) var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background-color: var(--carte);
  background-image: radial-gradient(#26262B 1px, transparent 1px);
  background-size: 18px 18px;
}

.nom-ancien {
  padding: .5rem 1.125rem;
  border: 1px dashed var(--bordure);
  border-radius: var(--pilule);
  color: var(--discret);
  font-weight: var(--gras-bouton);
  text-decoration: line-through;
  text-decoration-color: rgba(128, 121, 247, .6);
}

.noms-fleche { width: 2px; height: 2.5rem; background: linear-gradient(var(--bordure), var(--violet)); }

.nom-final {
  display: inline-flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1.5rem .875rem 1.25rem;
  border-radius: var(--pilule);
  background: var(--violet);
  color: var(--encre);
  font-size: 1.125rem;
  font-weight: var(--gras-titre);
  box-shadow: 0 0 0 8px rgba(128, 121, 247, .15);
}

.nom-final .gm-epingle { position: relative; left: auto; top: auto; margin: 0; background: var(--encre); }
.nom-final .gm-epingle::after { background: var(--violet); }

/* Le calendrier du mois (section claire) */
.cal {
  padding: var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: var(--carte);
  box-shadow: 0 30px 60px -30px rgba(11, 11, 12, .25);
}

.cal-tete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--e-4); }
.cal-tete b { color: var(--titre); font-size: 1.375rem; font-weight: var(--gras-titre); }
.cal-tete span { color: var(--discret); font-size: var(--t-petit); }

.cal-jours,
.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: .375rem; }
.cal-jours { margin-bottom: .375rem; color: var(--discret); font-size: var(--t-mini); font-weight: var(--gras-bouton); text-align: center; }

.cal-grille i {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 3.5rem;
  padding: .375rem;
  border-radius: .5rem;
  background: var(--papier);
  color: var(--ardoise);
  font-size: var(--t-mini);
  font-style: normal;
  font-weight: var(--gras-bouton);
}

.cal-grille .cal-hors { background: none; }
.cal-grille span { margin-top: auto; padding: .125rem .25rem; border-radius: .25rem; font-size: .5625rem; line-height: 1.2; }
.cal-art { background: rgba(91, 82, 230, .12) !important; color: var(--violet-fonce) !important; }
.cal-art span { background: var(--violet-fonce); color: var(--blanc); }
.cal-pub { background: rgba(11, 11, 12, .07) !important; color: var(--encre) !important; }
.cal-pub span { background: var(--encre); color: var(--blanc); }

.cal-pied { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: var(--e-4); color: var(--texte); font-size: var(--t-petit); }
.cal-pied em { margin-left: auto; color: var(--discret); font-style: normal; }
.cal-pastille { width: .75rem; height: .75rem; border-radius: 3px; }
.cal-pastille-art { background: var(--violet-fonce); }
.cal-pastille-pub { margin-left: .75rem; background: var(--encre); }

@media (max-width: 39.99em) {
  .cal-grille i { min-height: 2.75rem; padding: .25rem; }
  .cal-grille span { font-size: 0; height: .375rem; padding: 0; }
}

/* La chaîne fiche, site, appel */
.chaine { display: grid; gap: var(--e-4); counter-reset: chaine; }

.chaine li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--e-2);
  padding: var(--e-6) var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: var(--carte);
  text-align: center;
}

.chaine .tuile { width: 3.5rem; height: 3.5rem; margin-bottom: var(--e-2); border-radius: 1rem; }
.chaine .tuile svg { width: 1.625rem; }
.chaine b { color: var(--titre); font-size: 1.25rem; font-weight: var(--gras-titre); }
.chaine span:not(.tuile) { max-width: 18rem; color: var(--discret); font-size: var(--t-petit); }
.chaine-lien { margin-top: var(--e-6); }

@media (min-width: 62em) {
  .chaine { grid-template-columns: repeat(3, 1fr); gap: var(--e-7); }

  /* La flèche entre deux maillons */
  .chaine li + li::before {
    content: "";
    position: absolute;
    right: calc(100% + .75rem);
    top: 50%;
    width: 1.5rem;
    height: 2px;
    background: var(--violet);
  }

  .chaine li + li::after {
    content: "";
    position: absolute;
    right: calc(100% + .75rem);
    top: 50%;
    width: .5rem;
    height: .5rem;
    margin-top: -.25rem;
    border-top: 2px solid var(--violet);
    border-right: 2px solid var(--violet);
    transform: rotate(45deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js .gm-epingle { animation: tombe .6s var(--sortie) both; }
  .js .gm-epingle:nth-of-type(1) { animation-delay: .5s; }
  .js .gm-epingle:nth-of-type(2) { animation-delay: .7s; }
  .js .gm-moi { animation-delay: 1s; }
  .js .gm-fiche { animation: remonte .8s var(--sortie) 1.4s both; }
  .js .gm-moi span { animation: monte .5s var(--sortie) 1.6s both; }

  .js .nom-ancien { animation: monte .5s var(--sortie) calc(.2s + var(--i) * .2s) both; }
  .js .noms-fleche { animation: descend .6s var(--sortie) 1s both; transform-origin: top; }
  .js .nom-final { animation: monte .6s var(--sortie) 1.5s both; }

  .js .cal.vu .cal-art,
  .js .cal.vu .cal-pub { animation: monte .5s var(--sortie) calc(.4s + var(--k) * .25s) both; }
}

@keyframes tombe {
  from { opacity: 0; translate: 0 -24px; }
}

@keyframes remonte {
  from { transform: translateY(100%); }
}

/* ==========================================================================
   CRM
   ========================================================================== */

/* Le tableau de suivi du hero, manipulable */
.kb-cadre { position: relative; max-width: 68rem; margin-inline: auto; }

.kb-astuce {
  position: absolute;
  top: -1.25rem;
  right: 2rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4375rem .875rem;
  border-radius: var(--pilule);
  background: var(--violet);
  color: var(--encre);
  font-size: var(--t-mini);
  font-weight: var(--gras-bouton);
  box-shadow: 0 10px 30px -8px rgba(128, 121, 247, .6);
  transition: opacity .4s, transform .4s var(--sortie);
}

.kb-astuce span { width: .875rem; height: .875rem; border: 2px solid var(--encre); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.kb-cadre.touche .kb-astuce { opacity: 0; transform: translateY(-6px); pointer-events: none; }

.kb-app { font-size: .8125rem; }
.kb { display: flex; min-height: 26rem; }

.kb-nav {
  display: none;
  flex-direction: column;
  gap: .25rem;
  width: 10.5rem;
  padding: 1rem .75rem;
  border-right: 1px solid var(--trait-sombre);
  background: #161618;
}

.kb-nav b {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: 0 0 1rem .25rem;
  border-radius: .5rem;
  background: var(--violet);
  color: var(--encre);
  font-size: .6875rem;
}

.kb-nav span { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; border-radius: .5rem; color: var(--gris-discret); }
.kb-nav .actif { background: #222226; color: var(--blanc); }
.kb-nav i { width: .875rem; height: .875rem; border: 1.5px solid currentColor; border-radius: 3px; }
.kb-nav .kb-ic-contacts { border-radius: 50%; }
.kb-nav .kb-ic-agenda { border-top-width: 3px; }

.kb-corps { flex: 1; min-width: 0; padding: 1rem; }
.kb-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.kb-tete p:first-child { display: flex; align-items: baseline; gap: .625rem; }
.kb-tete b { color: var(--blanc); font-size: 1rem; }
.kb-tete span { color: var(--gris-discret); font-size: .75rem; }

.kb-signe {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .375rem .75rem;
  border: 1px solid rgba(111, 207, 151, .35);
  border-radius: var(--pilule);
  background: rgba(111, 207, 151, .08);
  color: var(--gris-texte);
  font-size: .75rem;
}

.kb-signe b { color: #6FCF97; font-size: .875rem; font-variant-numeric: tabular-nums; }

.kb-colonnes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(11rem, 1fr);
  gap: .75rem;
  overflow-x: auto;
  padding-bottom: .25rem;
}

.kb-col {
  display: flex;
  flex-direction: column;
  min-height: 18rem;
  padding: .625rem;
  border: 1px solid transparent;
  border-radius: .75rem;
  background: #18181B;
  transition: border-color .2s, background-color .2s;
}

.kb-col.survol { border-color: var(--c); background: color-mix(in srgb, var(--c) 8%, #18181B); }

.kb-col-tete {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .625rem;
  padding: 0 .25rem;
  color: var(--gris-texte);
  font-size: .75rem;
  font-weight: 700;
}

.kb-col-tete::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c); }
.kb-col-tete span { margin-left: auto; padding: 0 .4375rem; border-radius: var(--pilule); background: #26262B; color: var(--gris-discret); font-size: .6875rem; }
.kb-liste { display: grid; align-content: start; gap: .5rem; flex: 1; }

.kb-carte {
  position: relative;
  display: grid;
  gap: .125rem;
  width: 100%;
  padding: .625rem .75rem;
  border: 1px solid #2E2E34;
  border-radius: .625rem;
  background: #1F1F23;
  color: var(--gris-discret);
  font: inherit;
  font-size: .75rem;
  text-align: left;
  cursor: grab;
  touch-action: pan-x pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: border-color .2s, box-shadow .2s, transform .2s var(--sortie);
}

.kb-carte:hover { border-color: #44444C; transform: translateY(-1px); }
.kb-carte:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.kb-carte b { color: var(--blanc); font-size: .8125rem; }
.kb-carte small { display: flex; align-items: center; justify-content: space-between; margin-top: .375rem; color: var(--gris-texte); font-size: .75rem; font-weight: 700; }
.kb-carte .ui-av { width: 1.375rem; height: 1.375rem; font-size: .5625rem; }

.kb-source,
.kb-relance {
  justify-self: start;
  margin-bottom: .25rem;
  padding: .0625rem .4375rem;
  border-radius: var(--pilule);
  background: rgba(128, 121, 247, .16);
  color: var(--violet);
  font-size: .625rem;
  font-style: normal;
  font-weight: 700;
}

.kb-relance { background: rgba(242, 139, 130, .14); color: #F28B82; }
.kb-col-signe .kb-carte { border-color: rgba(111, 207, 151, .25); }

/* La carte qu'on tient : elle suit le doigt */
.kb-carte.tenue { position: fixed; z-index: 100; width: var(--l); cursor: grabbing; transform: rotate(2.5deg) scale(1.03); box-shadow: 0 24px 40px -10px rgba(0, 0, 0, .8); pointer-events: none; }
.kb-fantome { border: 1.5px dashed #3A3A42; border-radius: .625rem; background: rgba(128, 121, 247, .05); }
.kb-carte.posee { animation: pose .5s var(--sortie); }
.kb-carte.prise { border-color: var(--violet); transform: scale(1.03); box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .7); }
.kb-astuce-doigt { display: none; }
@media (hover: none) { .kb-astuce-souris { display: none; } .kb-astuce-doigt { display: inline; } }

@keyframes pose {
  0% { box-shadow: 0 0 0 0 rgba(128, 121, 247, .6); }
  100% { box-shadow: 0 0 0 10px rgba(128, 121, 247, 0); }
}

@media (min-width: 62em) {
  .kb-nav { display: flex; }
  .kb-corps { padding: 1.25rem 1.5rem; }
  .kb-colonnes { grid-auto-columns: 1fr; overflow: visible; }
}

/* Excel avant, fiche CRM après */
.crm-ba .ba-vue { aspect-ratio: 5 / 4; }

.xls { height: 100%; background: #FFF; color: #222; font-size: .75rem; }
.xls-barre { display: flex; align-items: center; gap: .5rem; padding: .625rem .875rem; background: #217346; color: #fff; font-size: .75rem; }
.xls-barre b { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 3px; background: #fff; color: #217346; font-size: .6875rem; }

.xls-grille { display: grid; grid-template-columns: 1.75rem repeat(4, 1fr); }
.xls-grille > * { min-height: 2.25rem; padding: .5rem .5rem; border-right: 1px solid #E1E1E1; border-bottom: 1px solid #E1E1E1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.xls-grille i { display: grid; place-items: center; padding: 0; background: #F3F3F3; color: #777; font-style: normal; font-size: .6875rem; }
.xls-th { font-weight: 700; background: #FAFAFA; }
.xls-jaune { background: #FFF3B0; }
.xls-err { color: #C00; font-weight: 700; }
.xls-rouge { background: #FFC7CE; color: #9C0006; font-weight: 700; }

.fiche-crm { height: 100%; padding: 1.25rem; background: #121214; color: var(--gris-texte); font-size: .8125rem; }

.fc-tete { display: flex; align-items: center; gap: .75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--trait-sombre); }
.fc-tete .ui-av { width: 2.5rem; height: 2.5rem; font-size: .75rem; }
.fc-tete > span { display: grid; flex: 1; color: var(--gris-discret); font-size: .75rem; }
.fc-tete b { color: var(--blanc); font-size: .9375rem; }

.fc-infos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 1rem 0; }
.fc-infos div { padding: .625rem .75rem; border-radius: .5rem; background: #1A1A1E; }
.fc-infos dt { color: var(--gris-discret); font-size: .6875rem; }
.fc-infos dd { margin: .125rem 0 0; color: var(--blanc); font-weight: 600; }

.fc-titre { margin-bottom: .5rem; color: var(--gris-discret); font-size: .6875rem; font-weight: 700; }
.fc-histo { position: relative; display: grid; gap: .625rem; padding-left: 1.25rem; }
.fc-histo::before { content: ""; position: absolute; left: .3125rem; top: .375rem; bottom: .375rem; width: 2px; background: var(--trait-sombre); }
.fc-histo li { position: relative; display: grid; }
.fc-histo li::before { content: ""; position: absolute; left: -1.25rem; top: .3125rem; width: .75rem; height: .75rem; border: 2px solid #121214; border-radius: 50%; background: var(--gris-discret); }
.fc-histo b { color: var(--blanc); font-weight: 600; }
.fc-histo span { color: var(--gris-discret); font-size: .6875rem; }
.fc-histo .fc-futur::before { background: var(--violet); box-shadow: 0 0 0 3px rgba(128, 121, 247, .25); }
.fc-histo .fc-futur b { color: var(--violet); }

/* Les cinq onglets du suivi */
.suivre .pilules { margin-bottom: var(--e-6); }

.sv-panneau {
  display: grid;
  gap: var(--e-6);
  align-items: center;
  padding: var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: var(--carte);
  text-align: left;
}

.sv-texte h3 { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.875rem); }
.sv-texte p { margin-top: var(--e-3); }
.sv-ui { font-size: .75rem; }

.sv-table { padding: .75rem 1rem 1rem; }
.sv-table p { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr; gap: .75rem; align-items: center; padding: .625rem 0; border-top: 1px solid #222226; }
.sv-table p > span:first-child { display: flex; align-items: center; gap: .5rem; color: var(--blanc); font-weight: 600; }
.sv-table .sv-th { border: 0; color: var(--gris-discret); font-size: .6875rem; }
.sv-table .ui-tag { justify-self: start; }
.sv-fiche { padding: 1rem 1.125rem; }
.sv-fiche .fc-infos { margin-bottom: 0; }

.sv-barres { display: grid; gap: .875rem; padding: 1.25rem 1.125rem; }
.sv-barres p { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: .75rem; align-items: center; }
.sv-barres i { height: .75rem; border-radius: var(--pilule); background: linear-gradient(90deg, var(--c) var(--w), #222226 var(--w)); }
.sv-barres b { color: var(--blanc); font-variant-numeric: tabular-nums; }

.sv-relances { display: grid; padding: .5rem 1rem 1rem; }
.sv-relances p { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; padding: .625rem 0; border-bottom: 1px solid #222226; }
.sv-relances i { width: .625rem; height: .625rem; border-radius: 50%; border: 2px solid var(--gris-discret); }
.sv-relances .sv-auto { border-color: var(--violet); background: var(--violet); }
.sv-relances span { display: grid; color: var(--gris-discret); font-size: .6875rem; }
.sv-relances b { color: var(--blanc); font-size: .8125rem; }
.sv-relances time { color: var(--gris-texte); font-size: .6875rem; }
.sv-histo { margin: 1rem 1.125rem 1.25rem; }

.js .sv-panneau:not([hidden]) .sv-ui { animation: monte .5s var(--sortie); }

@media (min-width: 62em) {
  .sv-panneau { grid-template-columns: 1fr 1.2fr; padding: var(--e-7); gap: var(--e-8); }
}

/* Sur mesure ou logiciel du marché */
.compare {
  overflow: hidden;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: var(--carte);
}

.compare dl { margin: 0; }

.compare-ligne {
  display: grid;
  gap: .375rem;
  padding: var(--e-4) var(--e-5);
  border-top: 1px solid var(--bordure);
}

.compare-tete { display: none; border-top: 0; }
.compare dt { color: var(--titre); font-weight: var(--gras-bouton); }
.compare dd { margin: 0; color: var(--discret); font-size: var(--t-petit); }
.compare dd::before { content: "Logiciel du marché : "; color: var(--discret); font-weight: var(--gras-bouton); }
.compare dd.compare-moi { color: var(--titre); }
.compare dd.compare-moi::before { content: "Sur mesure : "; color: var(--accent-texte); }

@media (min-width: 48em) {
  .compare-ligne { grid-template-columns: 1fr 1.4fr 1.4fr; gap: var(--e-5); align-items: center; padding: var(--e-4) var(--e-6); }
  .compare-tete { display: grid; padding-block: var(--e-5); background: var(--carte-haute); }
  .compare-tete b { color: var(--discret); font-size: var(--t-petit); }
  .compare-tete .compare-moi { color: var(--accent-texte); }
  .compare dd::before,
  .compare dd.compare-moi::before { content: none; }
  .compare dd.compare-moi { padding-left: var(--e-4); border-left: 2px solid var(--violet); }
}

/* L'offre CRM, seule et en grand */
.crm-offre { max-width: 46rem; margin-inline: auto; }
.crm-offre .offre { padding: var(--e-7) var(--e-6); }
.crm-prix { display: grid; justify-items: start; gap: .25rem; }
.crm-ou { display: flex; align-items: center; gap: var(--e-3); width: 100%; color: var(--discret); font-size: var(--t-petit); font-weight: var(--gras-bouton); }
.crm-ou::after { content: ""; flex: 1; border-top: 1px solid var(--bordure); }
.crm-coches { display: grid; gap: var(--e-3); }

@media (min-width: 48em) { .crm-coches { grid-template-columns: 1fr 1fr; } }

/* La journée d'un collègue dans le CRM */
.crm-collegue { align-self: center; }
.cc-corps { padding: 1.25rem; font-size: .8125rem; }
.cc-bonjour { color: var(--blanc); font-size: 1.25rem; font-weight: 700; }
.cc-sous { color: var(--gris-discret); }
.cc-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: .625rem; margin: 1rem 0 1.25rem; }
.cc-chiffres p { display: grid; padding: .75rem; border-radius: .625rem; background: #1A1A1E; color: var(--gris-discret); font-size: .6875rem; }
.cc-chiffres b { color: var(--blanc); font-size: 1.5rem; line-height: 1.1; }
.cc-chiffres p:first-child b { color: var(--violet); }
.cc-titre { margin-bottom: .5rem; color: var(--gris-discret); font-size: .6875rem; font-weight: 700; }

.cc-tache {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem .75rem;
  border-radius: .5rem;
  color: var(--blanc);
}

.cc-tache + .cc-tache { margin-top: .25rem; }
.cc-tache:nth-of-type(odd) { background: #19191C; }
.cc-tache i { width: 1rem; height: 1rem; border: 2px solid var(--gris-discret); border-radius: .3rem; }
.cc-tache span { margin-left: auto; color: var(--gris-discret); font-size: .6875rem; }
.cc-fait { color: var(--gris-discret); text-decoration: line-through; }
.cc-fait i { border-color: var(--violet); background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%230B0B0C' stroke-width='1.8'/%3E%3C/svg%3E") center / 80% no-repeat; }

@media (max-width: 61.99em) { .crm-collegue { display: none; } }

/* ==========================================================================
   Automatisation
   ========================================================================== */

/* Le scénario du hero : quatre étapes, un journal qui se remplit */
.sc { max-width: 68rem; margin-inline: auto; font-size: .8125rem; }
.sc-corps { display: grid; }

.sc-toile {
  padding: 1.25rem;
  background-color: #141416;
  background-image: radial-gradient(#26262B 1px, transparent 1px);
  background-size: 18px 18px;
}

.sc-titre { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; color: var(--blanc); }
.sc-etat { display: inline-flex; align-items: center; gap: .375rem; color: #6FCF97; font-size: .75rem; font-weight: 700; }
.sc-etat::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(111, 207, 151, .2); }

.sc-noeuds { display: grid; gap: 1.25rem; }

.sc-n {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem .875rem;
  border: 1px solid #2E2E34;
  border-radius: .75rem;
  background: #1C1C20;
  transition: border-color .4s, box-shadow .4s;
}

/* Le fil entre deux étapes */
.sc-n + .sc-n::before {
  content: "";
  position: absolute;
  left: 1.875rem;
  bottom: 100%;
  width: 2px;
  height: 1.25rem;
  background: #34343A;
}

.sc-n span { display: grid; line-height: 1.3; }
.sc-n small { color: var(--gris-discret); font-size: .6875rem; }
.sc-n b { color: var(--blanc); font-weight: 600; }

.sc-ic {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .625rem;
  background: #26262C;
}

.sc-ic::before { content: ""; width: 1rem; height: 1rem; border: 2px solid var(--gris-texte); border-radius: .25rem; }
.sc-ic-site::before { border-top-width: 5px; }
.sc-ic-crm::before { border-radius: 50%; }
.sc-ic-tab::before { border-left-width: 5px; }
.sc-ic-cherche::before { width: .75rem; height: .75rem; border-radius: 50%; transform: translate(-2px, -2px); }
.sc-ic-cherche::after { content: ""; position: absolute; left: 1.25rem; top: 1.35rem; width: .45rem; height: 2px; border-radius: 1px; background: var(--gris-texte); transform: rotate(45deg); }

.sc-journal { padding: 1.25rem; border-top: 1px solid var(--trait-sombre); background: #121214; }
.sc-journal-titre { margin-bottom: .75rem; color: var(--gris-discret); font-size: .6875rem; font-weight: 700; }
.sc-ligne { display: flex; align-items: center; gap: .625rem; padding: .5rem 0; border-bottom: 1px solid #1E1E22; color: var(--gris-texte); }
.sc-ligne i { width: .875rem; height: .875rem; border-radius: 50%; background: #6FCF97 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%230B0B0C' stroke-width='1.8'/%3E%3C/svg%3E") center / 75% no-repeat; }
.sc-ligne time { margin-left: auto; color: var(--gris-discret); font-family: ui-monospace, monospace; font-size: .6875rem; }

.sc-fin {
  display: grid;
  margin-top: 1rem;
  padding: .75rem .875rem;
  border-radius: .625rem;
  background: rgba(128, 121, 247, .12);
  color: var(--gris-texte);
  font-size: .75rem;
}

.sc-fin b { color: var(--blanc); font-size: .8125rem; }

@media (min-width: 62em) {
  .sc-corps { grid-template-columns: 1.7fr 1fr; }
  .sc-toile { padding: 1.75rem; }
  .sc-noeuds { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  .sc-n { flex-direction: column; align-items: flex-start; min-height: 8.5rem; }
  .sc-n + .sc-n::before { left: auto; right: 100%; bottom: auto; top: 2.25rem; width: 1.5rem; height: 2px; }
  .sc-journal { border-top: 0; border-left: 1px solid var(--trait-sombre); }
}

/* Les quatre pertes de temps */
.pertes { display: grid; gap: var(--e-3); margin-bottom: var(--e-7); }

.pertes li {
  display: grid;
  gap: var(--e-2);
  padding: var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte);
}

.pertes .tuile { margin-bottom: var(--e-2); }
.pertes b { color: var(--titre); font-weight: var(--gras-bouton); }
.pertes span:not(.tuile) { color: var(--discret); font-size: var(--t-petit); }

@media (min-width: 40em) { .pertes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75em) { .pertes { grid-template-columns: repeat(4, 1fr); } }

/* Ce que coûte une tâche */
.cout-titre { color: var(--titre); font-size: 1.375rem; font-weight: var(--gras-titre); letter-spacing: -.01em; }
.cout-label { color: var(--texte); font-weight: var(--gras-bouton); }
.cout-jours { color: var(--texte); }
.cout-jours b { color: var(--titre); }
.cout-note { color: var(--discret); font-size: var(--t-mini); }

.cout-semaines { display: grid; grid-template-rows: repeat(5, auto); grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; }
.cout-legende { margin-top: -.5rem; color: var(--discret); font-size: var(--t-mini); }
.cout-semaines i { aspect-ratio: 1 / 2.2; border-radius: 1px; background: var(--bordure); transition: background-color .3s; }
.cout-semaines i.plein { background: var(--violet); }

/* Les cinq exemples : le rail à gauche, l'exemple à droite */
.ex { display: grid; gap: var(--e-5); }

.ex-onglets { display: flex; gap: var(--e-2); overflow-x: auto; scrollbar-width: none; }
.ex-onglets::-webkit-scrollbar { display: none; }

.ex-onglets button {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex: none;
  padding: .875rem 1.125rem;
  overflow: hidden;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte);
  color: var(--discret);
  font: inherit;
  font-weight: var(--gras-bouton);
  text-align: left;
  cursor: pointer;
  transition: border-color .3s, color .3s, background-color .3s;
}

.ex-onglets button:hover { color: var(--titre); }
.ex-onglets [aria-selected="true"] { border-color: var(--violet); color: var(--titre); background: var(--carte-haute); }
.ex-num { color: var(--accent-texte); font-size: var(--t-mini); font-variant-numeric: tabular-nums; }

.ex-temps {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--violet);
  transform: scaleX(0);
  transform-origin: left;
}

.ex [aria-selected="false"] .ex-temps { visibility: hidden; }

.ex-panneau {
  display: grid;
  gap: var(--e-6);
  align-items: center;
  padding: var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: var(--carte);
}

.ex-visuel {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 20rem;
  padding: var(--e-5);
  border-radius: var(--rayon);
  background-color: var(--carte-2);
  background-image: radial-gradient(#2E2E34 1px, transparent 1px);
  background-size: 18px 18px;
  overflow: hidden;
}

.ex-texte h3 { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.875rem); }
.ex-texte p { margin-top: var(--e-3); }
.ex-metiers { padding: .5rem .875rem; border-radius: var(--rayon-s); background: var(--carte-haute); border: 1px solid var(--bordure); color: var(--discret); font-size: var(--t-petit); }
.ex-metiers b { color: var(--titre); }

@media (min-width: 62em) {
  .ex { grid-template-columns: 19rem 1fr; gap: var(--e-6); align-items: stretch; }
  .ex-onglets { flex-direction: column; overflow: visible; }
  .ex-onglets button { padding: 1.125rem 1.25rem; }
  .ex-panneau { grid-template-columns: 1.1fr 1fr; height: 100%; padding: var(--e-6); }
}

/* 01 · une saisie, trois documents */
.ex-docs { width: min(100%, 17rem); font-size: .75rem; }
.exd-corps { display: grid; gap: .5rem; padding: .875rem 1rem 1rem; }
.exd-champ { display: grid; padding: .5rem .625rem; border: 1px solid #2E2E34; border-radius: .5rem; }
.exd-champ span { color: var(--gris-discret); font-size: .625rem; }
.exd-champ b { color: var(--blanc); font-weight: 600; }
.exd-sorties { display: grid; gap: .5rem; width: min(100%, 17rem); margin-top: 1rem; }

.exd-sorties p {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .75rem;
  border: 1px solid #34343A;
  border-radius: .625rem;
  background: #1C1C20;
  color: var(--blanc);
  font-size: .75rem;
}

.exd-sorties i,
.exl-fichier i { display: grid; place-items: center; padding: .25rem .375rem; border-radius: .25rem; background: #E5484D; color: #fff; font-size: .5625rem; font-style: normal; font-weight: 700; }

/* 01 · la liste de prospects */
.exp { width: min(100%, 24rem); font-size: .75rem; }
.exp-corps { display: grid; gap: .375rem; padding: .875rem 1rem 1rem; }
.exp-criteres { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .5rem; }
.exp-criteres span { padding: .3rem .7rem; border: 1px solid var(--violet); border-radius: var(--pilule); background: rgba(128, 121, 247, .12); color: #ABA6FF; font-size: .6875rem; font-weight: 700; }

.exp-ligne {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: .5rem;
  align-items: center;
  padding: .5rem .625rem;
  border-radius: .5rem;
  background: #1C1C20;
  color: var(--gris-texte);
}

.exp-ligne b { display: grid; color: var(--blanc); font-weight: 600; line-height: 1.25; }
.exp-ligne small { color: var(--gris-discret); font-size: .625rem; font-weight: 400; }
.exp-ligne span:nth-child(3) { font-family: ui-monospace, monospace; font-size: .6875rem; white-space: nowrap; }
.exp-entete { padding-block: 0 .125rem; background: none; color: var(--gris-discret); font-size: .625rem; font-weight: 700; }
.exp-entete span:nth-child(3) { font-family: inherit; font-size: inherit; }
.exp-deja { opacity: .45; }
.exp-deja span { grid-column: span 2; font-style: italic; }
.exp-pied { display: grid; margin-top: .375rem; padding: .625rem .75rem; border-radius: .625rem; background: rgba(111, 207, 151, .1); color: var(--gris-texte); font-size: .6875rem; }
.exp-pied b { color: #6FCF97; font-size: .75rem; }

@media (max-width: 29.99em) {
  .exp-ligne { grid-template-columns: 1.4fr 1fr; }
  .exp-ligne > span:nth-child(2):not(:last-child) { display: none; }
  .exp-deja span { grid-column: auto; }
}

/* 02 · la fiche avant le rendez-vous */
.exf { width: min(100%, 21rem); font-size: .75rem; }
.exf-corps { display: grid; gap: .25rem; padding: 1rem 1.125rem 1.125rem; }
.exf-nom { display: grid; margin-bottom: .375rem; color: var(--gris-discret); font-size: .6875rem; }
.exf-nom b { color: var(--blanc); font-size: 1rem; font-weight: 700; }
.exf-ligne { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid #222226; color: var(--gris-discret); }
.exf-ligne b { color: var(--blanc); font-weight: 600; text-align: right; }
.exf-ligne i { color: #FBBC04; font-style: normal; }
.exf-actu { display: grid; margin-top: .5rem; padding: .625rem .75rem; border-left: 2px solid var(--violet); border-radius: 0 .5rem .5rem 0; background: #1A1930; color: var(--gris-texte); }
.exf-actu b { color: #ABA6FF; font-size: .6875rem; }

/* 03 · le résumé de veille du lundi */
.exv { width: min(100%, 22rem); font-size: .75rem; }
.exv-corps { display: grid; gap: .625rem; padding: 1rem 1.125rem 1.25rem; }
.exv-titre { color: var(--blanc); font-size: .9375rem; font-weight: 700; }
.exv-groupe { padding: .625rem .75rem; border: 1px solid #2E2E34; border-radius: .625rem; background: #1C1C20; }
.exv-tete { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .25rem; color: var(--gris-discret); font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.exv-tete b { color: #ABA6FF; }
.exv-item { display: grid; color: var(--blanc); }
.exv-item em { color: #E8B04B; font-size: .6875rem; font-style: normal; }

/* 04 · le document lu, recopié et rangé */
.exl { display: grid; gap: .75rem; width: min(100%, 21rem); font-size: .75rem; }
.exl-fichier { display: flex; align-items: center; gap: .625rem; padding: .625rem .75rem; border: 1px solid #34343A; border-radius: .625rem; background: #1C1C20; color: var(--gris-discret); font-size: .6875rem; }
.exl-fichier span { display: grid; }
.exl-fichier b { color: var(--blanc); font-size: .75rem; font-weight: 600; }
.exl-ligne { display: grid; grid-template-columns: 1.5fr .8fr 1fr; gap: .5rem; padding: .5rem 1rem; border-top: 1px solid #222226; color: var(--gris-texte); }
.exl-entete { border-top: 0; color: var(--gris-discret); font-size: .625rem; font-weight: 700; }
.exl-neuf { background: rgba(128, 121, 247, .14); color: var(--blanc); font-weight: 600; }
.exl-range { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: .625rem; background: rgba(111, 207, 151, .1); color: #6FCF97; font-size: .6875rem; font-weight: 700; }
.exl-range i { flex: none; width: .875rem; height: .875rem; border-radius: 50%; background: #6FCF97 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%230B0B0C' stroke-width='1.8'/%3E%3C/svg%3E") center / 75% no-repeat; }

/* Le diagnostic d'abord : un bandeau et le rendu écrit */
.diag-bandeau {
  position: relative;
  display: grid;
  gap: var(--e-7);
  align-items: center;
  padding: clamp(2rem, 1.5rem + 3vw, 4rem);
  border: 1px solid rgba(128, 121, 247, .4);
  border-radius: var(--rayon-l);
  background:
    radial-gradient(40rem 24rem at 100% 0%, rgba(128, 121, 247, .14), transparent 60%),
    var(--carte);
  overflow: hidden;
}

.diag-bandeau-texte > p:not(.sur-titre) { margin-top: var(--e-4); font-size: var(--t-chapo); line-height: 1.5; }
.diag-bandeau-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-5); margin-top: var(--e-6); }
.diag-bandeau-actions p { display: grid; }
.diag-bandeau-actions b { color: var(--titre); }
.diag-bandeau-actions span { color: var(--discret); font-size: var(--t-petit); }

.diag-doc {
  position: relative;
  display: grid;
  gap: .25rem;
  padding: 1.5rem;
  border-radius: .75rem;
  background: #F4F3EF;
  color: #4A4A4F;
  font-size: .8125rem;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
  transform: rotate(2deg);
}

.dd-tete { display: grid; margin-bottom: .75rem; padding-bottom: .75rem; border-bottom: 2px solid #0B0B0C; }
.dd-tete b { color: #0B0B0C; font-size: 1.25rem; }
.dd-tete span { color: #5F5E5A; }
.dd-ligne { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid #DDD9CF; }
.dd-ligne b { color: #0B0B0C; text-align: right; }
.dd-oui { color: var(--violet-fonce) !important; }

.dd-tampon {
  position: absolute;
  right: 1.25rem;
  bottom: -.875rem;
  padding: .25rem .75rem;
  border: 2px solid var(--violet-fonce);
  border-radius: .375rem;
  background: #F4F3EF;
  color: var(--violet-fonce);
  font-weight: 800;
  transform: rotate(-6deg);
}

@media (min-width: 62em) {
  .diag-bandeau { grid-template-columns: 1.4fr 1fr; gap: var(--e-8); }
}

@media (prefers-reduced-motion: no-preference) {
  .js .sc-n { animation: allume-noeud .5s var(--sortie) calc(.5s + var(--i) * .7s) both; }
  .js .sc-ligne { animation: glisse .45s var(--sortie) calc(.7s + var(--i) * .7s) both; }
  .js .sc-fin { animation: monte .6s var(--sortie) 3.5s both; }

  .ex.auto [aria-selected="true"] .ex-temps { animation: temps var(--auto, 7s) linear both; }
  .ex.pause .ex-temps,
  .ex:hover .ex-temps,
  .ex:focus-within .ex-temps { animation-play-state: paused; }
  .js .ex-panneau:not([hidden]) .ex-visuel > * { animation: monte .55s var(--sortie) both; }
  .js .ex-panneau:not([hidden]) .exd-sorties p { animation: glisse .45s var(--sortie) calc(.4s + var(--i) * .2s) both; }
  .js .ex-panneau:not([hidden]) .exp-ligne[style] { animation: glisse .45s var(--sortie) calc(.3s + var(--i) * .2s) both; }
  .js .ex-panneau:not([hidden]) .exp-pied { animation: monte .5s var(--sortie) 1.2s both; }
  .js .ex-panneau:not([hidden]) .exf-ligne,
  .js .ex-panneau:not([hidden]) .exf-actu { animation: glisse .45s var(--sortie) calc(.3s + var(--i) * .15s) both; }
  .js .ex-panneau:not([hidden]) .exv-groupe { animation: monte .45s var(--sortie) calc(.3s + var(--i) * .25s) both; }
  .js .ex-panneau:not([hidden]) .exl-neuf { animation: glisse .45s var(--sortie) .7s both; }
  .js .ex-panneau:not([hidden]) .exl-range { animation: monte .45s var(--sortie) 1.1s both; }
}

@keyframes allume-noeud {
  0% { opacity: .35; }
  60% { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(128, 121, 247, .2); opacity: 1; }
  100% { border-color: #3A3A42; box-shadow: none; opacity: 1; }
}

/* ==========================================================================
   Diagnostic
   ========================================================================== */
.h2-like {
  color: var(--titre);
  font-size: var(--t-h2);
  font-weight: var(--gras-titre);
  line-height: var(--interligne-titre);
  letter-spacing: var(--approche-titre);
  text-wrap: balance;
}

/* Le rendu du hero : trois feuilles, une carte du processus */
.rapport { position: relative; max-width: 30rem; margin-inline: auto; padding: 1rem 1rem 2rem; }

.rapport-feuille {
  border-radius: .75rem;
  background: #F4F3EF;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8);
}

.rapport-f3,
.rapport-f2 { position: absolute; inset: 1rem 1rem 2rem; }
.rapport-f3 { background: #CFCBC1; transform: rotate(-7deg) translate(-12px, 10px); }
.rapport-f2 { background: #E2DFD6; transform: rotate(-3.5deg) translate(-6px, 4px); }

.rapport-f1 {
  position: relative;
  padding: 1.5rem 1.5rem 1.75rem;
  color: #4A4A4F;
  font-size: .8125rem;
  line-height: 1.4;
  transform: rotate(1.5deg);
}

.rp-tete { display: grid; padding-bottom: .75rem; border-bottom: 2px solid #0B0B0C; }
.rp-tete b { color: #0B0B0C; font-size: 1.25rem; }
.rp-tete span { color: #5F5E5A; }
.rp-label { margin: 1rem 0 .625rem; color: #5F5E5A; font-size: .6875rem; font-weight: 700; }

.rp-carte { display: grid; gap: .5rem; }

.rp-carte li {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .75rem;
  border: 1px solid #CDC9C0;
  border-radius: .5rem;
  background: #FFF;
}

.rp-carte li + li::before { content: ""; position: absolute; left: 1.25rem; bottom: 100%; width: 2px; height: .5rem; background: #CDC9C0; }
.rp-carte b { color: #0B0B0C; font-weight: 700; }
.rp-carte span { color: #5F5E5A; font-size: .75rem; text-align: right; }
.rp-bouchon { border-color: #E5484D !important; background: #FFF2F1 !important; }
.rp-bouchon span { color: #C62A2F; font-weight: 700; }

.rp-reco {
  display: grid;
  margin-top: 1rem;
  padding: .75rem .875rem;
  border-left: 3px solid var(--violet-fonce);
  border-radius: .375rem;
  background: rgba(91, 82, 230, .08);
}

.rp-reco b { color: var(--violet-fonce); }

.rp-tampon {
  position: absolute;
  right: 0;
  bottom: .5rem;
  padding: .25rem .75rem;
  border: 2px solid var(--violet);
  border-radius: .375rem;
  background: var(--encre);
  color: var(--violet);
  font-weight: 800;
  transform: rotate(-6deg);
}

/* Les deux formats, et le format conseillé */
.diag-offres .offre-nom { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); line-height: 1.2; }
.diag-offres .offre { transition: border-color .4s, box-shadow .4s, transform .4s var(--sortie); }

.diag-offres .offre.conseille {
  border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(128, 121, 247, .15);
  transform: translateY(-4px);
}

.diag-offres .offre.conseille .btn-contour { border-color: var(--violet); background: var(--violet); color: var(--encre); }

.choix {
  display: grid;
  gap: var(--e-5);
  margin-top: var(--e-5);
  padding: var(--e-5);
  border: 1px dashed var(--bordure);
  border-radius: var(--rayon-l);
}

.choix-titre { color: var(--titre); font-size: 1.25rem; font-weight: var(--gras-titre); }

.choix-reponse {
  padding: .875rem 1.125rem;
  border-radius: var(--rayon-s);
  background: rgba(128, 121, 247, .12);
  color: var(--titre);
  font-weight: var(--gras-bouton);
}

@media (min-width: 62em) {
  .choix { grid-template-columns: auto 1fr 1fr; align-items: start; padding: var(--e-6); }
  .choix-reponse { grid-column: 1 / -1; }
}

/* Les pages du rendu */
.doc { display: grid; min-width: 0; }
.doc-onglets { justify-content: safe center; }
.doc-page { justify-self: center; }
.doc-legende { text-align: center; }

.doc-page {
  width: 100%;
  max-width: 30rem;
  min-height: 22rem;
  padding: 1.75rem 1.75rem 2rem;
  border-radius: .875rem;
  background: #F4F3EF;
  color: #4A4A4F;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8);
}

.doc-num { color: #5F5E5A; font-size: var(--t-mini); font-weight: 700; }
.doc-page h3 { margin: .25rem 0 1rem; padding-bottom: .75rem; border-bottom: 2px solid #0B0B0C; color: #0B0B0C; font-size: 1.375rem; }
.doc-liste { display: grid; gap: .75rem; font-size: .9375rem; }
.doc-liste li { position: relative; padding-left: 1.25rem; }
.doc-liste li::before { content: ""; position: absolute; left: 0; top: .6em; width: .5rem; height: 2px; background: var(--violet-fonce); }
.doc-reco b { color: var(--violet-fonce); }

.doc-barres { display: grid; gap: 1rem; }
.doc-barres p { display: grid; grid-template-columns: 1fr auto; gap: .375rem 1rem; }
.doc-barres span { color: #0B0B0C; font-weight: 600; }
.doc-barres b { color: #0B0B0C; }
.doc-barres i { grid-column: 1 / -1; height: .625rem; border-radius: var(--pilule); background: linear-gradient(90deg, var(--violet-fonce) var(--w), #DDD9CF var(--w)); }
.doc-pied { margin-top: 1.25rem; color: #5F5E5A; font-size: var(--t-mini); }

.doc-prio { display: grid; gap: .625rem; }
.doc-prio li { display: grid; grid-template-columns: 2rem 1fr; gap: 0 .75rem; align-items: center; padding: .75rem; border-radius: .5rem; background: #FFF; }
.doc-prio span { grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--violet-fonce); color: #FFF; font-weight: 800; }
.doc-prio b { color: #0B0B0C; }
.doc-prio em { color: #5F5E5A; font-size: var(--t-mini); font-style: normal; }

.doc-legende { margin-top: var(--e-4); color: var(--discret); font-size: var(--t-mini); }
.js .doc-page:not([hidden]) { animation: feuillette .45s var(--sortie); }

@keyframes feuillette {
  from { opacity: 0; transform: translateX(16px) rotate(1deg); }
}

/* La déduction de 200 € */
.deduc { grid-template-columns: 1fr !important; }
.deduc-lignes { display: grid; gap: .25rem; }
.deduc-lignes p { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--bordure); }
.deduc-lignes b { color: var(--titre); font-variant-numeric: tabular-nums; }
.deduc-moins { transition: opacity .3s; }
.deduc-moins b { color: var(--violet-fonce); }
.deduc.sans .deduc-moins { opacity: .35; text-decoration: line-through; }
.deduc-total { border-bottom: 0 !important; }
.deduc-total span { color: var(--titre); font-weight: var(--gras-bouton); }
.deduc-total b { font-size: 1.75rem; font-weight: var(--gras-titre); }
.deduc-note { color: var(--discret); font-size: var(--t-petit); }

/* La leçon : un texte seul, au centre */
.lecon { max-width: 46rem; margin-inline: auto; text-align: center; }
.lecon h2 { margin-bottom: var(--e-5); }
.lecon p:not(.sur-titre) { font-size: var(--t-chapo); line-height: 1.55; }
.lecon p + p { margin-top: var(--e-4); }

@media (prefers-reduced-motion: no-preference) {
  .js .rp-carte li { animation: monte .45s var(--sortie) calc(.4s + var(--i) * .18s) both; }
  .js .rp-bouchon { animation-name: monte, alerte; animation-duration: .45s, 1.2s; animation-delay: calc(.4s + var(--i) * .18s), 1.8s; animation-fill-mode: both, both; }
  .js .rp-reco { animation: monte .6s var(--sortie) 1.9s both; }
}

@keyframes alerte {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 4px rgba(229, 72, 77, .2); }
}

/* ==========================================================================
   Application métier
   ========================================================================== */

/* L'espace client du hero */
.portail { max-width: 68rem; margin-inline: auto; font-size: .8125rem; }
.pt { display: flex; min-height: 25rem; }

.pt-nav { display: none; flex-direction: column; gap: .25rem; width: 11rem; padding: 1rem .75rem; border-right: 1px solid var(--trait-sombre); background: #161618; }
.pt-nav b { display: grid; place-items: center; width: 2rem; height: 2rem; margin: 0 0 1rem .25rem; border-radius: .5rem; background: var(--violet); color: var(--encre); font-size: .6875rem; }
.pt-nav span { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; border-radius: .5rem; color: var(--gris-discret); }
.pt-nav .actif { background: #222226; color: var(--blanc); }
.pt-nav i { width: .875rem; height: .875rem; border: 1.5px solid currentColor; border-radius: 3px; }
.pt-nav em { margin-left: auto; padding: 0 .375rem; border-radius: var(--pilule); background: var(--violet); color: var(--encre); font-size: .625rem; font-style: normal; font-weight: 700; }

.pt-corps { flex: 1; min-width: 0; padding: 1.25rem; }
.pt-bonjour { color: var(--blanc); font-size: 1.25rem; font-weight: 700; }
.pt-sous { margin-bottom: 1rem; color: var(--gris-discret); }
.pt-grille { display: grid; gap: .75rem; }
.pt-carte { padding: 1rem; border: 1px solid #26262C; border-radius: .75rem; background: #18181B; }
.pt-titre { margin-bottom: .625rem; color: var(--gris-discret); font-size: .6875rem; font-weight: 700; }
.pt-pct { color: var(--gris-texte); }
.pt-pct b { color: var(--blanc); font-size: 2rem; line-height: 1; }
.pt-jauge { height: .5rem; margin: .5rem 0 .75rem; border-radius: var(--pilule); background: #26262C; overflow: hidden; }
.pt-jauge i { display: block; width: 68%; height: 100%; border-radius: inherit; background: var(--violet); }
.pt-etapes { display: flex; flex-wrap: wrap; gap: .375rem; }
.pt-etapes span { padding: .125rem .5rem; border-radius: var(--pilule); background: #222226; color: var(--gris-discret); font-size: .625rem; }
.pt-etapes .fait { background: rgba(111, 207, 151, .14); color: #6FCF97; }
.pt-etapes .encours { background: rgba(128, 121, 247, .18); color: var(--violet); }
.pt-rdv { display: flex; align-items: baseline; gap: .375rem; color: var(--gris-discret); }
.pt-rdv b { color: var(--blanc); font-size: 2rem; line-height: 1; }
.pt-rdv-txt { margin-top: .375rem; color: var(--blanc); }
.pt-rdv-txt small { color: var(--gris-discret); }
.pt-fichier { display: flex; align-items: center; gap: .625rem; padding: .4375rem 0; border-bottom: 1px solid #222226; color: var(--blanc); }
.pt-fichier i { padding: .1875rem .375rem; border-radius: .25rem; background: #26262C; color: var(--gris-texte); font-size: .5625rem; font-style: normal; font-weight: 700; }
.pt-fichier span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-bulle { display: flex; gap: .625rem; align-items: flex-start; }
.pt-bulle span { padding: .625rem .75rem; border-radius: .25rem .75rem .75rem .75rem; background: #222226; color: var(--blanc); }
.pt-repondre { margin-top: .75rem; padding: .5rem .75rem; border: 1px solid #2E2E34; border-radius: var(--pilule); color: var(--gris-discret); }

@media (min-width: 48em) { .pt-grille { grid-template-columns: 1.3fr 1fr; } }
@media (min-width: 62em) { .pt-nav { display: flex; } .pt-corps { padding: 1.5rem 1.75rem; } }

/* La boîte mail, puis les livrables */
.app-ba .ba-vue { aspect-ratio: 5 / 4; }
.boite { height: 100%; padding: .5rem 0; background: #FFF; color: #444; font-size: .8125rem; }
.boite-tete { display: flex; justify-content: space-between; padding: .75rem 1rem; color: #111; }
.boite-tete span { padding: 0 .5rem; border-radius: var(--pilule); background: #EA4335; color: #fff; font-size: .6875rem; font-weight: 700; }
.boite-ligne { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .75rem; padding: .75rem 1rem; border-top: 1px solid #EEE; }
.boite-ligne span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boite-ligne time { color: #888; font-size: .75rem; }
.bl-nonlu { background: #F2F6FC; font-weight: 700; color: #111; }

.liv { height: 100%; padding: 1rem 1.125rem; background: #121214; color: var(--gris-texte); font-size: .8125rem; }
.liv-tete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .75rem; }
.liv-tete b { color: var(--blanc); font-size: .9375rem; }
.liv-tete span { color: #6FCF97; font-size: .75rem; font-weight: 700; }
.liv-ligne { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; border-top: 1px solid #222226; }
.liv-ligne i { padding: .25rem .4375rem; border-radius: .3rem; background: #26262C; color: var(--gris-texte); font-size: .5625rem; font-style: normal; font-weight: 700; }
.liv-ligne span { display: grid; flex: 1; color: var(--gris-discret); font-size: .6875rem; }
.liv-ligne b { color: var(--blanc); font-size: .8125rem; font-weight: 600; }

/* Les deux niveaux : mini-plateforme et plateforme interne */
.mini-pf { display: grid; justify-items: center; gap: .5rem; width: 100%; }
.mp-form { width: min(100%, 16rem); }
.mp-corps { display: grid; gap: .375rem; padding: .75rem .875rem .875rem; }
.mp-corps p { display: flex; justify-content: space-between; gap: .5rem; padding: .3125rem .5rem; border-radius: .375rem; background: #1C1C20; }
.mp-corps span { color: var(--gris-discret); }
.mp-corps b { color: var(--blanc); font-weight: 600; }
.mp-fleche { width: 2px; height: 1rem; background: var(--violet); }
.mp-docs { display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem; }
.mp-docs span { padding: .3125rem .625rem; border: 1px solid #34343A; border-radius: .5rem; background: #1C1C20; color: var(--blanc); }

.pf-int { width: min(100%, 22rem); padding: .875rem; border: 1px solid #34343A; border-radius: .875rem; background: #121214; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.pfi-onglets { display: flex; gap: .25rem; margin-bottom: .75rem; overflow: hidden; }
.pfi-onglets span { padding: .25rem .5rem; border-radius: var(--pilule); color: var(--gris-discret); white-space: nowrap; }
.pfi-onglets .actif { background: var(--violet); color: var(--encre); font-weight: 700; }
.pfi-grille { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pfi-kpi { display: grid; padding: .625rem; border-radius: .5rem; background: #1C1C20; color: var(--gris-discret); font-size: .625rem; }
.pfi-kpi b { color: var(--blanc); font-size: 1.375rem; line-height: 1.1; }
.pfi-courbe { grid-column: 1 / -1; height: 3.5rem; padding: .5rem; border-radius: .5rem; background: #1C1C20; }
.pfi-courbe svg { width: 100%; height: 100%; }
.pfi-courbe path { fill: none; stroke: var(--violet); stroke-width: 2; vector-effect: non-scaling-stroke; }
.regle-texte .option-prix { margin-bottom: var(--e-2); }

/* L'exemple concret : trois écrans */
.ec .pilules { margin-bottom: var(--e-4); }
.ec .app { font-size: .8125rem; }
.ec-fil { display: grid; gap: .75rem; padding: 1.125rem; }
.ec-msg { display: flex; align-items: flex-end; gap: .625rem; max-width: 85%; }
.ec-msg span { padding: .625rem .875rem; border-radius: .875rem .875rem .875rem .25rem; background: #222226; color: var(--blanc); }
.ec-moi { justify-self: end; }
.ec-moi span { border-radius: .875rem .875rem .25rem .875rem; background: var(--violet); color: var(--encre); }
.ec-cal { display: grid; padding: .75rem 1.125rem 1rem; }
.ec-cal p { display: flex; justify-content: space-between; align-items: center; padding: .625rem 0; border-bottom: 1px solid #222226; }
.ec-cal b { color: var(--blanc); font-weight: 600; }
.ec .liv { height: auto; }
.js .ec-panneau:not([hidden]) .app { animation: monte .5s var(--sortie); }

/* Acheter ou louer : la bascule change les prix affichés */
.loc .offres { margin-top: var(--e-2); }
.loc .loc-location { display: none; }
.loc:has([value="location"]:checked) .loc-achat { display: none; }
.loc:has([value="location"]:checked) .loc-location { display: block; }
.loc-achat, .loc-location { animation: monte .4s var(--sortie); }

/* Les projets lourds : vous, Hugo, et l'équipe autour */
.equipe {
  position: relative;
  aspect-ratio: 1;
  max-width: 24rem;
  margin-inline: auto;
  width: 100%;
  border: 1px dashed var(--bordure);
  border-radius: 50%;
}

.equipe p { position: absolute; display: grid; justify-items: center; gap: .375rem; width: 9rem; text-align: center; }
@media (max-width: 29.99em) { .equipe { width: 82%; } .equipe p { width: 6.5rem; } }
.equipe span { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 1px solid var(--bordure); background: var(--carte-haute); color: var(--titre); font-weight: var(--gras-titre); }
.equipe b { color: var(--discret); font-size: var(--t-mini); font-weight: var(--gras-bouton); }
.eq-centre { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.eq-centre span { width: 5rem; height: 5rem; border: 0; background: var(--violet); color: var(--encre); font-size: 1.25rem; box-shadow: 0 0 0 10px rgba(128, 121, 247, .15); }
.eq-centre b { color: var(--titre); }
.equipe { container-type: inline-size; }
.eq-noeud { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-40cqw) rotate(calc(var(--a) * -1)); }

@media (prefers-reduced-motion: no-preference) {
  .js .pt-carte { animation: monte .55s var(--sortie) both; }
  .js .pt-carte:nth-child(2) { animation-delay: .15s; }
  .js .pt-carte:nth-child(3) { animation-delay: .3s; }
  .js .pt-carte:nth-child(4) { animation-delay: .45s; }
  .js .pt-jauge i { animation: trace 1.2s var(--sortie) .6s both; transform-origin: left; }
  .js .pt-fichier { animation: glisse .45s var(--sortie) calc(.6s + var(--i) * .15s) both; }
}

/* ==========================================================================
   Formation IA
   ========================================================================== */

/* La conversation du hero */
.chat { max-width: 30rem; margin-inline: auto; font-size: .8125rem; }
.chat-corps { display: grid; gap: .875rem; padding: 1.125rem; }

.chat-moi {
  justify-self: end;
  max-width: 88%;
  padding: .75rem .875rem;
  border-radius: .875rem .875rem .25rem .875rem;
  background: #26262C;
  color: var(--blanc);
}

.chat-pj { display: flex; align-items: center; gap: .625rem; margin-bottom: .5rem; padding: .5rem .625rem; border-radius: .5rem; background: #1A1A1E; }
.chat-pj i { padding: .25rem .375rem; border-radius: .25rem; background: #E5484D; color: #fff; font-size: .5625rem; font-style: normal; font-weight: 700; }
.chat-pj span { display: grid; color: var(--gris-discret); font-size: .6875rem; }
.chat-pj b { color: var(--blanc); font-size: .75rem; }

.chat-ia { position: relative; display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; }
.chat-avatar { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--violet); box-shadow: inset 0 0 0 6px var(--encre); }
.chat-points { display: none; }
.chat-reponse { display: grid; gap: .375rem; color: var(--gris-texte); }
.chat-reponse b { color: var(--blanc); }
.chat-reponse em { color: var(--violet); font-style: normal; }

.chat-verif { display: flex; flex-wrap: wrap; gap: .5rem; }
.chat-verif span { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; border-radius: var(--pilule); background: rgba(111, 207, 151, .12); color: #6FCF97; font-size: .6875rem; font-weight: 700; }
.chat-verif span::before { content: ""; width: .75rem; height: .75rem; border-radius: 50%; background: #6FCF97 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%230B0B0C' stroke-width='1.8'/%3E%3C/svg%3E") center / 75% no-repeat; }

/* Pour qui : deux bulles de questions */
.qui-visuel { align-content: center; gap: .75rem; }

.qui-bulle {
  justify-self: start;
  max-width: 85%;
  padding: .75rem 1rem;
  border-radius: 1rem 1rem 1rem .25rem;
  background: var(--carte-1);
  border: 1px solid var(--trait-sombre);
  color: var(--blanc);
  font-size: .875rem;
}

.qui-bulle-2 { justify-self: end; border-radius: 1rem 1rem .25rem 1rem; background: rgba(128, 121, 247, .14); border-color: rgba(128, 121, 247, .35); }

/* Les formats : quatre choix, un panneau */
.fmt { display: grid; gap: var(--e-5); }

.fmt-choix { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3); margin: 0; padding: 0; border: 0; }

.fmt-choix label {
  position: relative;
  display: grid;
  gap: .125rem;
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte);
  cursor: pointer;
  transition: border-color .25s, box-shadow .25s, transform .3s var(--sortie);
}

.fmt-choix input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fmt-choix b { color: var(--titre); font-weight: var(--gras-titre); }
.fmt-choix span { color: var(--discret); font-size: var(--t-petit); }
.fmt-choix em { margin-top: .375rem; color: var(--accent-texte); font-size: var(--t-petit); font-style: normal; font-weight: var(--gras-bouton); }
.fmt-choix label:hover { transform: translateY(-2px); }
.fmt-choix label:has(input:checked) { border-color: var(--violet-fonce); box-shadow: 0 0 0 3px rgba(91, 82, 230, .2); }
.fmt-choix label:has(input:focus-visible) { outline: 2px solid var(--violet-fonce); outline-offset: 3px; }

.fmt-panneaux {
  padding: var(--e-6) var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: var(--carte);
}

.fmt-p { display: none; gap: var(--e-6); align-items: center; }
.fmt:not(:has(input:checked)) .fmt-atelier,
.fmt:has([value="conference"]:checked) .fmt-conference,
.fmt:has([value="atelier"]:checked) .fmt-atelier,
.fmt:has([value="journee"]:checked) .fmt-journee,
.fmt:has([value="parcours"]:checked) .fmt-parcours { display: grid; animation: monte .45s var(--sortie); }

.fmt-nom { color: var(--titre); font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); font-weight: var(--gras-titre); letter-spacing: -.02em; }
.fmt-texte .offre-prix { margin-top: var(--e-2); }
.fmt-texte > p:not(.fmt-nom):not(.offre-prix):not(.offre-alt) { margin-top: var(--e-4); }
.fmt-texte .btn { margin-top: var(--e-5); }

.fmt-salle { padding: var(--e-5); border-radius: var(--rayon); background: var(--papier); }
.fmt-salle-titre { margin-bottom: var(--e-4); color: var(--titre); font-weight: var(--gras-bouton); text-align: center; }
.sieges { display: grid; grid-template-columns: repeat(5, 2.25rem); justify-content: center; gap: .625rem; }

.sieges i {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50% 50% .5rem .5rem;
  background: var(--violet-fonce);
  -webkit-mask: radial-gradient(circle at 50% 30%, #000 .45rem, transparent .5rem), linear-gradient(#000, #000) bottom / 100% 45% no-repeat;
  mask: radial-gradient(circle at 50% 30%, #000 .45rem, transparent .5rem), linear-gradient(#000, #000) bottom / 100% 45% no-repeat;
}

.fmt-mois { display: grid; gap: var(--e-3); }
.fmt-mois p { display: grid; padding: var(--e-4) var(--e-5); border-left: 3px solid var(--violet-fonce); border-radius: var(--rayon-s); background: var(--papier); color: var(--texte); }
.fmt-mois b { color: var(--titre); }
.fmt-mois small { color: var(--discret); font-size: var(--t-mini); }

@media (min-width: 62em) {
  .fmt { grid-template-columns: 17rem 1fr; gap: var(--e-6); align-items: start; }
  .fmt-choix { grid-template-columns: 1fr; }
  .fmt-panneaux { padding: var(--e-7); }
  .fmt-p { grid-template-columns: 1.3fr 1fr; gap: var(--e-7); }
}

/* La consigne vague, puis la précise */
.consigne .bascule { margin-bottom: var(--e-4); }
.cs-app { font-size: .8125rem; }
.cs-corps { display: grid; gap: .875rem; min-height: 19rem; padding: 1.125rem; align-content: start; }
.cs-moi { justify-self: end; max-width: 90%; padding: .75rem .875rem; border-radius: .875rem .875rem .25rem .875rem; background: #26262C; color: var(--blanc); }
.cs-ia { display: grid; gap: .5rem; padding: .875rem 1rem; border-radius: .25rem .875rem .875rem .875rem; background: #18181B; border: 1px solid #26262C; color: var(--gris-texte); }
.cs-note { margin-top: .25rem; font-size: .6875rem; font-weight: 700; }
.cs-note-ko { color: #F28B82; }
.cs-note-ok { color: #6FCF97; }
.consigne .gf-plein,
.consigne .gf-vide { animation: monte .45s var(--sortie); }

/* Les outils abordés : des noms, sans logos */
.outils-ia { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-3); }

.outils-ia li {
  padding: .875rem 1.5rem;
  border: 1px solid var(--bordure);
  border-radius: var(--pilule);
  background: var(--carte);
  color: var(--titre);
  font-size: 1.125rem;
  font-weight: var(--gras-titre);
  transition: border-color .25s, transform .35s var(--sortie);
}

.outils-ia li:hover { border-color: var(--violet); transform: translateY(-3px); }
.outils-ia .outils-autres { border-style: dashed; color: var(--discret); font-weight: var(--gras-bouton); }

/* Vos tâches de la semaine */
.vos-taches { padding: var(--e-5); border: 1px solid var(--bordure); border-radius: var(--rayon-l); background: var(--carte); }
.vt-titre { margin-bottom: var(--e-3); color: var(--titre); font-weight: var(--gras-titre); }

.vt-ligne {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem .875rem;
  border-radius: var(--rayon-s);
  color: var(--titre);
}

.vt-ligne:nth-of-type(odd) { background: var(--carte-haute); }
.vt-ligne i { width: 1.125rem; height: 1.125rem; border-radius: .3rem; background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%230B0B0C' stroke-width='1.8'/%3E%3C/svg%3E") center / 80% no-repeat; }
.vt-pied { margin-top: var(--e-3); color: var(--discret); font-size: var(--t-mini); }

@media (prefers-reduced-motion: no-preference) {
  .js .chat-moi { animation: monte .5s var(--sortie) .3s both; }
  .js .chat-reponse li { animation: monte .45s var(--sortie) calc(1s + var(--i) * .3s) both; }
  .js .chat-verif { animation: monte .5s var(--sortie) 2.8s both; }
  .js .vos-taches.vu .vt-ligne { animation: glisse .45s var(--sortie) calc(.3s + var(--i) * .15s) both; }
}

/* ==========================================================================
   Réalisations
   ========================================================================== */
.ph-court { padding-bottom: var(--e-6); }

.filtres { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); margin-top: var(--e-6); }

.filtres button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1.125rem;
  border: 1px solid var(--bordure);
  border-radius: var(--pilule);
  background: var(--carte);
  color: var(--texte);
  font: inherit;
  font-size: var(--t-petit);
  font-weight: var(--gras-bouton);
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}

.filtres button span { padding: 0 .4375rem; border-radius: var(--pilule); background: var(--carte-haute); color: var(--discret); font-size: var(--t-mini); }
.filtres button:hover { border-color: var(--violet); }
.filtres [aria-pressed="true"] { border-color: var(--violet); background: var(--violet); color: var(--encre); }
.filtres [aria-pressed="true"] span { background: rgba(11, 11, 12, .18); color: var(--encre); }

.cas-section { padding-top: var(--e-6); }

.cas {
  display: grid;
  gap: var(--e-6);
  align-items: center;
  padding-block: var(--e-8);
  border-top: 1px solid var(--bordure);
  scroll-margin-top: 6rem;
}

.cas:first-child { border-top: 0; padding-top: var(--e-4); }
.cas.masque { display: none; }

.cas-visuel { position: relative; display: block; text-decoration: none; }
.cas-visuel .navig { display: block; transition: transform .6s var(--sortie), border-color .3s; }
.cas-visuel .navig img { transition: transform 1.4s var(--sortie); }
.cas:hover .cas-visuel .navig { transform: translateY(-6px) rotate(-.5deg); border-color: #44444C; }
.cas:hover .cas-visuel .navig img { transform: scale(1.03); }
.cas-visuel .app-barre span { font-size: .6875rem; }
.cas-visuel .a-fournir { position: absolute; left: 1rem; bottom: -1rem; z-index: 2; background: var(--encre); }

.cas-visuel-outil {
  display: grid;
  place-items: center;
  min-height: 24rem;
  padding: var(--e-6) var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background-color: var(--carte-1);
  background-image: radial-gradient(#26262B 1px, transparent 1px);
  background-size: 18px 18px;
}

.cas-lieu { color: var(--accent-texte); font-size: var(--t-petit); font-weight: var(--gras-bouton); }
.cas-texte h2 { margin-top: var(--e-2); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }

.cas-recit { display: grid; gap: var(--e-4); margin: var(--e-5) 0 0; }
.cas-recit div { display: grid; gap: .25rem; padding-left: var(--e-4); border-left: 2px solid var(--bordure); }
.cas-recit div:last-child { border-color: var(--violet); }
.cas-recit dt { color: var(--titre); font-weight: var(--gras-bouton); }
.cas-recit dd { margin: 0; }
.cas-texte .lien-fleche { margin-top: var(--e-5); }

.cas-vide { padding: var(--e-8) 0; color: var(--discret); text-align: center; }

@media (min-width: 62em) {
  .cas { grid-template-columns: 1.15fr 1fr; gap: var(--e-9); }
  .cas:nth-child(even) .cas-visuel { order: 2; }
}

/* Les deux outils, dessinés */
.cas-app { width: min(100%, 30rem); font-size: .8125rem; }
.cas-pf-nav { display: flex; gap: .25rem; padding: .625rem .75rem; border-bottom: 1px solid var(--trait-sombre); }
.cas-pf-nav span { padding: .25rem .625rem; border-radius: var(--pilule); color: var(--gris-discret); font-size: .75rem; }
.cas-pf-nav .actif { background: #26262C; color: var(--blanc); }
.cas-pf-corps { display: grid; gap: .75rem; padding: 1rem; }
.cas-pf-corps .liv-ligne { border-top: 1px solid #222226; padding-bottom: 0; }

.cas-tel { max-width: 15rem; }
.ik { padding: .5rem 1rem; }
.ik-titre { color: var(--gris-discret); font-weight: 700; }
.ik-total { color: var(--gris-texte); }
.ik-total b { color: var(--blanc); font-size: 2.25rem; line-height: 1.1; }
.ik-sous { margin-bottom: .75rem; color: var(--gris-discret); font-size: .625rem; }
.ik-trajet { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; border-top: 1px solid #222226; }
.ik-trajet span { display: grid; color: var(--gris-discret); font-size: .625rem; }
.ik-trajet b { color: var(--blanc); font-size: .75rem; }
.ik-trajet em { color: var(--violet); font-style: normal; font-weight: 700; }
.ik-bouton { margin-top: .75rem; padding: .5rem; border-radius: var(--pilule); background: var(--violet); color: var(--encre); font-weight: 700; text-align: center; }

.prochain-voir { margin-top: var(--e-6); }

/* ==========================================================================
   Méthode
   ========================================================================== */

/* Les quatre mots du hero, reliés */
.mt-bandeau { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3); max-width: 64rem; margin-inline: auto; counter-reset: none; }

.mt-bandeau li {
  position: relative;
  display: grid;
  gap: .25rem;
  padding: var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: var(--carte);
  color: var(--titre);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  font-weight: var(--gras-titre);
  letter-spacing: -.02em;
  text-align: left;
}

.mt-bandeau span { color: var(--accent-texte); font-size: var(--t-petit); letter-spacing: 0; }
.mt-bandeau li:last-child { border-color: var(--violet); }

@media (min-width: 62em) {
  .mt-bandeau { grid-template-columns: repeat(4, 1fr); gap: var(--e-5); }
  .mt-bandeau li + li::before { content: ""; position: absolute; right: 100%; top: 50%; width: var(--e-5); height: 2px; background: var(--violet); }
}

/* Ce que vous recevez : la ligne de l'étape en cours s'allume */
.mt-recu {
  align-self: start;
  padding: var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: var(--carte);
}

.mt-recu-titre { margin-bottom: var(--e-4); color: var(--titre); font-size: 1.25rem; font-weight: var(--gras-titre); }
.mt-recu ol { display: grid; gap: var(--e-2); }

.mt-recu li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0 var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid transparent;
  border-radius: var(--rayon);
  color: var(--discret);
  font-size: var(--t-petit);
  transition: background-color .4s, border-color .4s, opacity .4s;
}

.mt-recu li span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--carte-haute);
  border: 1px solid var(--bordure);
  color: var(--titre);
  font-weight: var(--gras-titre);
  transition: background-color .4s, color .4s;
}

.mt-recu li b { color: var(--titre); font-weight: var(--gras-bouton); }

.mt-recu[data-etape="1"] li[data-n="1"],
.mt-recu[data-etape="2"] li[data-n="2"],
.mt-recu[data-etape="3"] li[data-n="3"],
.mt-recu[data-etape="4"] li[data-n="4"] { border-color: var(--violet); background: rgba(128, 121, 247, .08); }

.mt-recu[data-etape="1"] li[data-n="1"] span,
.mt-recu[data-etape="2"] li[data-n="2"] span,
.mt-recu[data-etape="3"] li[data-n="3"] span,
.mt-recu[data-etape="4"] li[data-n="4"] span { border-color: var(--violet); background: var(--violet); color: var(--encre); }

@media (min-width: 62em) { .mt-recu { position: sticky; top: 7rem; } }

/* Ce que fait l'IA, ce que je fais */
.ia-duo { display: grid; gap: var(--e-4); }

.ia-col { padding: var(--e-6) var(--e-5); border: 1px solid var(--bordure); border-radius: var(--rayon-l); background: var(--carte); }
.ia-col-moi { border-color: var(--violet); background: radial-gradient(30rem 20rem at 100% 0%, rgba(128, 121, 247, .12), transparent 60%), var(--carte); }
.ia-col-titre { display: flex; align-items: center; gap: .75rem; margin-bottom: var(--e-4); color: var(--titre); font-size: 1.375rem; font-weight: var(--gras-titre); }
.ia-pastille { width: .875rem; height: .875rem; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px rgba(128, 121, 247, .2); }
.ia-pastille-ia { background: var(--discret); box-shadow: 0 0 0 4px rgba(142, 143, 147, .2); }
.ia-col li { padding: .75rem 0; border-top: 1px solid var(--bordure); }
.ia-col-moi li { color: var(--titre); }

.garanties { display: grid; gap: var(--e-3); margin-top: var(--e-5); }

.garanties li {
  display: grid;
  gap: .125rem;
  padding: var(--e-4) var(--e-5);
  border-radius: var(--rayon);
  background: var(--carte-haute);
  border: 1px solid var(--bordure);
  color: var(--discret);
  font-size: var(--t-petit);
}

.garanties b { color: var(--titre); font-size: 1.125rem; font-weight: var(--gras-titre); }

@media (min-width: 48em) { .ia-duo { grid-template-columns: 1fr 1fr; } .garanties { grid-template-columns: repeat(3, 1fr); } }

/* La part que je fais moi-même */
.mt-echelle { display: grid; gap: var(--e-4); padding: var(--e-6) var(--e-5); border: 1px solid var(--bordure); border-radius: var(--rayon-l); background: var(--carte); }
.mt-ech-titre { color: var(--titre); font-weight: var(--gras-titre); }
.mt-ech { display: grid; grid-template-columns: 1fr auto; gap: .375rem var(--e-3); }
.mt-ech span { color: var(--titre); font-weight: var(--gras-bouton); }
.mt-ech b { color: var(--discret); font-size: var(--t-petit); font-weight: var(--gras-texte); text-align: right; }
.mt-ech i { grid-column: 1 / -1; height: .625rem; border-radius: var(--pilule); background: linear-gradient(90deg, var(--violet) var(--w), var(--bordure) var(--w)); }

.engagement .tuile { margin-bottom: 0; }

@media (prefers-reduced-motion: no-preference) {
  .js .mt-bandeau li { animation: monte .6s var(--sortie) calc(.8s + var(--i) * .15s) both; }
}

/* ==========================================================================
   BRL Studio
   ========================================================================== */
.devise { display: flex; flex-wrap: wrap; gap: 0 .5em; margin-top: var(--e-6); color: var(--titre); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); font-weight: var(--gras-titre); letter-spacing: -.02em; }

.portrait-hugo { position: relative; max-width: 22rem; margin-inline: auto; }
.portrait-hugo .barres { top: -.875rem; right: 2rem; }

.portrait-hugo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre-fenetre);
}

.portrait-hugo figcaption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  padding: .75rem 1rem;
  border: 1px solid var(--trait-sombre);
  border-radius: var(--rayon);
  background: rgba(11, 11, 12, .82);
  color: var(--discret);
  font-size: var(--t-petit);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.portrait-hugo figcaption b { color: var(--titre); }

.parcours-hugo { position: relative; display: grid; gap: var(--e-3); }

.parcours-hugo li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .125rem var(--e-4);
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte);
}

.parcours-hugo .tuile { grid-row: span 2; }
.parcours-hugo b { color: var(--titre); font-weight: var(--gras-bouton); }
.parcours-hugo span:not(.tuile) { color: var(--discret); font-size: var(--t-petit); }
.parcours-hugo li:last-child { border-color: var(--violet); }
.parcours-hugo li + li::before { content: ""; position: absolute; left: calc(var(--e-5) + 1.375rem - 1px); bottom: 100%; width: 2px; height: var(--e-3); background: var(--bordure); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-section { padding-top: var(--e-5); }
.contact { display: grid; gap: var(--e-6); align-items: start; }

.cf {
  padding: var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: var(--carte);
}

.cf .rdv-pas > legend { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); }
.cf .rdv-pas { gap: var(--e-5); }
.cf-etapes { grid-template-columns: repeat(3, 1fr); }

.cf-besoins { display: grid; gap: var(--e-3); }

.cf-besoins label {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .125rem var(--e-4);
  align-items: center;
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte-haute);
  cursor: pointer;
  transition: border-color .25s, transform .3s var(--sortie), box-shadow .25s;
}

.cf-besoins input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cf-besoins .tuile { grid-row: span 2; }
.cf-besoins b { color: var(--titre); font-weight: var(--gras-bouton); }
.cf-besoins small { color: var(--discret); font-size: var(--t-petit); }
.cf-besoins label:hover { transform: translateY(-2px); border-color: #44444C; }
.cf-besoins label:has(input:checked) { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(128, 121, 247, .2); }
.cf-besoins label:has(input:checked) .tuile { background: var(--violet); border-color: var(--violet); }
.cf-besoins label:has(input:checked) .tuile svg { stroke: var(--encre); }
.cf-besoins label:has(input:focus-visible) { outline: 2px solid var(--violet); outline-offset: 3px; }
.cf-erreur-choix { color: #F8B4AE; font-size: var(--t-petit); }

.cf-groupe { display: grid; gap: var(--e-5); }
.js .cf[data-besoin] .cf-groupe { display: none; }
.js .cf[data-besoin="site"] .cf-groupe[data-si="site"],
.js .cf[data-besoin="outil"] .cf-groupe[data-si="outil"],
.js .cf[data-besoin="formation"] .cf-groupe[data-si="formation"] { display: grid; }

.cf-reglage { max-width: 24rem; }

/* Sous-branches : fiche Google seule, choix du diagnostic */
.cf-sous { display: grid; gap: var(--e-5); }
.js .cf-sous[data-si-situation],
.js .cf-sous[data-si-outil],
.js .cf[data-situation="google"] .cf-pack { display: none; }
.js .cf[data-situation="google"] .cf-sous[data-si-situation="google"],
.js .cf[data-outil="diagnostic"] .cf-sous[data-si-outil="diagnostic"] { display: grid; }

.cf-recap { padding: var(--e-3) var(--e-4); border-left: 2px solid var(--violet); color: var(--texte); font-size: var(--t-petit); }
.cf-estimation { margin-bottom: var(--e-5); padding: var(--e-4); border-radius: var(--rayon-s); background: rgba(128, 121, 247, .12); color: var(--titre); font-size: var(--t-petit); line-height: 1.55; }

/* Retour d'un envoi sans JS : visible seulement quand l'adresse vise son ancre */
.cf-retour { display: none; padding: var(--e-4); border-radius: var(--rayon-s); color: var(--titre); }
.cf-retour:target { display: block; }
.cf-retour-ok { border: 1px solid var(--violet); }
.cf-retour-erreur { border: 1px solid #F28B82; }
.cf-retour a { color: var(--accent-texte); }
.cf-boutons { margin-top: var(--e-2); }
.cf-merci { padding-block: var(--e-8); }

/* Les coordonnées, à côté */
.contact-infos {
  display: grid;
  gap: var(--e-3);
  padding: var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: var(--carte);
}

.ci-hugo { display: flex; align-items: center; gap: var(--e-4); padding-bottom: var(--e-4); border-bottom: 1px solid var(--bordure); }
.ci-hugo img { width: 4rem; height: 4rem; border: 2px solid var(--violet); border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
.ci-hugo p { display: grid; }
.ci-hugo b { color: var(--titre); }
.ci-hugo span { color: var(--discret); font-size: var(--t-petit); }

.ci-tel,
.ci-ligne { display: grid; gap: .125rem; padding: var(--e-3) 0; text-decoration: none; }
.ci-tel span,
.ci-ligne > span:first-child { color: var(--discret); font-size: var(--t-mini); font-weight: var(--gras-bouton); }
.ci-tel b { color: var(--titre); font-size: 1.75rem; font-weight: var(--gras-titre); letter-spacing: -.01em; transition: color .2s; }
.ci-tel:hover b { color: var(--violet); }
.ci-ligne b { color: var(--titre); font-weight: var(--gras-bouton); word-break: break-all; }
.ci-ligne .a-fournir { justify-self: start; }
.ci-zones { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .25rem; }
.ci-zones li { padding: .25rem .75rem; border: 1px solid var(--bordure); border-radius: var(--pilule); color: var(--titre); font-size: var(--t-petit); }

@media (min-width: 62em) {
  .contact { grid-template-columns: 1.6fr 1fr; gap: var(--e-7); }
  .cf { padding: var(--e-7); }
  .contact-infos { position: sticky; top: 7rem; }
  .cf-besoins { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Blog
   ========================================================================== */
.blog-section { padding-top: var(--e-6); }
.articles { display: grid; gap: var(--e-4); }

.article {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: var(--carte);
  transition: border-color .3s, transform .4s var(--sortie);
}

.article:hover { border-color: #44444C; transform: translateY(-4px); }
.article.masque { display: none; }

.article-visuel {
  position: relative;
  display: grid;
  place-items: center;
  height: 11rem;
  border-bottom: 1px solid var(--bordure);
  background-color: var(--carte-2);
  background-image: radial-gradient(#2E2E34 1px, transparent 1px);
  background-size: 18px 18px;
}

.article-texte { display: flex; flex-direction: column; flex: 1; padding: var(--e-5); }
.article-texte h2 { margin-top: var(--e-3); font-size: 1.375rem; line-height: 1.2; letter-spacing: -.015em; }
.article-texte p:not(.article-meta) { margin-top: var(--e-2); color: var(--discret); font-size: var(--t-petit); }
.article-texte .lien-fleche { margin-top: auto; padding-top: var(--e-4); font-size: var(--t-petit); }
.article-meta { display: flex; align-items: center; gap: var(--e-3); color: var(--discret); font-size: var(--t-mini); }
.article-cat { padding: .125rem .625rem; border-radius: var(--pilule); background: rgba(128, 121, 247, .14); color: var(--violet); font-weight: var(--gras-bouton); }

/* Les petites illustrations des articles */
.art-prix { display: flex; align-items: center; gap: .75rem; color: var(--titre); font-size: 1.75rem; font-weight: var(--gras-titre); }
.art-prix i { width: 3rem; height: 2px; background: var(--violet); }
.art-duo { display: flex; gap: .5rem; }
.art-duo i { padding: .625rem 1rem; border: 1px solid var(--bordure); border-radius: var(--rayon-s); background: var(--carte); color: var(--titre); font-style: normal; font-weight: var(--gras-bouton); }
.art-duo i:last-child { border-color: var(--violet); color: var(--violet); }
.art-epingle { position: relative; left: auto; top: auto; margin: 0; transform: rotate(-45deg) scale(1.6); }
.art-alerte { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: rgba(229, 72, 77, .15); color: #F28B82; font-size: 1.75rem; font-weight: var(--gras-titre); }
.art-liste { display: grid; gap: .375rem; width: 9rem; }
.art-liste i { height: .625rem; border-radius: var(--pilule); background: var(--bordure); }
.art-liste i:nth-child(odd) { background: var(--violet); width: 80%; }
.art-bulle { padding: .75rem 1.125rem; border-radius: 1rem 1rem 1rem .25rem; background: var(--violet); color: var(--encre); font-weight: var(--gras-titre); }

@media (min-width: 48em) {
  .articles { grid-template-columns: repeat(2, 1fr); }
  .article-une { grid-column: 1 / -1; flex-direction: row; }
  .article-une .article-visuel { flex: 1; height: auto; min-height: 16rem; border-bottom: 0; border-right: 1px solid var(--bordure); }
  .article-une .article-texte { flex: 1; padding: var(--e-7) var(--e-6); }
  .article-une h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }
}

@media (min-width: 75em) { .articles { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   Ajustements téléphone
   ========================================================================== */
@media (max-width: 47.99em) {
  /* Refonte : l'ancien et le nouveau site passent sur une colonne, en format portrait */
  .rf-ba .ba-vue { aspect-ratio: 4 / 5; }
  .rf-ba .ba-etiquette { top: 2.75rem; padding: .25rem .625rem; font-size: .6875rem; }
  .vieux, .neuf { font-size: .625rem; }
  .vieux-corps { grid-template-columns: 1fr; gap: 1em; }
  .vieux-droite { grid-template-columns: 1fr 1fr; }
  .vieux-compteur { grid-column: 1 / -1; }
  .vieux-tete b { font-size: 1.6em; }
  .vieux-tete span { display: none; }
  .neuf-nav span { display: none; }
  .neuf-hero { grid-template-columns: 1fr; gap: 1.25em; padding-top: .5em; }
  .neuf-hero b { font-size: 2em; }
  .neuf-photo { aspect-ratio: 16 / 7; }
  .neuf-cartes { display: none; }

  /* Fiche Google : la fiche vient juste sous la bascule, pour voir le changement */
  .gf { gap: var(--e-5); }
  .gf-gauche { display: contents; }
  .gf-bascule { order: 1; margin-bottom: 0; justify-self: start; }
  .gf-panneau { order: 2; }
  .gf-liste { order: 3; }
  .gf-prix { order: 4; margin-top: 0; }

  /* Les étiquettes des autres avant/après restent lisibles sans tout couvrir */
  .ba-etiquette { padding: .25rem .625rem; font-size: .6875rem; }
}
.kb-astuce b { font-weight: inherit; }
@media (max-width: 47.99em) { .kb-astuce { right: 1rem; left: 1rem; justify-content: center; } }

/* ==========================================================================
   Pages légales : un sommaire qui reste à l'écran, un texte facile à lire
   ========================================================================== */
.ph-legal { padding-bottom: var(--e-7); }
.ph-legal h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); max-width: none; }
.legal-section { padding-block: var(--e-8); }

.legal { display: grid; gap: var(--e-6); align-items: start; }

.legal-sommaire {
  padding: var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte);
  font-size: var(--t-petit);
}

.legal-sommaire p { margin-bottom: var(--e-3); color: var(--titre); font-weight: var(--gras-bouton); }
.legal-sommaire ol { display: grid; gap: .125rem; }
.legal-sommaire a { display: block; padding: .3125rem .625rem; border-radius: var(--rayon-s); color: var(--texte); text-decoration: none; transition: background-color .2s, color .2s; }
@media (pointer: coarse) { .legal-sommaire a { padding-block: .625rem; } }
.legal-sommaire a:hover { background: var(--papier); color: var(--lien); }

.legal-texte { max-width: var(--largeur-texte); }
.legal-texte h2 { margin: var(--e-7) 0 var(--e-3); font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); scroll-margin-top: 6rem; }
.legal-texte > h2:first-of-type { margin-top: var(--e-6); }
.legal-texte p + p { margin-top: var(--e-3); }
.legal-texte .a-fournir { text-align: left; }
.legal-maj { color: var(--discret); font-size: var(--t-petit); }

.legal-fiche { display: grid; margin: var(--e-4) 0 0; border-top: 1px solid var(--bordure); }
.legal-fiche div { display: grid; gap: .125rem var(--e-5); padding: .75rem 0; border-bottom: 1px solid var(--bordure); }
.legal-fiche dt { color: var(--titre); font-weight: var(--gras-bouton); }
.legal-fiche dd { margin: 0; }
.legal-fiche a { color: var(--lien); }

.legal-liste { display: grid; gap: var(--e-2); margin: var(--e-3) 0; padding-left: 1.25rem; }
.legal-liste li::marker { color: var(--accent-texte); }

.legal-resume {
  margin-top: var(--e-5);
  padding: var(--e-5);
  border-left: 3px solid var(--violet-fonce);
  border-radius: var(--rayon-s);
  background: var(--carte);
}

.legal-resume-titre { color: var(--titre); font-weight: var(--gras-titre); }
.legal-resume ul { display: grid; gap: var(--e-2); margin-top: var(--e-3); }
.legal-resume li { position: relative; padding-left: 1.75rem; }

.legal-resume li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%230B0B0C' stroke-width='1.6'/%3E%3C/svg%3E") center / 70% no-repeat;
}

.legal-seul .legal-texte { margin-inline: auto; }

@media (min-width: 48em) {
  .legal-fiche div { grid-template-columns: 14rem 1fr; }
}

@media (min-width: 62em) {
  .legal { grid-template-columns: 16rem 1fr; gap: var(--e-8); }
  .legal-seul { grid-template-columns: 1fr; }
  .legal-sommaire { position: sticky; top: 7rem; }
}

/* ============ 404 ============ */
.liste-404 { display: grid; gap: var(--e-3); margin-top: var(--e-5); }

@media (min-width: 48em) {
  .liste-404 { grid-template-columns: repeat(3, 1fr); }
}

/* ============ TARIFS : repères, simulateur, tableaux de prix ============ */
/* L'assistant : une question à la fois, vos réponses à côté, puis la proposition */
.ph-guide { padding-bottom: var(--e-8); }
.ph-guide h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); }
.ph-guide .ph-sous-titre { max-width: 36rem; margin-inline: auto; }

.guide {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--e-4);
  align-items: start;
  max-width: 68rem;
  margin: var(--e-6) auto 0;
  text-align: left;
}

/* Une colonne de grille ne doit jamais s'élargir à cause d'un prix long */
.guide > *,
.guide-res-corps > * { min-width: 0; }

.guide-scene {
  min-height: 24rem;
  padding: clamp(1.25rem, .8rem + 2.4vw, 2.75rem);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: rgba(20, 20, 22, .88);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.guide-sans-js { color: var(--texte); }

/* En-tête : retour, numéro de la question, progression */
.guide-haut { display: flex; align-items: center; gap: var(--e-4); margin-bottom: var(--e-6); }

.guide-retour {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--bordure);
  border-radius: 50%;
  background: none;
  color: var(--titre);
  cursor: pointer;
  transition: border-color .2s, transform .25s var(--sortie);
}

.guide-retour:hover { border-color: var(--violet); transform: translateX(-2px); }
.guide-retour[disabled] { display: none; }
.guide-retour svg { width: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.guide-etape { flex: none; color: var(--discret); font-size: var(--t-mini); font-weight: var(--gras-bouton); white-space: nowrap; }

.guide-barre { flex: 1; height: 4px; border-radius: var(--pilule); background: var(--bordure); overflow: hidden; }
.guide-barre i { display: block; width: var(--p, 0%); height: 100%; border-radius: inherit; background: var(--violet); transition: width .6s var(--sortie); }

/* La question */
.guide-titre {
  color: var(--titre);
  font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.375rem);
  font-weight: var(--gras-titre);
  line-height: 1.15;
  letter-spacing: var(--approche-titre);
}

.guide-titre:focus { outline: none; }
.guide-aide { max-width: 40rem; margin-top: var(--e-3); color: var(--texte); }

.guide-options { display: grid; gap: var(--e-3); margin-top: var(--e-6); }

.guide-opt {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .25rem var(--e-4);
  min-height: 4.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte);
  color: var(--texte);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, box-shadow .2s, transform .3s var(--sortie);
}

.guide-opt:hover { border-color: var(--violet); transform: translateY(-2px); }
.guide-opt[aria-pressed="true"] { border-color: var(--violet); background: var(--carte-haute); box-shadow: 0 0 0 1px var(--violet); }
.guide-opt-texte { display: grid; gap: .1875rem; }
.guide-opt b { color: var(--titre); font-size: 1.0625rem; font-weight: var(--gras-bouton); line-height: 1.3; }
.guide-opt small { color: var(--discret); font-size: var(--t-mini); line-height: 1.45; }

/* La coche ronde de chaque réponse */
.guide-coche {
  position: relative;
  width: 1.375rem;
  height: 1.375rem;
  border: 1.5px solid var(--bordure-champ);
  border-radius: 50%;
  transition: background-color .2s, border-color .2s, transform .3s var(--sortie);
}

.guide-coche::after {
  content: "";
  position: absolute;
  left: .42rem;
  top: .2rem;
  width: .32rem;
  height: .62rem;
  border: solid var(--encre);
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) scale(.4);
  transition: opacity .2s, transform .3s var(--sortie);
}

.guide-opt[aria-pressed="true"] .guide-coche { border-color: var(--violet); background: var(--violet); transform: scale(1.08); }
.guide-opt[aria-pressed="true"] .guide-coche::after { opacity: 1; transform: rotate(45deg) scale(1); }

/* Les grandes réponses de la première question, avec une icône */
.guide-opt-grande { grid-template-columns: 1fr; align-content: start; gap: var(--e-3); padding: var(--e-5); }
.guide-opt-grande .guide-coche { position: absolute; top: var(--e-5); right: var(--e-5); }
.guide-opt-grande b { font-size: 1.1875rem; }
.guide-opt-grande small { font-size: var(--t-petit); }

/* Téléphone : l'icône passe à gauche, les trois réponses tiennent à l'écran */
@media (max-width: 39.99em) {
  .guide-opt-grande { grid-template-columns: auto 1fr; align-items: center; padding: var(--e-4) 3rem var(--e-4) var(--e-4); }
  .guide-opt-grande .guide-coche { top: 50%; right: var(--e-4); margin-top: -.6875rem; }
  .guide-opt-grande b { font-size: 1.0625rem; }
  .guide-opt-grande small { font-size: var(--t-mini); }
}

.guide-suite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); margin-top: var(--e-6); }
.guide-suite-note { color: var(--discret); font-size: var(--t-mini); }
.guide-suite .btn[disabled] { opacity: .35; cursor: not-allowed; transform: none; }

@media (min-width: 40em) {
  .guide-options { grid-template-columns: repeat(2, 1fr); }
  .guide-options-1 { grid-template-columns: 1fr; }
}

@media (min-width: 62em) {
  .guide-options-grandes { grid-template-columns: repeat(3, 1fr); }
  .guide:has(.guide-cote:not([hidden])) { grid-template-columns: 1fr 17.5rem; }
}

/* Vos réponses, à côté : le projet se construit sous vos yeux */
.guide-cote {
  display: none;
  padding: var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: rgba(20, 20, 22, .7);
}

@media (min-width: 62em) { .guide-cote { display: block; position: sticky; top: 7rem; } }

.guide-cote-titre { color: var(--titre); font-weight: var(--gras-titre); }
.guide-recap { margin-top: var(--e-3); }
.guide-recap li { display: grid; gap: .125rem; padding: .625rem 0; border-bottom: 1px dashed var(--bordure); }
.guide-recap small { color: var(--discret); font-size: .75rem; }
.guide-recap b { color: var(--titre); font-size: var(--t-petit); font-weight: var(--gras-bouton); line-height: 1.35; }
.guide-cote-pied { margin-top: var(--e-4); color: var(--discret); font-size: var(--t-mini); line-height: 1.5; }

/* La proposition */
.guide-res-corps { display: grid; gap: var(--e-5); align-items: start; margin-top: var(--e-6); }
.props { display: grid; gap: var(--e-3); }

.prop {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .125rem var(--e-4);
  padding: var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte);
}

.prop-nom { color: var(--titre); font-size: 1.125rem; font-weight: var(--gras-titre); line-height: 1.3; }
.prop-detail { grid-column: 1; color: var(--discret); font-size: var(--t-mini); }
.prop-prix { grid-column: 2; grid-row: 1 / span 2; color: var(--titre); font-weight: var(--gras-titre); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.prop-pourquoi { grid-column: 1 / -1; margin-top: var(--e-3); color: var(--texte); font-size: var(--t-petit); line-height: 1.55; }
.prop-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-5); margin-top: var(--e-3); }
.prop-actions .lien-fleche { font-size: var(--t-petit); }
.prop-remise { border-style: dashed; }
.prop-remise .prop-prix { color: var(--accent-texte); }
.prop-vide { grid-template-columns: 1fr; border-style: dashed; }

/* Téléphone : le prix passe sous le nom */
@media (max-width: 39.99em) {
  .prop { grid-template-columns: 1fr; padding: var(--e-4); }
  .prop-prix { grid-column: 1; grid-row: auto; margin-top: var(--e-2); text-align: left; white-space: normal; }
  .prop-detail { grid-row: 2; }
}

.prop-alt {
  padding: .375rem .875rem;
  border: 1px solid var(--bordure);
  border-radius: var(--pilule);
  background: none;
  color: var(--titre);
  font: inherit;
  font-size: var(--t-mini);
  font-weight: var(--gras-bouton);
  cursor: pointer;
  transition: border-color .2s;
}

.prop-alt:hover { border-color: var(--violet); }

/* Le budget */
.budget {
  display: grid;
  gap: var(--e-2);
  padding: var(--e-5);
  border: 1px solid var(--violet);
  border-radius: var(--rayon);
  background: var(--carte-haute);
}

.budget-titre { margin-bottom: var(--e-2); color: var(--titre); font-weight: var(--gras-titre); }
.budget-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); color: var(--texte); }
.budget-ligne b { color: var(--titre); font-size: 1.25rem; font-weight: var(--gras-titre); font-variant-numeric: tabular-nums; white-space: nowrap; }
.budget-an { margin-top: var(--e-2); padding-top: var(--e-4); border-top: 1px solid var(--bordure); }
.budget-an span { color: var(--titre); font-weight: var(--gras-bouton); }
.budget-an b { color: var(--accent-texte); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); letter-spacing: -.03em; line-height: 1; }
.budget-ht { color: var(--discret); font-size: var(--t-mini); line-height: 1.5; }

.budget-notes { display: grid; gap: var(--e-2); margin-block: var(--e-2); padding: var(--e-4); border-radius: var(--rayon-s); background: rgba(128, 121, 247, .1); }
.budget-notes li { position: relative; padding-left: 1rem; color: var(--texte); font-size: var(--t-mini); line-height: 1.5; }
.budget-notes li::before { content: ""; position: absolute; left: 0; top: .55em; width: .375rem; height: .375rem; border-radius: 50%; background: var(--violet); }

.budget .btn { margin-top: var(--e-2); }
.budget-envoi { color: var(--discret); font-size: var(--t-mini); text-align: center; }

.guide-res-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2) var(--e-5); margin-top: var(--e-3); }

.guide-lien {
  padding: .25rem 0;
  border: 0;
  background: none;
  color: var(--texte);
  font: inherit;
  font-size: var(--t-petit);
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

.guide-lien:hover { color: var(--titre); }

.guide-tout { margin-top: var(--e-5); text-align: center; }
.guide-tout .lien-fleche { font-size: var(--t-petit); }

@media (min-width: 62em) {
  .guide-res-corps { grid-template-columns: 1.35fr 1fr; gap: var(--e-6); }
  .budget-col { position: sticky; top: 7rem; }
}

/* Mouvement : la question arrive de côté, les réponses montent l'une après l'autre */
@media (prefers-reduced-motion: no-preference) {
  .guide-q.entre { animation: guide-entre .5s var(--sortie) both; }
  .guide-q.entre-retour { animation: guide-retour .5s var(--sortie) both; }
  .guide-q.entre .guide-opt,
  .guide-q.entre-retour .guide-opt,
  .guide-q .prop { animation: monte .45s var(--sortie) calc(.12s + var(--i, 0) * .06s) both; }
  .guide-q .budget { animation: monte .5s var(--sortie) .3s both; }
  .guide-recap li.nouvelle { animation: glisse .4s var(--sortie) both; }
  .guide-opt.choisie { animation: guide-choix .35s var(--sortie); }
  @keyframes guide-entre { from { opacity: 0; transform: translateX(32px); } }
  @keyframes guide-retour { from { opacity: 0; transform: translateX(-32px); } }
  @keyframes guide-choix { 50% { transform: scale(.98); } }
}

/* Le détail replié : les tableaux prennent toute la largeur de la réponse */
.qr-r .grille-prix { margin-bottom: var(--e-4); }
.qr-r p + p { margin-top: var(--e-3); }
.qr-r p { font-size: var(--t-petit); line-height: 1.6; }
@media (min-width: 48em) { #detail .qr-r { padding-right: 0; } }

.grille-prix-cadre { margin-top: var(--e-6); }
.grille-prix { width: 100%; border-collapse: collapse; font-size: var(--t-petit); }
.grille-prix caption { margin-bottom: var(--e-3); color: var(--titre); font-weight: var(--gras-bouton); text-align: left; }
.grille-prix th,
.grille-prix td { padding: var(--e-3) var(--e-3) var(--e-3) 0; border-bottom: 1px solid var(--bordure); text-align: left; vertical-align: top; }
.grille-prix thead th { color: var(--discret); font-size: var(--t-mini); font-weight: var(--gras-bouton); text-transform: uppercase; letter-spacing: .04em; }
.grille-prix tbody th { color: var(--titre); font-weight: var(--gras-bouton); }
.grille-prix tbody th small { display: block; margin-top: .125rem; color: var(--discret); font-weight: var(--gras-texte); }
.grille-prix td { color: var(--texte); }
.grille-prix-note { margin-top: var(--e-4); color: var(--discret); font-size: var(--t-petit); line-height: 1.55; }

/* Téléphone : chaque ligne devient une carte, l'intitulé de colonne passe devant la valeur */
@media (max-width: 47.99em) {
  .grille-prix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .grille-prix tr { display: block; padding: var(--e-3) 0; border-bottom: 1px solid var(--bordure); }
  .grille-prix th, .grille-prix td { display: block; padding: .25rem 0; border: 0; }
  .grille-prix td[data-col]::before { content: attr(data-col) " : "; color: var(--discret); }
  .grille-prix td.vide { display: none; }
}

/* ============ ARTICLE DE BLOG : en-tête, auteur, corps de texte, appel final ============ */
.ph-article .article-meta { justify-content: center; margin-top: var(--e-4); flex-wrap: wrap; }
.ph-article h1 { max-width: 22ch; margin: var(--e-3) auto 0; }
.article-auteur { display: flex; justify-content: center; align-items: center; gap: var(--e-3); margin-top: var(--e-5); color: var(--texte); font-size: var(--t-petit); }
.article-auteur img { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; object-position: top; }
.article-auteur b { color: var(--titre); }

.article-corps { font-size: 1.0625rem; line-height: 1.7; }
.article-corps .legal-resume { margin-bottom: var(--e-6); }
.article-corps h3 { margin: var(--e-5) 0 var(--e-2); font-size: 1.1875rem; }
.article-corps ol.legal-liste { list-style: decimal; }
.article-corps ul.legal-liste { list-style: disc; }
.article-corps .legal-liste b { color: var(--titre); }

.article-suite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4);
  margin-top: var(--e-7);
  padding: var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-s);
  background: var(--carte);
}
.article-suite p { flex-basis: 100%; color: var(--titre); font-weight: var(--gras-titre); font-size: 1.1875rem; }
.article-texte h2 a { color: inherit; text-decoration: none; }
.article-texte h2 a:hover { color: var(--violet); }