.td-ecrire {
  margin-top: 12px; padding: 12px 14px; border-radius: 14px;
  border: 1.5px dashed var(--ha-provisoire); color: #6f7178;
  font-family: var(--ha-mono); font-size: 12px; line-height: 1.45; letter-spacing: .02em; text-wrap: pretty;
}
.td-ecrire-petit { margin-top: 0; padding: 8px 10px; border-radius: 10px; font-size: 11px; }
.td-ecrire-ligne { display: inline-block; align-self: flex-start; padding: 1px 6px; border: 1px dashed currentColor; border-radius: 6px; }

.td-plus { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ha-jaune); }
.td-plus::before, .td-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
  border-radius: 1px; background: var(--ha-noir);
}
.td-plus::after { transform: rotate(90deg); }

/* --- 7. le panneau du rendez-vous : nous rencontrer -----------------------------------------------
   Une scène plein écran : l'ascension (des barres qui montent, la ligne jaune, le builder) à gauche, la
   carte des étapes à droite. Sous 1000 px, la scène passe en haut, sous le titre, et la carte dessous,
   son pied (les trois places, « Continuer ») collé en bas. Le mouvement est joué par td.js
   (l'animation du navigateur), la page coupant celui des feuilles. */
html.td-fige { overflow: hidden; }
.td-rdv[hidden], .td-rdv [hidden] { display: none !important; }
.td-rdv {
  position: fixed; inset: 0; z-index: 100; font-family: var(--ha-sans); color: var(--ha-noir);
  --rv-hachure: repeating-linear-gradient(135deg, rgba(24, 25, 27, .075) 0 1.5px, transparent 1.5px 7px);
}
html.td-legal-ouvert .td-rdv { z-index: 80; }
.td-voile { position: absolute; inset: 0; background: rgba(24, 25, 27, .6); }
.td-panneau {
  position: absolute; inset: 12px; overflow: hidden; border-radius: 28px;
  display: grid; grid-template-columns: minmax(0, 1fr) min(480px, 42%); grid-template-rows: auto auto minmax(0, 1fr);
  background: linear-gradient(160deg, #f7f7f9 0%, #eeeef1 46%, #dfe0e4 100%);
  box-shadow: 0 30px 90px rgba(24, 25, 27, .3);
}
.td-panneau:focus { outline: none; }
.td-panneau-tete { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 16px; padding: 26px 40px 0; }
.td-panneau-tete > * { position: relative; z-index: 3; }
.td-panneau-logo { flex: none; width: 96px; height: auto; }
.td-fermer {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; margin: 0; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ha-fond); color: var(--ha-noir);
}
.td-fermer svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.td-panneau-tete > .td-fermer { position: absolute; z-index: 5; top: 26px; right: 26px; }
.td-rdv button:focus-visible, .td-rdv a:focus-visible, .td-rdv summary:focus-visible { outline: 2.5px solid var(--ha-noir); outline-offset: 2px; }

/* le fil des trois étapes */
.rv-fil { display: flex; gap: 4px; margin: 0 auto 0 32px; padding: 0; list-style: none; }
.rv-fil-pas {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 4px; border-radius: 100px;
  font-family: var(--ha-mono); font-size: 11.5px; color: var(--ha-texte-3); white-space: nowrap;
}
.rv-fil-num {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ha-blanc); color: var(--ha-texte-2); font-size: 11px;
}
.rv-fil-pas[aria-current="step"] { background: var(--ha-blanc); color: var(--ha-noir); }
.rv-fil-pas[aria-current="step"] .rv-fil-num { background: var(--ha-jaune); color: var(--ha-noir); box-shadow: 0 0 0 1px rgba(24, 25, 27, .08); }

/* l'en-tête, posé sur la scène : le kicker, le titre, la phrase */
.rv-entete { grid-column: 1; grid-row: 2; position: relative; z-index: 2; padding: 40px 40px 0; pointer-events: none; }
.td-panneau-titre { margin-top: 14px; max-width: 7em; font-weight: 900; font-size: clamp(48px, 5.4vw, 84px); line-height: .98; letter-spacing: -.04em; text-wrap: balance; }
.td-panneau-sous { margin-top: 12px; max-width: 22em; font-size: 17px; line-height: 1.5; color: var(--ha-texte-2); text-wrap: pretty; }

/* la scène : des barres qui montent comme un graphique, la ligne jaune et ses repères, le builder */
.rv-scene { grid-column: 1; grid-row: 1 / 4; position: relative; z-index: 1; min-height: 0; overflow: hidden; }
.rv-scene-svg { position: absolute; inset: 0; display: block; overflow: visible; }
.rv-courbes path { fill: none; stroke: rgba(24, 25, 27, .075); stroke-width: 1; }
.rv-barre-face { stroke: rgba(24, 25, 27, .05); stroke-width: 1; }
.rv-barre-cote { fill: #cdcfd5; }
.rv-barre-dessus { fill: #fbfbfc; }
.rv-barre { transform-box: fill-box; transform-origin: 50% 100%; }
.rv-trace { fill: none; stroke: rgba(24, 25, 27, .3); stroke-width: 1.4; stroke-dasharray: 2 6; stroke-linecap: round; }
.rv-ligne-jaune { fill: none; stroke: var(--ha-jaune); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.rv-ligne-ombre { fill: none; stroke: rgba(24, 25, 27, .26); stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; }
.rv-fil-repere { stroke: rgba(24, 25, 27, .4); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; }
.rv-point-vide { fill: rgba(255, 255, 255, .7); stroke: rgba(24, 25, 27, .32); stroke-width: 1.3; stroke-dasharray: 2 2.6; }
.rv-point { fill: var(--ha-jaune); stroke: var(--ha-noir); stroke-width: 1.5; transform: scale(0); transform-box: fill-box; transform-origin: center; }
.rv-point-num { font-family: var(--ha-mono); font-size: 10px; font-weight: 700; fill: var(--ha-texte-3); }
.rv-onde { fill: none; stroke: var(--ha-noir); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.rv-etiquette { opacity: 0; }
.rv-etiquette-fond { fill: var(--ha-blanc); stroke: rgba(24, 25, 27, .12); }
.rv-etiquette-texte { font-family: var(--ha-mono); font-size: 11.5px; fill: var(--ha-noir); }
.rv-pose .rv-point { transform: none; }
.rv-pose .rv-fil-repere { opacity: 1; }
.rv-pose .rv-point-num { fill: var(--ha-noir); }
.rv-pose:not(.rv-sommet) .rv-etiquette { opacity: 1; }
.rv-sommet .rv-etiquette-fond { fill: var(--ha-noir); stroke: none; }
.rv-sommet .rv-etiquette-texte { fill: var(--ha-blanc); font-weight: 700; letter-spacing: .06em; }
.rv-scene.rv-arrive .rv-sommet .rv-etiquette { opacity: 1; }
.rv-scene.rv-etroit .rv-repere:not(.rv-sommet) .rv-etiquette { display: none; }

/* la carte des étapes */
.rv-carte {
  grid-column: 2; grid-row: 1 / 4; min-height: 0; margin: 12px; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; padding: 84px 32px 0; border-radius: 22px; background: var(--ha-blanc);
  box-shadow: 0 18px 50px rgba(24, 25, 27, .12);
}
.td-rdv:not([data-rv-etape="creneaux"]) .rv-carte { padding-bottom: 28px; }
.rv-essai {
  order: -2; align-self: flex-start; display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 12px; border-radius: 100px; border: 1.5px dashed var(--ha-provisoire);
  font-family: var(--ha-mono); font-size: 11.5px; line-height: 1.35; color: var(--ha-texte-2);
}
.rv-essai::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ha-provisoire); }
.rv-etape { display: flex; flex-direction: column; margin-top: 20px; }
.rv-etape-titre { font-weight: 900; font-size: 22px; line-height: 1.15; letter-spacing: -.02em; }
.rv-etape-titre:focus, .rv-sur-question:focus { outline: none; }
.rv-regle { margin-top: 6px; font-family: var(--ha-mono); font-size: 12px; line-height: 1.6; color: var(--ha-texte-2); text-wrap: pretty; }
.rv-intitule { margin-top: 20px; font-family: var(--ha-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ha-texte-2); }

/* les jours en ruban, puis les heures du jour choisi */
.rv-jours {
  display: flex; gap: 8px; margin: 10px -32px 0; padding: 6px 32px 10px;
  overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 32px; scrollbar-width: thin;
}
.rv-jour {
  position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 66px; height: 74px; margin: 0; padding: 0; border: 1.5px solid var(--ha-trait); border-radius: 16px; background: var(--ha-blanc);
  color: var(--ha-noir); font-family: var(--ha-mono); cursor: pointer; scroll-snap-align: start;
}
.rv-jour:hover { border-color: var(--ha-noir); }
.rv-jour-nom { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ha-texte-2); }
.rv-jour-num { font-family: var(--ha-sans); font-weight: 900; font-size: 22px; line-height: 1.1; }
.rv-jour-mois { font-size: 10.5px; color: var(--ha-texte-3); }
.rv-jour[aria-pressed="true"] { background: var(--ha-noir); border-color: var(--ha-noir); color: var(--ha-blanc); }
.rv-jour[aria-pressed="true"] .rv-jour-nom, .rv-jour[aria-pressed="true"] .rv-jour-mois { color: rgba(255, 255, 255, .72); }
.rv-jour[aria-disabled="true"] { background: var(--rv-hachure), var(--ha-blanc); border-color: rgba(24, 25, 27, .06); cursor: not-allowed; }
.rv-jour[aria-disabled="true"] > span { opacity: .45; }
.rv-jour-point {
  position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ha-jaune); box-shadow: 0 0 0 1px var(--ha-noir); opacity: 0;
}
.rv-jour.rv-a-choix .rv-jour-point { opacity: 1; }
.rv-heures-bloc { display: flex; flex-direction: column; }
.rv-heures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.rv-heure {
  position: relative; height: 44px; margin: 0; padding: 0; border: 1.5px solid var(--ha-trait); border-radius: 12px;
  background: var(--ha-blanc); color: var(--ha-noir); font-family: var(--ha-mono); font-size: 13px; white-space: nowrap; cursor: pointer;
}
.rv-heure:hover { border-color: var(--ha-noir); background: var(--ha-jaune-pale); }
.rv-heure[aria-pressed="true"] { background: var(--ha-noir); border-color: var(--ha-noir); color: var(--ha-blanc); }
.rv-heure.rv-complet { opacity: .34; }
.rv-heure[data-rang]::after {
  content: attr(data-rang); position: absolute; top: -6px; right: -4px; display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; background: var(--ha-jaune); color: var(--ha-noir);
  font-family: var(--ha-mono); font-size: 10.5px; font-weight: 700; box-shadow: 0 0 0 1.5px var(--ha-blanc);
}
.rv-plein {
  margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: var(--ha-jaune-pale);
  font-family: var(--ha-mono); font-size: 12px; line-height: 1.5;
}

/* le pied : les trois places, puis « Continuer » ou, sous trois créneaux, la question */
.rv-pied { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ha-trait); }
.td-rdv[data-rv-etape="creneaux"] .rv-pied {
  position: sticky; bottom: 0; z-index: 2; margin-left: -32px; margin-right: -32px; padding: 14px 32px 18px;
  background: var(--ha-blanc); box-shadow: 0 -14px 24px -18px rgba(24, 25, 27, .28);
}
.rv-choix-titre { font-family: var(--ha-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ha-texte-2); }
.td-rdv:not([data-rv-etape="creneaux"]) .rv-choix-titre { color: var(--ha-texte-3); }
.rv-choix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.td-rdv:not([data-rv-etape="creneaux"]) .rv-place:not(.rv-pleine) { display: none; }
.rv-place {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
  min-height: 58px; padding: 8px 10px; border-radius: 14px; border: 1.5px dashed var(--ha-gris); background: var(--ha-blanc);
}
.rv-place:not(.rv-pleine) { flex-direction: row; align-items: center; gap: 10px; }
.rv-place-num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%; background: var(--ha-fond); color: var(--ha-texte-2);
  font-family: var(--ha-mono); font-size: 11px;
}
.rv-place-nom { min-width: 0; font-family: var(--ha-mono); font-size: 11px; line-height: 1.35; color: var(--ha-texte-3); }
.rv-place-valeur { display: flex; flex-direction: column; min-width: 0; max-width: 100%; font-size: 13.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.005em; }
.rv-place-valeur span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-place-valeur span + span { font-family: var(--ha-mono); font-weight: 400; font-size: 12px; color: var(--ha-texte-2); }
.rv-place-valeur:empty { display: none; }
.rv-place.rv-pleine .rv-place-nom { display: none; }
.rv-place.rv-courante { border-color: var(--ha-noir); }
.rv-place.rv-pleine { border-style: solid; border-color: var(--ha-noir); }
.rv-place.rv-pleine .rv-place-num { background: var(--ha-jaune); color: var(--ha-noir); font-weight: 700; }
.rv-retirer {
  position: absolute; top: -9px; right: -9px; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--ha-noir); color: var(--ha-blanc); cursor: pointer;
  box-shadow: 0 0 0 2px var(--ha-blanc);
}
.rv-retirer:hover { background: var(--ha-jaune); color: var(--ha-noir); box-shadow: 0 0 0 2px var(--ha-blanc), 0 0 0 3px var(--ha-noir); }
.rv-retirer svg, .rv-modifier svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rv-modifier svg { width: 16px; height: 16px; }
.rv-continuer { width: 100%; }
.rv-continuer:disabled { opacity: .26; cursor: not-allowed; transform: none; }
.rv-sur { display: grid; gap: 6px; padding: 14px 16px 12px; border-radius: 16px; background: var(--ha-jaune-pale); box-shadow: inset 0 0 0 1.5px var(--ha-noir); }
.rv-sur-question { font-weight: 900; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; }
.rv-sur-texte { font-size: 14px; line-height: 1.45; color: var(--ha-texte-2); }
.rv-sur-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.rv-sur-actions .ha-bouton { height: 46px; padding: 0 22px; font-size: 15px; }

/* le courriel et le message */
.rv-formulaire { order: 3; }
.rv-label { margin-top: 18px; font-family: var(--ha-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ha-texte-2); }
.rv-champ {
  width: 100%; height: 58px; margin-top: 8px; padding: 0 18px; border-radius: 16px; border: 1.5px solid var(--ha-gris);
  background: var(--ha-blanc); color: var(--ha-noir); font-family: var(--ha-sans); font-size: 18px; font-weight: 500;
}
.rv-champ.rv-message { height: auto; min-height: 96px; padding: 14px 18px; font-size: 16px; line-height: 1.5; resize: vertical; }
.rv-champ:focus { outline: none; border-color: var(--ha-noir); box-shadow: 0 0 0 4px var(--ha-jaune-pale); }
.rv-champ[aria-invalid="true"] { border-color: var(--ha-noir); border-width: 2.5px; }
.rv-erreur { display: flex; align-items: flex-start; gap: 9px; margin-top: 10px; font-size: 14px; font-weight: 700; line-height: 1.4; }
.rv-erreur::before {
  content: "!"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ha-noir); color: var(--ha-jaune); font-family: var(--ha-mono); font-size: 12px;
}
.rv-aide { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ha-texte-2); }
.rv-confidentialite { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ha-trait); font-size: 13px; line-height: 1.5; color: var(--ha-texte-3); }
.rv-confidentialite a { color: var(--ha-noir); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rv-echec { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--ha-noir); color: var(--ha-blanc); }
.rv-echec-titre { font-weight: 700; font-size: 15px; }
.rv-echec-titre::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--ha-jaune); vertical-align: 1px; }
.rv-echec-texte { margin-top: 4px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.rv-actions { display: flex; flex-wrap: wrap-reverse; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.rv-modifier {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; margin: 0; padding: 0 14px 0 10px;
  border: 0; border-radius: 100px; background: transparent; color: var(--ha-noir); font-family: var(--ha-sans); font-size: 15px; font-weight: 700; cursor: pointer;
}
.rv-modifier:hover { background: rgba(24, 25, 27, .06); }
.rv-envoyer[aria-disabled="true"] { cursor: progress; transform: none; }
.rv-envoi-mot { display: inline-flex; align-items: center; gap: 10px; }
.rv-envoi-mot::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); border-top-color: var(--ha-jaune);
}

/* la confirmation */
.rv-fin { order: -1; align-items: flex-start; }
.td-rdv[data-rv-etape="envoye"] .rv-pied { order: 2; }
.rv-coche { width: 56px; height: 56px; overflow: visible; }
.rv-coche circle { fill: var(--ha-jaune); transform-box: fill-box; transform-origin: center; }
.rv-coche path { fill: none; stroke: var(--ha-noir); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; }
.rv-fin .rv-etape-titre { margin-top: 16px; font-size: 34px; letter-spacing: -.035em; }
.rv-fin-texte { margin-top: 10px; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.rv-fin-courriel { font-weight: 700; overflow-wrap: anywhere; }
.rv-suite { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; counter-reset: rv-suite; }
.rv-suite li { display: flex; align-items: baseline; gap: 12px; font-size: 15px; line-height: 1.45; }
.rv-suite li::before {
  counter-increment: rv-suite; content: counter(rv-suite); flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--ha-fond); font-family: var(--ha-mono); font-size: 11px;
}
.rv-demande { align-self: stretch; margin-top: 22px; padding: 12px 14px; border-radius: 14px; border: 1.5px dashed var(--ha-provisoire); }
.rv-demande summary { font-family: var(--ha-mono); font-size: 12px; color: var(--ha-texte-2); cursor: pointer; }
.rv-demande-texte {
  max-height: 260px; margin: 10px 0 0; overflow: auto; font-family: var(--ha-mono); font-size: 11px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ha-texte-2);
}
.rv-revenir { margin-top: 24px; }
.rv-annonce { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* le téléphone et les tablettes en hauteur : une feuille plein écran, la scène en haut */
@media (max-width: 999px) {
  .td-panneau { inset: 0; display: flex; flex-direction: column; border-radius: 0; box-shadow: none; }
  .td-panneau-tete { position: absolute; z-index: 3; top: 0; left: 0; right: 0; padding: 16px 16px 0 20px; }
  .td-panneau-tete > .td-fermer { position: relative; top: auto; right: auto; margin-left: auto; background: var(--ha-blanc); box-shadow: 0 0 0 1px var(--ha-trait); }
  .rv-fil { display: none; }
  .rv-entete { position: absolute; top: 66px; left: 0; right: 0; padding: 0 20px; }
  .rv-entete .ha-kicker, .td-panneau-sous { display: none; }
  .td-panneau-titre { margin-top: 0; max-width: none; font-size: clamp(30px, 7.6vw, 56px); white-space: nowrap; }
  .rv-scene { flex: none; height: clamp(290px, 40vh, 440px); }
  .rv-carte { flex: 1 1 auto; position: relative; z-index: 2; margin: -18px 0 0; padding: 20px 20px 0; border-radius: 24px 24px 0 0; box-shadow: 0 -12px 30px rgba(24, 25, 27, .12); }
  .td-rdv:not([data-rv-etape="creneaux"]) .rv-carte { padding-bottom: 24px; }
  .rv-etape { margin-top: 16px; }
  .rv-jours { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; scroll-padding: 0 20px; }
  .td-rdv[data-rv-etape="creneaux"] .rv-pied { margin-left: -20px; margin-right: -20px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 760px) {
  .rv-essai { font-size: 11px; }
  .td-rdv[data-rv-etape="creneaux"] .rv-choix-titre { display: none; }
  .rv-choix { gap: 6px; }
  .rv-place { min-height: 54px; padding: 6px 8px; }
  .rv-place-num { width: 20px; height: 20px; font-size: 10px; }
  .rv-place-nom { display: none; }
  .rv-place-valeur { font-size: 12px; }
  .rv-place-valeur span + span { font-size: 11px; }
  .rv-continuer { height: 50px; }
  .rv-sur-actions { flex-direction: column-reverse; align-items: stretch; }
  .rv-sur-actions .rv-modifier { align-self: flex-start; }
  .td-rdv[data-rv-etape="envoye"] .rv-pied { margin-top: 24px; }
  .rv-heure { height: 46px; font-size: 12.5px; }
  .rv-fin .rv-etape-titre { font-size: 30px; }
  .rv-actions { flex-direction: column-reverse; flex-wrap: nowrap; align-items: stretch; }
  .rv-envoyer { width: 100%; }
  .rv-modifier { align-self: flex-start; }
}

/* --- 8. les largeurs moyennes et le téléphone ------------------------------------------------ */
@media (max-width: 1240px) {
}
@media (max-width: 1024px) {
}
@media (max-width: 900px) {
}
@media (max-width: 760px) {
}

@media (min-width: 721px) { .ha-pied.td-pied { flex-wrap: wrap; row-gap: 0; } }
.td-pied-liens {
  order: 4; flex: 1 0 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 30px;
  margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--ha-trait);
}
.td-pied-liens a {
  display: inline-flex; align-items: center; min-height: 34px;
  font-family: var(--ha-mono); font-size: 12px; color: var(--ha-texte-2); text-decoration: none;
}
.td-pied-liens a:hover { color: var(--ha-noir); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* --- 10. les pages légales ------------------------------------------------------------------------ */
html.td-legal-ouvert { overflow: hidden; }
.td-legal[hidden] { display: none; }
.td-legal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 90;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--ha-blanc); color: var(--ha-noir); font-family: var(--ha-sans);
}
.td-legal:focus { outline: none; }
.td-legal-tete {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 96px; padding: 0 28px; background: var(--ha-blanc);
}
.td-legal-logo { width: 123px; height: auto; }
.td-legal-retour { height: 46px; padding: 0 22px 0 18px; font-size: 16px; }
.td-legal-retour svg { width: 16px; height: 16px; }

.td-legal-haut {
  display: flex; flex-direction: column; align-items: flex-start;
  margin: 0 16px; padding: 76px 80px 70px; border-radius: 40px; background: var(--ha-fond);
}
.td-legal-kicker { font-size: 13px; }
.td-legal-titre {
  margin-top: 24px;
  font-weight: 900; font-size: clamp(44px, 5.6vw, 84px); line-height: .98; letter-spacing: -.045em; text-wrap: balance;
}
.td-legal-date { margin-top: 26px; padding: 4px 10px; font-family: var(--ha-mono); font-size: 12px; line-height: 1.5; color: #6f7178; }

.td-legal-corps {
  display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 72px; align-items: start;
  width: min(var(--ha-largeur), 100% - 2 * var(--ha-gouttiere)); margin: 0 auto; padding: 72px 0 32px;
}
.td-legal-sommaire { position: sticky; top: 120px; }
.td-legal-sommaire-titre, .td-legal-pied-titre {
  font-family: var(--ha-mono); font-size: 12px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--ha-texte-2);
}
.td-legal-sommaire ol { counter-reset: td-som; margin-top: 16px; border-top: 1px solid var(--ha-trait); }
.td-legal-sommaire li { counter-increment: td-som; display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--ha-trait); }
.td-legal-sommaire li::before { content: counter(td-som, decimal-leading-zero); flex: none; font-family: var(--ha-mono); font-size: 12px; color: var(--ha-texte-3); }
.td-legal-sommaire a { flex: 1; padding: 13px 0; font-weight: 700; font-size: 16px; line-height: 1.3; letter-spacing: -.005em; text-decoration: none; }
.td-legal-sommaire a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

.td-legal-rubriques { counter-reset: td-rub; max-width: 780px; }
.td-rubrique { counter-increment: td-rub; padding: 0 0 46px; scroll-margin-top: 112px; }
.td-rubrique + .td-rubrique { padding-top: 40px; border-top: 1px solid var(--ha-trait); }
.td-rubrique::before {
  content: counter(td-rub, decimal-leading-zero); display: block;
  font-family: var(--ha-mono); font-size: 12px; letter-spacing: .1em; color: var(--ha-texte-3);
}
.td-rubrique-titre { margin-top: 10px; font-weight: 900; font-size: 32px; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.td-legal-ecrire { margin-top: 18px; padding: 18px 20px 20px; border: 1.5px dashed var(--ha-provisoire); border-radius: 18px; }
.td-legal-ecrire-mot { font-family: var(--ha-mono); font-size: 12px; line-height: 1.45; letter-spacing: .02em; color: #6f7178; }
.td-legal-lignes { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.td-legal-lignes i { display: block; height: 9px; border-radius: 5px; background: #ececef; }
.td-legal-lignes i:nth-child(2) { width: 93%; }
.td-legal-lignes i:nth-child(3) { width: 61%; }
.td-rubrique-texte { margin-top: 16px; max-width: 40em; }
.td-rubrique-titre + .td-rubrique-texte { margin-top: 18px; }
.td-rubrique-liste { margin-top: 12px; max-width: 40em; }
.td-rubrique-liste li { position: relative; padding: 3px 0 3px 22px; }
.td-rubrique-liste li::before { content: ""; position: absolute; left: 4px; top: .95em; width: 7px; height: 7px; border-radius: 2px; background: var(--ha-noir); }
.td-faits { margin-top: 18px; border-top: 1px solid var(--ha-trait); }
.td-fait { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 6px 24px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--ha-trait); }
.td-fait-nom { font-family: var(--ha-mono); font-size: 12px; line-height: 1.5; letter-spacing: .02em; color: var(--ha-texte-2); }
.td-fait-valeurs { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.td-fait .td-ecrire-ligne { padding: 4px 10px; font-family: var(--ha-mono); font-size: 12px; line-height: 1.5; color: #6f7178; }
.td-legal-renvoi { margin-top: 18px; }
button.td-legal-renvoi { padding: 0; border: 0; background: none; cursor: pointer; }
.td-legal-renvoi svg, .td-ck-lien svg, .td-legal-autre svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.td-legal-renvoi:hover span, .td-ck-lien:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.td-legal-pied {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
  width: min(var(--ha-largeur), 100% - 2 * var(--ha-gouttiere)); margin: 0 auto; padding: 32px 0 calc(64px + var(--rt-barre, 0px));
  border-top: 1px solid var(--ha-trait);
}
.td-legal-pied-liens { display: flex; flex-wrap: wrap; gap: 10px; }
.td-legal-autre {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 22px;
  border-radius: 100px; background: var(--ha-fond); color: var(--ha-noir);
  font-weight: 700; font-size: 15px; letter-spacing: -.005em; text-decoration: none;
}
.td-legal-autre:hover { background: var(--ha-fond-fonce); }

/* --- 11. le consentement aux cookies -------------------------------------------------------------- */
.td-ck[hidden], .td-ck-vue[hidden], .td-ck-fermer[hidden] { display: none; }
.td-ck {
  position: fixed; z-index: 95; right: 16px; bottom: calc(var(--rt-barre, 0px) + 8px);
  width: min(536px, calc(100vw - 32px)); max-height: calc(100vh - var(--rt-barre, 0px) - 24px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 24px 28px 28px; border-radius: 28px; background: var(--ha-blanc); color: var(--ha-noir);
  font-family: var(--ha-sans);
  box-shadow: 0 0 0 1px rgba(24, 25, 27, .07), 0 2px 6px rgba(24, 25, 27, .06), 0 28px 72px rgba(24, 25, 27, .2);
}
.td-ck[data-vue="reglage"] { width: min(616px, calc(100vw - 32px)); }
.td-ck:focus { outline: none; }
.td-ck-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.td-ck-kicker { font-size: 12px; }
.td-ck-fermer {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; margin: -8px -10px -8px 0; padding: 0; border: 0; border-radius: 50%;
  background: var(--ha-fond); color: var(--ha-noir); cursor: pointer;
}
.td-ck-fermer svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.td-ck-titre { margin-top: 14px; font-weight: 900; font-size: 30px; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.td-ck-titre:focus { outline: none; }
.td-ck-phrase { margin-top: 10px; max-width: 30em; font-size: 16px; line-height: 1.5; color: var(--ha-texte-2); }
.td-ck-fond { margin-top: 10px; max-width: 30em; font-size: 15px; line-height: 1.5; color: var(--ha-texte-2); }
.td-ck-lien { margin-top: 14px; font-size: 12px; }
.td-ck-boutons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
.td-ck-bouton {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; margin: 0; padding: 0 10px; border: 0; border-radius: 100px;
  background: var(--ha-noir); color: var(--ha-blanc);
  font-family: var(--ha-sans); font-weight: 700; font-size: 15px; line-height: 1; letter-spacing: -.005em;
  white-space: nowrap; cursor: pointer;
}
.td-ck-bouton:hover { background: var(--ha-noir-doux); }
.td-ck-bouton:focus-visible { outline: 2px solid var(--ha-noir); outline-offset: 3px; border-radius: 100px; }

.td-ck-categories { margin-top: 18px; border-top: 1px solid var(--ha-trait); }
.td-ck-categorie { padding: 16px 0 18px; border-bottom: 1px solid var(--ha-trait); }
.td-ck-categorie-tete { display: flex; align-items: center; gap: 14px; }
.td-ck-categorie-nom { flex: 1; min-width: 0; font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -.01em; }
.td-ck-toujours { font-family: var(--ha-mono); font-size: 11px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--ha-texte-2); }
.td-ck-interrupteur { flex: none; width: 52px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 100px; background: none; cursor: pointer; }
.td-ck-interrupteur:focus-visible { outline: 2px solid var(--ha-noir); outline-offset: 3px; border-radius: 100px; }
.td-ck-piste { position: relative; display: block; width: 52px; height: 32px; border-radius: 100px; background: var(--ha-fond-fonce); }
.td-ck-rond { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--ha-blanc); box-shadow: 0 1px 3px rgba(24, 25, 27, .28); }
.td-ck-interrupteur[aria-checked="true"] .td-ck-piste { background: var(--ha-noir); }
.td-ck-interrupteur[aria-checked="true"] .td-ck-rond { left: 23px; background: var(--ha-jaune); box-shadow: none; }
.td-ck-interrupteur:disabled { cursor: not-allowed; }
.td-ck-interrupteur:disabled .td-ck-piste { background: var(--ha-texte-3); }
.td-ck-interrupteur:disabled .td-ck-rond { background: var(--ha-blanc); }
.td-ck-description { margin-top: 10px; max-width: 34em; font-size: 15px; line-height: 1.5; color: var(--ha-texte-2); }

/* --- 12. les largeurs moyennes et le téléphone -------------------------------------------------- */
@media (max-width: 1024px) {
  .td-legal-corps { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 900px) {
  .td-legal-haut { padding: 56px 40px 52px; }
  .td-legal-corps { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-top: 48px; }
  .td-legal-sommaire { position: static; }
}
@media (max-width: 720px) {
  .td-pied-liens { margin-top: 6px; padding-top: 8px; gap: 0 22px; }
  html:not([data-rt-retours="oui"]):not(.td-fige) .td-ck { z-index: 2147483003; bottom: 16px; max-height: calc(100vh - 32px); }
}
@media (max-width: 760px) {
  .td-legal-tete { height: 72px; padding: 0 16px 0 20px; }
  .td-legal-logo { width: 96px; }
  .td-legal-retour { height: 42px; padding: 0 16px 0 14px; gap: 8px; font-size: 15px; }
  .td-legal-haut { margin: 0 8px; padding: 40px 22px 34px; border-radius: 28px; }
  .td-legal-kicker { font-size: 12px; }
  .td-legal-titre { margin-top: 18px; font-size: clamp(38px, 11.5vw, 56px); line-height: 1; letter-spacing: -.04em; }
  .td-legal-date { margin-top: 20px; }
  .td-legal-corps { padding-top: 36px; gap: 36px; }
  .td-rubrique { padding-bottom: 36px; scroll-margin-top: 88px; }
  .td-rubrique + .td-rubrique { padding-top: 32px; }
  .td-rubrique-titre { font-size: 26px; }
  .td-legal-ecrire { padding: 16px 16px 18px; border-radius: 16px; }
  .td-fait { grid-template-columns: minmax(0, 1fr); }
  .td-legal-pied { padding: 28px 0 calc(48px + var(--rt-barre, 0px)); }
}
@media (max-width: 560px) {
  .td-ck, .td-ck[data-vue="reglage"] {
    left: 8px; right: 8px; width: auto; bottom: calc(var(--rt-barre, 0px) + 8px);
    max-height: calc(100vh - var(--rt-barre, 0px) - 16px);
    padding: 20px 18px 18px; border-radius: 24px;
  }
  html:not([data-rt-retours="oui"]):not(.td-fige) .td-ck { bottom: 8px; max-height: calc(100vh - 16px); }
  .td-ck-titre { margin-top: 12px; font-size: 26px; }
  .td-ck-phrase { font-size: 15px; line-height: 1.45; }
  .td-ck-fond { margin-top: 8px; font-size: 14px; line-height: 1.45; }
  .td-ck-lien { margin-top: 12px; }
  .td-ck-boutons { gap: 6px; margin-top: 18px; }
  .td-ck-bouton { height: 48px; padding: 0 4px; font-size: 14px; }
  .td-ck-categorie-nom { font-size: 17px; }
  [data-vue-cookies="reglage"] .td-ck-boutons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-vue-cookies="reglage"] [data-choix="enregistrer"] { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .ha-site-hero .ha-actions { margin-top: 56px; }
}

.td-facons .he-tete { max-width: 980px; }
.td-facons-chapeau { max-width: 780px; font-size: 20px; line-height: 1.5; font-weight: 500; letter-spacing: -.005em; color: var(--ha-noir); text-wrap: pretty; }
.td-onglets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 1280px; margin: 0 auto; }
.td-onglet {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 20px;
  min-height: 120px; margin: 0; padding: 22px 22px 22px 26px; border: 0; border-radius: 32px; cursor: pointer; text-align: left;
  background: var(--ha-fond); color: var(--ha-noir); font-family: var(--ha-sans);
  box-shadow: inset 0 0 0 1.5px var(--ha-trait);
}
.td-onglet:hover { background: var(--ha-fond-fonce); }
.td-onglet:focus-visible { outline: 2px solid var(--ha-noir); outline-offset: 3px; }
.td-onglet[aria-selected="true"] { background: var(--ha-noir); color: var(--ha-blanc); box-shadow: none; cursor: default; }
/* l'onglet ouvert pointe vers son panneau */
.td-onglet[aria-selected="true"]::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 18px; height: 18px; margin-left: -9px;
  border-radius: 3px; background: var(--ha-noir); transform: rotate(45deg);
}
.td-onglet-num { align-self: start; margin-top: 3px; padding: 3px 8px; border-radius: 6px; background: var(--ha-blanc); font-family: var(--ha-mono); font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--ha-noir); }
.td-onglet[aria-selected="true"] .td-onglet-num { background: var(--ha-jaune); }
.td-onglet-mots { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.td-onglet-titre { font-weight: 900; font-size: 30px; line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.td-onglet-pour { display: inline-flex; align-items: flex-start; gap: 10px; font-family: var(--ha-mono); font-size: 12.5px; line-height: 1.4; letter-spacing: .02em; color: var(--ha-texte-2); }
.td-onglet-pour::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .36em; background: var(--ha-jaune); box-shadow: 0 0 0 1px rgba(24, 25, 27, .2); }
.td-onglet[aria-selected="true"] .td-onglet-pour { color: rgba(255, 255, 255, .78); }
.td-onglet-rond { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ha-noir); color: var(--ha-jaune); }
.td-onglet-rond svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.td-onglet:hover:not([aria-selected="true"]) .td-onglet-rond { background: var(--ha-jaune); color: var(--ha-noir); }
.td-onglet[aria-selected="true"] .td-onglet-rond { background: var(--ha-jaune); color: var(--ha-noir); }
.td-onglet[aria-selected="true"] .td-onglet-rond svg { transform: rotate(90deg); }

.td-panneau-onglet[hidden] { display: none; }
.td-panneau-onglet {
  position: relative; overflow: hidden; isolation: isolate;
  max-width: 1280px; margin: 16px auto 0; padding: 56px 56px 48px; border-radius: 40px; font-family: var(--ha-sans);
}
.td-panneau-onglet:focus-visible { outline: 2px solid var(--ha-noir); outline-offset: 3px; }
.td-builders { background: var(--ha-noir); color: var(--ha-blanc); }
.td-transformer { background: var(--ha-fond); color: var(--ha-noir); }
/* les courbes de niveau en fond du panneau : la touche de parallaxe la plus franche */
.td-facon-decor { position: absolute; z-index: -1; right: -48px; top: -64px; width: min(760px, 66%); aspect-ratio: 900 / 520; opacity: .36; pointer-events: none; }
.td-facon-decor svg { display: block; width: 100%; height: 100%; }
.td-facon-verbe { font-weight: 900; font-size: 30px; line-height: 1.1; letter-spacing: -.028em; text-wrap: balance; }
.td-facon-phrase { margin-top: 12px; max-width: 40em; font-size: 17px; line-height: 1.6; color: var(--ha-texte-2); text-wrap: pretty; }
/* les petits intitulés mono à carré jaune */
.td-addition-intitule, .td-qualites-intitule, .td-builders-intitule, .td-valeurs-titre, .td-fp-partie-titre {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ha-mono); font-size: 12px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase;
}
.td-addition-intitule::before, .td-qualites-intitule::before, .td-builders-intitule::before, .td-valeurs-titre::before, .td-fp-partie-titre::before {
  content: ""; flex: none; width: 8px; height: 8px; background: var(--ha-jaune);
}
/* « En savoir plus » : la pilule noire et son rond jaune */
.td-savoir {
  display: inline-flex; align-items: center; gap: 12px; height: 44px; margin: 0; padding: 0 7px 0 18px;
  border: 0; border-radius: 100px; background: var(--ha-noir); color: var(--ha-blanc);
  font-family: var(--ha-sans); font-weight: 700; font-size: 15px; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.td-savoir .td-plus { width: 30px; height: 30px; }
.td-savoir:hover .td-plus { background: var(--ha-blanc); }
.td-savoir:focus-visible { outline: 2px solid var(--ha-noir); outline-offset: 3px; border-radius: 100px; }

.td-addition-intitule { color: rgba(255, 255, 255, .72); }
.td-equation {
  display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr) 64px minmax(0, 1fr) 64px minmax(0, 1fr);
  align-items: stretch; margin-top: 22px;
}
.td-terme {
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0;
  padding: 22px 22px 24px; border-radius: 26px; background: var(--ha-blanc); color: var(--ha-noir);
}
.td-terme-icone { display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 18px; background: var(--ha-fond); }
.td-terme-icone svg { display: block; width: 40px; height: 40px; }
.td-terme-icone img { display: block; width: 24px; height: auto; }
.td-terme-texte { font-weight: 700; font-size: 19px; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.td-signe {
  align-self: center; justify-self: center;
  font-family: var(--ha-sans); font-weight: 900; font-size: 64px; line-height: 1; color: var(--ha-jaune);
}
.td-resultat {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 20px; min-width: 0;
  padding: 22px 22px 24px; border-radius: 26px; background: var(--ha-jaune); color: var(--ha-noir);
}
.td-resultat-portrait { display: block; flex: none; width: 58px; height: 58px; border-radius: 18px; overflow: hidden; background: var(--ha-noir); }
.td-resultat-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; transform: scale(1.3); }
.td-resultat-texte { font-weight: 900; font-size: 28px; line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }

.td-qualites { margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .12); }
.td-qualites-intitule { color: rgba(255, 255, 255, .72); }
.td-qualites-liste { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.td-qualites-liste li {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 100px;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  font-weight: 700; font-size: 15px; line-height: 1.2;
}
.td-qualites-liste li::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--ha-jaune); }
.td-qualites-source { margin: 14px 0 0; max-width: 60em; font-family: var(--ha-mono); font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, .62); }

.td-builders-intitule { margin-top: 40px; color: rgba(255, 255, 255, .72); }
.td-builders-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.td-builder {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 14px; row-gap: 14px;
  min-width: 0; padding: 14px 16px 14px 14px; border-radius: 24px; background: var(--ha-blanc); color: var(--ha-noir);
}
.td-builder-portrait { grid-column: 1; grid-row: 1; width: 76px; height: 76px; border-radius: 17px; overflow: hidden; background: #e8e9ec; }
.td-builder-portrait img, .td-fp-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.td-miroir { transform: scaleX(-1); }
/* la silhouette glisse doucement dans la fenêtre de son portrait : un peu plus grande que la fenêtre */
.td-builder-portrait img { transform: scale(1.16); }
.td-builder-portrait img.td-miroir { transform: scale(-1.16, 1.16); }
.td-builder-corps { grid-column: 2; grid-row: 1; align-self: center; min-width: 0; }
.td-builder-rang { font-family: var(--ha-mono); font-size: 11px; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--ha-texte-3); }
.td-builder-nom { margin-top: 5px; font-weight: 900; font-size: 21px; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.td-builder-sous { margin-top: 5px; font-family: var(--ha-mono); font-size: 12px; line-height: 1.35; color: var(--ha-texte-2); }
.td-builder-sous.td-ecrire-ligne { color: #6f7178; }
.td-builder-texte { grid-column: 1 / -1; grid-row: 2; font-size: 14.5px; line-height: 1.5; color: var(--ha-texte-2); text-wrap: pretty; }
.td-builder-texte.td-ecrire { margin-top: 0; align-self: start; }
.td-builder .td-savoir { grid-column: 1 / -1; grid-row: 3; justify-self: start; height: 40px; gap: 10px; padding: 0 5px 0 16px; font-size: 14.5px; }
.td-builder .td-savoir .td-plus { width: 28px; height: 28px; }

/* --- 17. le panneau de nos services : le cycle qui se choisit, les trois offres ----------------------- */
.td-services-tete { max-width: 820px; }
.td-services-corps { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 32px; }
.td-cycle { padding: 30px 30px 28px; border-radius: 28px; background: var(--ha-blanc); }
.td-cycle-titre { font-weight: 900; font-size: 25px; line-height: 1.12; letter-spacing: -.022em; text-wrap: balance; }
.td-cycle-texte { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ha-texte-2); }
.td-cycle-corps { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 26px; align-items: center; margin-top: 24px; }
.td-anneau svg { display: block; width: 188px; height: 188px; }
.td-arc { stroke: #e4e5e9; }
[data-etape-choisie="discovery"] .td-arc[data-arc="discovery"],
[data-etape-choisie="maturation"] .td-arc[data-arc="maturation"],
[data-etape-choisie="developpement"] .td-arc[data-arc="developpement"],
[data-etape-choisie="mesure"] .td-arc[data-arc="mesure"],
[data-etape-choisie="iteration"] .td-arc[data-arc="iteration"] { stroke: var(--ha-jaune); }
.td-etapes { display: grid; gap: 6px; counter-reset: td-etape; min-width: 0; }
.td-etape {
  counter-increment: td-etape;
  display: flex; align-items: center; gap: 12px; width: 100%; height: 50px; margin: 0; padding: 0 12px 0 14px;
  border: 0; border-radius: 14px; background: var(--ha-fond); color: var(--ha-noir);
  box-shadow: inset 0 -2px 0 rgba(24, 25, 27, .08);
  font-family: var(--ha-sans); font-weight: 700; font-size: 16px; letter-spacing: -.005em; text-align: left; cursor: pointer;
}
.td-etape::before { content: counter(td-etape, decimal-leading-zero); flex: none; width: 20px; font-family: var(--ha-mono); font-size: 11px; font-weight: 400; color: var(--ha-texte-3); }
.td-etape span { flex: 1; min-width: 0; }
.td-fleche { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ha-blanc); }
.td-fleche::after {
  content: ""; position: absolute; left: 8px; top: 8px; width: 6px; height: 6px;
  border-top: 1.8px solid var(--ha-noir); border-right: 1.8px solid var(--ha-noir); transform: rotate(45deg);
}
.td-etape:hover { background: var(--ha-fond-fonce); }
.td-etape[aria-pressed="true"] { background: var(--ha-jaune); box-shadow: inset 0 0 0 1.5px var(--ha-noir), inset 0 3px 0 rgba(24, 25, 27, .14); }
.td-etape[aria-pressed="true"]::before { color: var(--ha-noir); }
.td-etape[aria-pressed="true"] .td-fleche { background: var(--ha-noir); }
.td-etape[aria-pressed="true"] .td-fleche::after { border-color: var(--ha-jaune); left: 8px; top: 7px; transform: rotate(135deg); }
.td-etape:focus-visible { outline: 2px solid var(--ha-noir); outline-offset: 2px; }
.td-etape-textes { margin-top: 16px; }
.td-etape-texte[hidden] { display: none; }
.td-etape-texte {
  display: flex; align-items: center; justify-content: space-between; gap: 14px 18px; flex-wrap: wrap;
  padding: 14px 14px 14px 20px; border-radius: 20px; background: var(--ha-noir); color: var(--ha-blanc);
}
.td-etape-texte p { flex: 1 1 14em; font-weight: 700; font-size: 17px; line-height: 1.35; letter-spacing: -.01em; }
.td-etape-texte .td-savoir { background: var(--ha-blanc); color: var(--ha-noir); }
.td-etape-texte .td-savoir:hover .td-plus { background: var(--ha-noir); }
.td-etape-texte .td-savoir:focus-visible { outline-color: var(--ha-jaune); }

.td-offres { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.td-offre { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 22px 24px 24px; border-radius: 24px; background: var(--ha-blanc); }
.td-offre-tete { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.td-offre-etiquette { padding: 4px 10px; border-radius: 100px; box-shadow: inset 0 0 0 1px var(--ha-trait); font-family: var(--ha-mono); font-size: 11px; line-height: 1.3; letter-spacing: .04em; }
.td-offre-titre { font-weight: 900; font-size: 23px; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.td-offre-texte { font-size: 16px; line-height: 1.45; color: var(--ha-texte-2); text-wrap: pretty; }
/* le terrain au pied du panneau, sous les cartes */
.td-facon-terrain { position: relative; z-index: -1; height: 150px; margin: 8px -56px -48px; pointer-events: none; }
.td-facon-terrain svg { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 100%; }

.td-contenus { position: relative; isolation: isolate; overflow-x: clip; padding: 104px 16px 0; font-family: var(--ha-sans); color: var(--ha-noir); }
.td-contenus-tete { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 900px; margin: 0 auto; text-align: center; }
.td-contenus-decor { position: absolute; z-index: -1; left: 50%; top: -56px; width: 1400px; height: 300px; margin-left: -700px; pointer-events: none; }
.td-contenus-decor svg { display: block; width: 100%; height: 100%; }
.td-contenus-kicker { font-size: 14px; letter-spacing: .02em; }
.td-contenus-titre { margin-top: 18px; font-weight: 900; font-size: 54px; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.td-contenus-chapeau { margin-top: 16px; max-width: 34em; font-size: 19px; line-height: 1.5; color: var(--ha-texte-2); text-wrap: pretty; }
.td-contenus-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1280px; margin: 48px auto 0; padding: 0; list-style: none; }

.td-vignette { display: flex; flex-direction: column; min-width: 0; padding: 10px; border-radius: 28px; background: var(--ha-fond); color: var(--ha-noir); }
.td-vignette-visuel { position: relative; overflow: hidden; isolation: isolate; flex: none; aspect-ratio: 16 / 9; border-radius: 20px; }
.td-vignette-corps { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; min-width: 0; padding: 20px 14px 12px; }
.td-vignette-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.td-vignette-etiquette {
  padding: 4px 9px; border-radius: 6px; background: var(--ha-jaune); color: var(--ha-noir);
  font-family: var(--ha-mono); font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase;
}
.td-vignette-etape { font-family: var(--ha-mono); font-size: 12px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--ha-texte-2); }
.td-vignette-titre { margin-top: 14px; font-weight: 900; font-size: 25px; line-height: 1.1; letter-spacing: -.024em; text-wrap: balance; }
.td-vignette-texte { margin-top: 8px; margin-bottom: 22px; font-size: 15.5px; line-height: 1.5; color: var(--ha-texte-2); text-wrap: pretty; }
.td-vignette-lien {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; margin-top: auto; padding: 0 18px; border-radius: 100px;
  background: var(--ha-noir); color: var(--ha-blanc); font-weight: 700; font-size: 15px; letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
}
.td-vignette-lien:hover { background: var(--ha-noir-doux); }
.td-vignette-lien:focus-visible { outline: 2px solid var(--ha-noir); outline-offset: 3px; border-radius: 100px; }
.td-vignette-lien svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.td-vignette-attente { background: var(--ha-blanc); outline: 1.5px dashed var(--ha-provisoire); outline-offset: -1.5px; }
.td-vignette-attente .td-vignette-titre, .td-vignette-attente .td-vignette-texte { color: #6f7178; }
.td-visuel-attente { display: grid; place-items: center; background: #f4f4f6; box-shadow: inset 0 0 0 1.5px #d6d7dc; }
.td-calque-attente { left: -8%; right: -8%; top: -16%; bottom: -16%; }
.td-attente-mot { position: relative; z-index: 1; background: #f4f4f6; color: var(--ha-texte-2); }

/* les visuels et leurs calques (le parallaxe les décale à des vitesses différentes) */
.td-calque { position: absolute; pointer-events: none; }
.td-calque svg { display: block; width: 100%; height: 100%; }
.td-visuel-manifeste { display: grid; place-items: center; background: var(--ha-noir); }
.td-calque-courbes { left: -6%; right: -6%; top: -22%; bottom: -22%; }
.td-visuel-scene { position: relative; height: 88%; aspect-ratio: 440 / 480; }
.td-calque-dessous { left: 4%; top: 6%; width: 60%; aspect-ratio: 300 / 380; }
.td-calque-dessous svg { transform: rotate(-8deg); }
.td-calque-feuille { left: 24%; top: 10%; width: 66%; aspect-ratio: 320 / 400; }
.td-calque-feuille svg { transform: rotate(4deg); filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .45)); }
.td-calque-etincelle { right: 0; top: 0; width: 22%; aspect-ratio: 1; }
.td-calque-point { left: 10%; bottom: 8%; width: 14px; height: 14px; }
.td-point-jaune { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--ha-jaune); box-shadow: 0 0 0 5px rgba(248, 255, 7, .16); }
.td-visuel-cas { display: grid; place-items: center; padding: 18px 26px; background: linear-gradient(160deg, #e1e2e6 0%, #f7f7f9 100%); }
.td-calque-ecran { position: relative; width: 100%; }
.td-vignette-ecran { box-shadow: 0 24px 54px rgba(24, 25, 27, .16); }
.td-vignette .hd-ecran { padding: 6px; border-radius: 14px; }
.td-vignette .hd-ecran img { border-radius: 9px; }

.td-valeurs-titre { margin-top: 30px; color: var(--ha-noir); }
.td-valeurs { align-self: stretch; counter-reset: td-val; margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ha-trait); }
.td-valeurs li { counter-increment: td-val; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--ha-trait); }
.td-valeurs li::before { content: counter(td-val, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--ha-mono); font-size: 12px; color: var(--ha-texte-3); }
.td-valeur { grid-column: 2; font-size: 17px; line-height: 1.4; color: var(--ha-noir); }
.td-valeur b { font-weight: 700; color: var(--ha-noir); }
.td-valeur-remarque {
  grid-column: 2; justify-self: start; margin-top: 8px; padding: 3px 9px; border-radius: 6px;
  background: var(--ha-jaune); color: var(--ha-noir); font-weight: 700; font-size: 14px; line-height: 1.35;
}
.td-valeur-remarque::before { content: "("; }
.td-valeur-remarque::after { content: ")"; }

/* --- 19. les fenêtres des profils et des étapes ---------------------------------------------- */
.td-fenetres-voile[hidden], .td-fenetre[hidden] { display: none; }
.td-fenetres-voile { position: fixed; inset: 0; z-index: 100; background: rgba(24, 25, 27, .5); }
.td-fenetre {
  position: fixed; z-index: 101; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; overflow: hidden;
  width: min(1000px, calc(100vw - 48px)); max-height: calc(100vh - 48px);
  border-radius: 32px; background: var(--ha-blanc); color: var(--ha-noir); font-family: var(--ha-sans);
  box-shadow: 0 40px 100px rgba(24, 25, 27, .32);
}
.td-fenetre:focus { outline: none; }
.td-fenetre-etape { width: min(860px, calc(100vw - 48px)); }
.td-fenetre-fermer { position: absolute; top: 16px; right: 16px; z-index: 3; background: var(--ha-blanc); box-shadow: 0 0 0 1px var(--ha-trait); }
.td-fenetre-fermer:focus-visible { outline: 2px solid var(--ha-noir); outline-offset: 2px; }
.td-fp, .td-fe { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.td-fp { display: grid; grid-template-columns: 340px minmax(0, 1fr); }
.td-fp-tete { display: flex; flex-direction: column; padding: 26px 28px 30px; background: var(--ha-fond); }
.td-fp-portrait { display: block; aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: #e2e3e7; }
.td-fp-identite { margin-top: 22px; }
.td-fp-rang { font-family: var(--ha-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ha-texte-2); }
.td-fp-nom { margin-top: 8px; font-weight: 900; font-size: 40px; line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.td-fp-sous { margin-top: 8px; font-family: var(--ha-mono); font-size: 13px; color: var(--ha-texte-2); }
.td-fp-texte { margin-top: 18px; font-weight: 700; font-size: 18px; line-height: 1.45; letter-spacing: -.01em; text-wrap: pretty; }
.td-fp-texte.td-ecrire { font-weight: 400; font-size: 12px; letter-spacing: .02em; }
.td-fp-parties { display: grid; align-content: start; gap: 30px; padding: 44px 48px 40px; }
.td-fp-partie-titre { color: var(--ha-noir); }
.td-fp-qualites, .td-fp-postes { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.td-fp-qualites li {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 100px;
  background: var(--ha-noir); color: var(--ha-blanc); font-weight: 700; font-size: 15px; line-height: 1.2;
}
.td-fp-qualites li::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--ha-jaune); }
.td-fp-esprit { margin-top: 14px; max-width: 34em; font-size: 16px; line-height: 1.55; color: var(--ha-texte-2); }
.td-fp-intro { margin-top: 10px; font-size: 14px; line-height: 1.4; color: var(--ha-texte-2); }
.td-fp-postes li { padding: 8px 14px; border-radius: 100px; background: var(--ha-fond); font-weight: 700; font-size: 15px; line-height: 1.2; }
.td-fp-competences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; margin: 14px 0 0; padding: 0; list-style: none; }
.td-fp-competences li { display: flex; align-items: baseline; gap: 10px; font-weight: 700; font-size: 16px; line-height: 1.35; }
.td-fp-competences li::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--ha-jaune); box-shadow: 0 0 0 1px var(--ha-noir); transform: translateY(-1px); }
.td-fp-role { min-height: 76px; }
.td-fp-source { font-family: var(--ha-mono); font-size: 11px; line-height: 1.5; color: var(--ha-texte-2); }

.td-fe-tete { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 30px; align-items: center; padding: 38px 72px 32px 40px; background: var(--ha-fond); }
.td-fe-anneau { display: block; width: 148px; height: 148px; }
.td-fe-anneau .td-arc { stroke: #d9dade; }
.td-fe-anneau .td-arc-choisi { stroke: var(--ha-jaune); }
.td-fe-kicker { font-size: 12px; }
.td-fe-titre { margin-top: 14px; font-weight: 900; font-size: 52px; line-height: 1; letter-spacing: -.04em; }
.td-fe-sous { margin-top: 12px; font-weight: 700; font-size: 19px; line-height: 1.4; letter-spacing: -.01em; }
.td-fe-parties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 32px 40px 40px; }
.td-fe-partie-titre { font-weight: 900; font-size: 20px; line-height: 1.15; letter-spacing: -.015em; }
.td-fe-partie .td-legal-ecrire { margin-top: 12px; }

/* --- 20. les pages de lecture : une feuille plein écran, comme une page légale ----------------- */
.td-lecture[hidden] { display: none; }
.td-lecture {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 90;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--ha-blanc); color: var(--ha-noir); font-family: var(--ha-sans);
}
.td-lecture:focus { outline: none; }

.td-mf-haut {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start;
  margin: 0 16px; padding: 78px 80px 64px; border-radius: 40px; background: var(--ha-noir); color: var(--ha-blanc);
}
.td-mf-decor { position: absolute; z-index: 0; right: 0; top: 0; width: 58%; height: 100%; pointer-events: none; }
.td-mf-haut > :not(.td-mf-decor) { position: relative; z-index: 1; }
.td-mf-kicker { font-size: 13px; color: rgba(255, 255, 255, .78); }
.td-mf-kicker::before { box-shadow: none; }
.td-mf-titre { max-width: 13em; margin-top: 24px; font-weight: 900; font-size: clamp(44px, 5.6vw, 86px); line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.td-mf-chapeau { max-width: 40em; margin-top: 24px; font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.td-mf-sommaire { margin-top: 40px; }
.td-mf-sommaire-titre { font-family: var(--ha-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
.td-mf-sommaire ol { counter-reset: td-mfs; display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.td-mf-sommaire li { counter-increment: td-mfs; }
.td-mf-sommaire a {
  display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 20px 0 16px; border-radius: 100px;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  color: var(--ha-blanc); font-weight: 700; font-size: 16px; text-decoration: none;
}
.td-mf-sommaire a::before { content: counter(td-mfs, decimal-leading-zero); font-family: var(--ha-mono); font-size: 12px; font-weight: 400; color: var(--ha-jaune); }
.td-mf-sommaire a:hover { background: var(--ha-blanc); color: var(--ha-noir); }
.td-mf-sommaire a:hover::before { color: var(--ha-noir); }

.td-mf-corps { width: min(880px, 100% - 2 * var(--ha-gouttiere)); margin: 0 auto; padding: 40px 0 24px; }
.td-mf-chapitre { padding: 56px 0 24px; scroll-margin-top: 104px; }
.td-mf-chapitre + .td-mf-chapitre { border-top: 1px solid var(--ha-trait); }
.td-mf-chapitre-tete { display: flex; align-items: baseline; gap: 18px; }
.td-mf-num { flex: none; padding: 3px 8px; border-radius: 6px; background: var(--ha-jaune); font-family: var(--ha-mono); font-size: 13px; font-weight: 700; line-height: 1.3; }
.td-mf-chapitre-titre { font-weight: 900; font-size: 40px; line-height: 1.05; letter-spacing: -.035em; }
.td-mf-contenu { margin-top: 30px; }
.td-mf-intro { font-size: 24px; line-height: 1.5; letter-spacing: -.01em; }
.td-mf-l { display: block; }
.td-mf-valeurs { counter-reset: td-mfv; margin: 34px 0 0; padding: 0; list-style: none; border-top: 2px solid var(--ha-noir); }
.td-mf-valeurs li { counter-increment: td-mfv; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: baseline; padding: 24px 0 26px; border-bottom: 1px solid var(--ha-trait); }
.td-mf-valeurs li::before { content: counter(td-mfv, decimal-leading-zero); font-family: var(--ha-mono); font-size: 13px; color: var(--ha-texte-3); }
.td-mf-valeur b { display: block; font-weight: 900; font-size: 34px; line-height: 1.1; letter-spacing: -.03em; color: var(--ha-noir); }
.td-mf-valeur span { display: block; margin-top: 8px; font-weight: 400; font-size: 22px; line-height: 1.4; color: var(--ha-noir); }
.td-mf-conclusion { margin-top: 34px; padding: 22px 26px; border-radius: 20px; background: var(--ha-fond); box-shadow: inset 4px 0 0 var(--ha-jaune); font-weight: 700; font-size: 22px; line-height: 1.45; letter-spacing: -.01em; }
.td-mf-principes-titre { font-weight: 700; font-size: 24px; line-height: 1.3; letter-spacing: -.015em; }
.td-mf-principes-chapeau { margin-top: 8px; font-style: italic; font-weight: 400; font-size: 19px; line-height: 1.5; color: var(--ha-noir); }
.td-mf-principes { counter-reset: td-mfp; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.td-mf-principes li { counter-increment: td-mfp; display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 26px; border-radius: 24px; background: var(--ha-fond); }
.td-mf-principes li::before { content: counter(td-mfp, decimal-leading-zero); align-self: flex-start; padding: 2px 8px; border-radius: 6px; background: var(--ha-blanc); font-family: var(--ha-mono); font-size: 13px; font-weight: 700; color: var(--ha-noir); }
.td-mf-principe { font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.td-mf-auteurs { columns: 3; column-gap: 32px; margin: 0; padding: 0; list-style: none; }
.td-mf-auteurs li { break-inside: avoid; padding: 9px 0; border-bottom: 1px solid var(--ha-trait); font-weight: 700; font-size: 18px; line-height: 1.3; }
.td-mf-notice { margin-top: 32px; padding: 18px 22px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--ha-trait); font-family: var(--ha-mono); font-size: 13px; line-height: 1.6; color: var(--ha-noir); }
.td-mf-traduction { margin-top: 12px; font-family: var(--ha-mono); font-size: 11.5px; line-height: 1.5; color: var(--ha-noir); }
.td-mf-source { flex: 1 1 24em; font-family: var(--ha-mono); font-size: 12px; line-height: 1.5; color: var(--ha-texte-2); }
.td-mf-pied .td-legal-autre svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.td-lire { width: min(1040px, 100% - 2 * var(--ha-gouttiere)); margin: 0 auto; padding: 4px 0 calc(96px + var(--rt-barre, 0px)); }
.td-lire-visuel { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 8; border-radius: 32px; }
.td-lire-visuel.td-visuel-cas { padding: 36px 64px; }
.td-lire-visuel .hd-ecran { max-width: 760px; margin: 0 auto; }
.td-lire-corps { display: flex; flex-direction: column; align-items: flex-start; max-width: 760px; margin: 0 auto; padding-top: 44px; }
.td-lire-titre { margin-top: 18px; font-weight: 900; font-size: clamp(40px, 5vw, 68px); line-height: 1; letter-spacing: -.042em; text-wrap: balance; }
.td-lire-chapeau { margin-top: 18px; max-width: 36em; font-size: 21px; line-height: 1.5; color: var(--ha-texte-2); text-wrap: pretty; }
.td-lire-valeurs-titre { margin-top: 44px; }
.td-lire .td-valeur { font-size: 19px; }
.td-lire-message {
  margin-top: 32px; padding-left: 20px; border-left: 4px solid var(--ha-jaune);
  font-weight: 700; font-size: 21px; line-height: 1.45; letter-spacing: -.01em; text-wrap: pretty;
}
.td-lire-lien { margin-top: 32px; height: 48px; padding: 0 22px; font-size: 16px; }
.td-lire-estampille { margin-top: 18px; }
.td-lire-chiffre { align-self: stretch; margin-top: 30px; padding: 24px 28px; }
.td-lire-chiffre b { font-size: 52px; }
.td-lire-mention { margin-top: 18px; text-align: left; }
.td-lire-suite { align-self: stretch; margin-top: 44px; }

/* --- 22. les largeurs moyennes et le téléphone ----------------------------------------------- */
@media (max-width: 1240px) {
  .td-builders-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  /* l'addition sur deux temps : les trois termes côte à côte, puis « = » et le résultat dessous */
  .td-equation { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr); row-gap: 6px; }
  .td-signe-egal { grid-column: 1 / -1; padding: 6px 0 2px; }
  .td-resultat { grid-column: 2 / 5; flex-direction: row; align-items: center; justify-content: flex-start; }
  .td-services-corps { grid-template-columns: minmax(0, 1fr); }
  .td-offres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .td-onglet-titre { font-size: 26px; }
  .td-panneau-onglet { padding: 44px 36px 40px; }
  .td-facon-terrain { margin: 8px -36px -40px; }
}
@media (max-width: 900px) {
  .td-contenus-grille { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .td-offres { grid-template-columns: minmax(0, 1fr); }
  .td-fp { grid-template-columns: minmax(0, 1fr); }
  .td-fp-tete { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 22px; align-items: center; padding: 24px 72px 26px 24px; }
  .td-fp-identite { margin-top: 0; }
  .td-fp-texte { grid-column: 1 / -1; }
  .td-fe-parties { grid-template-columns: minmax(0, 1fr); }
  .td-mf-principes { grid-template-columns: minmax(0, 1fr); }
  .td-mf-auteurs { columns: 2; }
}
@media (max-width: 760px) {
  .td-facons-chapeau { font-size: 18px; }
  /* les deux onglets l'un sous l'autre, chacun un grand bouton lisible */
  .td-onglets { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .td-onglet { min-height: 92px; padding: 16px 14px 16px 16px; column-gap: 14px; border-radius: 24px; }
  .td-onglet-titre { font-size: 22px; }
  .td-onglet-pour { font-size: 11.5px; }
  .td-onglet-rond { width: 44px; height: 44px; }
  /* l'un sous l'autre : seul le dernier onglet, posé sur le panneau, le pointe */
  .td-onglet[aria-selected="true"]:not(:last-child)::after { display: none; }
  .td-onglet-rond svg { width: 17px; height: 17px; }
  .td-panneau-onglet { margin-top: 12px; padding: 30px 16px 24px; border-radius: 28px; }
  .td-facon-decor { width: 120%; right: -30%; top: -40px; }
  .td-facon-verbe { font-size: 24px; }
  .td-facon-phrase { font-size: 16px; }
  /* l'addition en colonne : chaque terme sur sa ligne, les signes gardés entre eux */
  .td-equation { grid-template-columns: minmax(0, 1fr); row-gap: 2px; margin-top: 18px; }
  .td-signe, .td-signe-egal { grid-column: auto; padding: 0; font-size: 46px; line-height: .9; }
  .td-terme, .td-resultat { grid-column: auto; flex-direction: row; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 20px; }
  .td-terme-icone, .td-resultat-portrait { width: 48px; height: 48px; border-radius: 15px; }
  .td-terme-icone svg { width: 34px; height: 34px; }
  .td-terme-icone img { width: 20px; }
  .td-terme-texte { font-size: 17px; }
  .td-resultat-texte { font-size: 24px; }
  .td-qualites { margin-top: 30px; padding-top: 24px; }
  .td-builders-intitule { margin-top: 30px; }
  .td-builders-grille { grid-template-columns: minmax(0, 1fr); }
  .td-services-corps { margin-top: 24px; }
  .td-cycle { padding: 22px 16px 18px; border-radius: 22px; }
  .td-cycle-titre { font-size: 22px; }
  .td-cycle-corps { grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: center; }
  .td-anneau svg { width: 140px; height: 140px; }
  .td-etapes { justify-self: stretch; }
  .td-offre { padding: 18px 18px 20px; }
  .td-facon-terrain { height: 96px; margin: 6px -16px -24px; }
  .td-contenus { padding: 72px 8px 0; }
  .td-contenus-decor { top: -40px; width: 900px; height: 200px; margin-left: -450px; }
  .td-contenus-titre { font-size: 36px; }
  .td-contenus-chapeau { font-size: 17px; }
  .td-contenus-grille { margin-top: 32px; gap: 10px; }
  .td-vignette { padding: 8px; border-radius: 26px; }
  .td-vignette-visuel { border-radius: 18px; }
  .td-vignette-corps { padding: 18px 12px 12px; }
  .td-vignette-titre { font-size: 23px; }
  .td-vignette-texte { font-size: 15.5px; }
  .td-lire-visuel { aspect-ratio: 4 / 3; border-radius: 22px; }
  .td-lire-visuel.td-visuel-cas { aspect-ratio: auto; padding: 18px 14px; }
  .td-lire-corps { padding-top: 30px; }
  .td-lire-titre { margin-top: 14px; font-size: clamp(34px, 10vw, 48px); }
  .td-lire-chapeau { font-size: 18px; }
  .td-lire .td-valeur { font-size: 17px; }
  .td-lire-message { font-size: 18px; }
  .td-lire-chiffre b { font-size: 42px; }
  .td-lire-estampille { display: inline-block; max-width: 100%; padding: 8px 14px; border-radius: 16px; line-height: 1.6; white-space: normal; }
  .td-mf-haut { margin: 0 8px; padding: 40px 22px 34px; border-radius: 28px; }
  .td-mf-decor { width: 100%; height: 46%; top: auto; bottom: 0; opacity: .7; }
  .td-mf-titre { margin-top: 18px; font-size: clamp(36px, 10.5vw, 54px); line-height: 1; letter-spacing: -.04em; }
  .td-mf-chapeau { font-size: 16px; }
  .td-mf-sommaire ol { flex-direction: column; align-items: stretch; }
  .td-mf-sommaire a { width: 100%; }
  .td-mf-corps { padding-top: 16px; }
  .td-mf-chapitre { padding: 40px 0 16px; scroll-margin-top: 80px; }
  .td-mf-chapitre-titre { font-size: 30px; }
  .td-mf-intro { font-size: 19px; }
  .td-mf-intro .td-mf-l, .td-mf-conclusion .td-mf-l { display: inline; }
  .td-mf-valeurs li { grid-template-columns: 40px minmax(0, 1fr); padding: 18px 0 20px; }
  .td-mf-valeur b { font-size: 25px; }
  .td-mf-valeur span { font-size: 18px; }
  .td-mf-conclusion { padding: 18px; font-size: 18px; }
  .td-mf-principes-chapeau { font-size: 17px; }
  .td-mf-principe { font-size: 16.5px; }
  .td-mf-principes li { padding: 18px 18px 22px; border-radius: 20px; }
  .td-mf-auteurs li { font-size: 16px; }
}
@media (max-width: 640px) {
  /* au téléphone, les fenêtres prennent tout l'écran */
  .td-fenetre, .td-fenetre-etape {
    left: 0; top: 0; right: 0; bottom: 0; transform: none;
    width: 100%; height: 100%; max-height: none; border-radius: 0; box-shadow: none;
  }
  .td-fenetre-fermer { top: 12px; right: 12px; }
  .td-fp-tete { grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; padding: 20px 64px 22px 18px; }
  .td-fp-portrait { border-radius: 16px; }
  .td-fp-nom { font-size: 30px; }
  .td-fp-texte { margin-top: 16px; font-size: 16.5px; }
  .td-fp-parties { gap: 26px; padding: 26px 18px calc(32px + var(--rt-barre, 0px)); }
  .td-fp-competences { grid-template-columns: minmax(0, 1fr); }
  .td-fe-tete { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 22px 64px 22px 18px; }
  .td-fe-anneau { width: 84px; height: 84px; }
  .td-fe-titre { font-size: 36px; }
  .td-fe-sous { font-size: 16.5px; }
  .td-fe-parties { padding: 22px 18px calc(32px + var(--rt-barre, 0px)); }
  .td-mf-auteurs { columns: 1; }
}

/* --- 23. Proudly since 2026 : la photo de l'équipe en grand, le texte en une ligne dessous ; le carnet de route sous le premier pas --- */
.td-proudly { width: min(1280px, 100% - 32px); margin: 104px auto 0; font-family: var(--ha-sans); }
.td-proudly-carte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 40px; background: var(--ha-fond); color: var(--ha-noir); }
/* la photo garde ses proportions, sur toute la largeur de la carte */
.td-proudly-photo { position: relative; margin: 0; border-radius: 30px; overflow: hidden; background: #dfe0e4; }
.td-proudly-photo::before { content: ""; display: block; padding-top: calc(802 / 1400 * 100%); }
.td-proudly-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.td-proudly-texte { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 44px; padding: 18px 20px 16px 22px; }
.td-proudly-titre {
  font-family: var(--ha-geant); font-weight: 500; font-size: 50px; line-height: .9; letter-spacing: -.01em;
  color: var(--ha-noir); white-space: nowrap; margin-left: 14px;
}
.td-proudly-phrase { margin: 0; font-weight: 700; font-size: clamp(19px, 1.75vw, 26px); line-height: 1.18; letter-spacing: -.02em; color: var(--ha-noir); text-wrap: pretty; }
.td-proudly-action { height: 48px; padding: 0 20px 0 24px; font-family: var(--ha-sans); }
@media (max-width: 899px) {
  .td-proudly-texte { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 18px; padding: 20px 18px 12px; }
}
@media (max-width: 760px) {
  .td-proudly { width: calc(100% - 16px); margin-top: 72px; }
  .td-proudly-carte { padding: 8px; border-radius: 28px; gap: 8px; }
  .td-proudly-photo { border-radius: 22px; }
  .td-proudly-texte { padding: 16px 10px 6px; }
  .td-proudly-titre { white-space: normal; }
  .td-proudly-actions { align-self: stretch; justify-self: stretch; }
  .td-proudly-action { width: 100%; height: 54px; gap: 8px; padding: 0 16px; font-size: 15px; white-space: normal; text-align: center; }
}
/* le carnet de route sous le premier pas, plus discret : en lignes, une vignette par ligne, la petite image à gauche */
.td-contenus { padding-top: 64px; }
.td-contenus .td-contenus-decor { display: none; }
.td-contenus .td-contenus-kicker { font-size: 12px; }
.td-contenus .td-contenus-titre { margin-top: 10px; font-size: 30px; letter-spacing: -.03em; }
.td-contenus .td-contenus-chapeau { margin-top: 8px; font-size: 15.5px; }
.td-contenus .td-contenus-grille { grid-template-columns: minmax(0, 1fr); max-width: 860px; margin-top: 22px; gap: 0; }
.td-contenus .td-vignette { flex-direction: row; align-items: center; gap: 22px; padding: 16px 0; border-radius: 0; background: transparent; box-shadow: none; border-top: 1px solid var(--ha-trait); }
.td-contenus .td-vignette:last-child { border-bottom: 1px solid var(--ha-trait); }
.td-contenus .td-vignette-attente { outline: none; }
.td-contenus .td-vignette-visuel { width: 176px; border-radius: 12px; }
.td-contenus .td-vignette-corps { padding: 0; }
.td-contenus .td-vignette-titre { margin-top: 8px; font-size: 18px; }
.td-contenus .td-vignette-texte { margin-top: 4px; margin-bottom: 10px; font-size: 14px; }
.td-contenus .td-vignette-lien { height: 34px; padding: 0 14px; font-size: 13.5px; }
@media (max-width: 640px) {
  .td-contenus { padding-top: 48px; }
  .td-contenus .td-vignette { gap: 14px; align-items: flex-start; }
  .td-contenus .td-vignette-visuel { width: 104px; }
  .td-contenus .td-vignette-titre { font-size: 16.5px; }
  .td-contenus .td-attente-mot { height: 26px; padding: 0 8px; font-size: 11px; letter-spacing: 0; white-space: nowrap; }
}