/* ==========================================================================
   COPRO PERFORMANCE CONSEIL — Design System
   Conseil indépendant en copropriété
   --------------------------------------------------------------------------
   Sommaire
   01. Tokens
   02. Reset & bases
   03. Typographie
   04. Layout & container
   05. Boutons & liens
   06. Header / navigation
   07. Hero
   08. Sections & composants
   09. Cartes
   10. Méthodologie
   11. FAQ
   12. Formulaires
   13. Footer
   14. Animations & motion
   15. Utilitaires
   16. Responsive
   17. Impression
   ========================================================================== */

/* ==========================================================================
   01. TOKENS
   ========================================================================== */

:root {
  /* --- Couleurs de marque --- */
  --ink-900: #071320;
  --ink-800: #0B1C2C;
  --ink-700: #12293D;
  --ink-600: #1D3B53;
  --ink-400: #415769;
  --ink-300: #6B8497;
  --ink-200: #B4C4CF;

  --paper: #FBFAF7;
  --paper-2: #F4F0E9;
  --paper-3: #EAE4DA;
  --white: #FFFFFF;

  /* Vert « conseil » — sérieux, rassurant, associé à la performance */
  --accent: #17614F;
  --accent-hover: #0F4A3B;
  --accent-soft: #E7F0EC;
  --accent-border: #C3DAD1;

  /* Laiton — micro-accent premium, usage parcimonieux */
  --brass: #B9924F;
  --brass-soft: #F5EEE1;

  --danger: #A63A2B;
  --danger-soft: #FBEDEA;

  /* --- Sémantique --- */
  --bg: var(--paper);
  --bg-alt: var(--paper-2);
  --surface: var(--white);
  --text: var(--ink-800);
  --text-muted: var(--ink-400);
  --text-invert: #EEF3F6;
  --border: rgba(11, 28, 44, 0.10);
  --border-strong: rgba(11, 28, 44, 0.18);

  /* --- Typographie --- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Échelle fluide.
     Resserrée : le premier jeu montait à 59 px pour un h1 et 47 px pour un
     h2 à 1440 px — une échelle d'affiche. Un cabinet de conseil se lit à
     une densité plus proche du document que du poster. Les valeurs hautes
     descendent d'environ 20 %, les basses ne bougent presque pas : sur
     mobile, la taille était déjà juste. */
  --fs-xs: 0.75rem;
  --fs-sm: 0.845rem;
  --fs-base: clamp(0.97rem, 0.95rem + 0.11vw, 1rem);
  --fs-lg: clamp(1.05rem, 1rem + 0.2vw, 1.15rem);
  --fs-xl: clamp(1.15rem, 1.06rem + 0.36vw, 1.35rem);
  --fs-h4: clamp(1.05rem, 1rem + 0.26vw, 1.2rem);
  --fs-h3: clamp(1.2rem, 1.08rem + 0.5vw, 1.5rem);
  --fs-h2: clamp(1.5rem, 1.25rem + 1.05vw, 2.1rem);
  --fs-h1: clamp(1.9rem, 1.5rem + 1.7vw, 2.9rem);
  --fs-display: clamp(2.2rem, 1.6rem + 2.2vw, 3.4rem);

  --lh-tight: 1.06;
  --lh-snug: 1.18;
  --lh-body: 1.68;

  /* --- Espacement --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  /* 128 px de respiration verticale par section produisaient une page
     trois fois plus haute que nécessaire. */
  --section-y: clamp(2.85rem, 2rem + 3.3vw, 4.75rem);

  /* --- Formes --- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- Ombres --- */
  --shadow-xs: 0 1px 2px rgba(7, 19, 32, 0.05);
  --shadow-sm: 0 2px 8px rgba(7, 19, 32, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(7, 19, 32, 0.18);
  --shadow-lg: 0 28px 60px -28px rgba(7, 19, 32, 0.30);

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 780px;
  --gutter: clamp(1.15rem, 0.7rem + 1.9vw, 2.5rem);
  --header-h: 76px;

  /* --- Transitions --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms var(--ease-out);
  --t-base: 280ms var(--ease-out);
  --t-slow: 620ms var(--ease-out);
}

/* ==========================================================================
   02. RESET & BASES
   ========================================================================== */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-6) 0;
}

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

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Lien d'évitement (accessibilité clavier) */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--ink-800);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top var(--t-fast);
}

.skip-link:focus {
  top: var(--sp-4);
}

/* ==========================================================================
   03. TYPOGRAPHIE
   ========================================================================== */

h1,
h2,
h3,
h4,
h5 {
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -0.022em;
  text-wrap: balance;
  color: var(--ink-900);
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.035em;
}

h2 {
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
}

h3 {
  font-size: var(--fs-h3);
}

h4 {
  font-size: var(--fs-h4);
}

p {
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--ink-600);
}

.muted {
  color: var(--text-muted);
}

strong,
b {
  font-weight: 650;
  color: var(--ink-900);
}

/* Sur-titre de section */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--fs-xs);
  font-weight: 620;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  flex: none;
}

.eyebrow--center::before {
  display: none;
}

/* Titre accentué */
.accent-text {
  color: var(--accent);
}

.serif-em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Lien texte souligné animé */
.link-underline {
  position: relative;
  display: inline-block;
  font-weight: 560;
  color: var(--accent);
  padding-bottom: 1px;
}

.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-base);
}

.link-underline:hover::after,
.link-underline:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ==========================================================================
   04. LAYOUT & CONTAINER
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
}

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

.section--tight {
  padding-block: calc(var(--section-y) * 0.62);
}

.section--alt {
  background: var(--bg-alt);
}

.section--ink {
  background: var(--ink-900);
  color: var(--text-invert);
}

/* Section claire « pâle » — bleu très pâle de la palette. Retenue plutôt que
   le beige --paper-2 : « La relation » suit immédiatement une section
   --section--alt, déjà beige ; deux beiges contigus supprimaient la coupure.
   Aucune règle de couleur n'est nécessaire ici : les valeurs par défaut du
   design system (titres --ink-800, texte --text-muted, accent --accent) sont
   toutes conçues pour un fond clair et vérifiées AA sur #EEF2F6 :
   titres 15,3:1 · lead 10,4:1 · texte de carte 6,7:1 · accent 6,5:1. */
.section--pale {
  background: #EEF2F6;
}

.section--ink h1,
.section--ink h2,
.section--ink h3,
.section--ink h4 {
  color: #fff;
}

.section--ink .lead,
.section--ink p {
  color: rgba(238, 243, 246, 0.76);
}

.section--ink .eyebrow {
  color: #7FD3B8;
}

/* En-tête de section */
.section-head {
  max-width: 62ch;
  margin-bottom: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
}

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

.section-head p {
  margin-top: var(--sp-4);
}

/* Grilles */
.grid {
  display: grid;
  gap: var(--sp-5);
}

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

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

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

.grid--gap-lg {
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* Duo texte + visuel */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4.5vw, 5rem);
  align-items: center;
}

.split--wide-left {
  grid-template-columns: 1.15fr 0.85fr;
}

.split--wide-right {
  grid-template-columns: 0.85fr 1.15fr;
}

/* Filet décoratif */
.rule {
  height: 1px;
  background: linear-gradient(
    to right,
    var(--border-strong),
    transparent
  );
  border: 0;
  margin: 0;
}

/* ==========================================================================
   05. BOUTONS & LIENS
   ========================================================================== */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  --btn-bd: var(--accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95rem 1.6rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-pill);
  transition: background var(--t-base), border-color var(--t-base),
    color var(--t-base), transform var(--t-fast), box-shadow var(--t-base);
  will-change: transform;
  text-align: center;
}

.btn:hover {
  --btn-bg: var(--accent-hover);
  --btn-bd: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
}

.btn .btn__arrow {
  transition: transform var(--t-base);
  flex: none;
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* Variantes */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink-800);
  --btn-bd: var(--border-strong);
}

.btn--ghost:hover {
  --btn-bg: var(--ink-900);
  --btn-fg: #fff;
  --btn-bd: var(--ink-900);
}

.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--ink-900);
  --btn-bd: #fff;
}

.btn--light:hover {
  --btn-bg: var(--accent-soft);
  --btn-fg: var(--ink-900);
  --btn-bd: var(--accent-soft);
}

.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.3);
}

.btn--outline-light:hover {
  --btn-bg: rgba(255, 255, 255, 0.1);
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.55);
}

.btn--lg {
  padding: 1.05rem 1.6rem;
  font-size: var(--fs-base);
}

.btn--block {
  width: 100%;
}

/* Groupe de CTA */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.btn-group--center {
  justify-content: center;
}

/* Bouton d'appel a l'action isole sous un bloc de texte. `.cta-band` est
   centre, mais `.btn-group` est un flex qui laissait le bouton cale a
   gauche. Centrage explicite, >= 32 px au-dessus et >= 48 px en dessous
   (0,5 rem ici + le padding bas du bandeau, au minimum 2,5 rem). */
.btn-group--cta {
  justify-content: center;
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
}

.btn-group--cta .btn {
  max-width: 100%;
}

/* ==========================================================================
   06. HEADER / NAVIGATION
   ========================================================================== */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background var(--t-base), box-shadow var(--t-base),
    border-color var(--t-base), height var(--t-base);
  border-bottom: 1px solid transparent;
}

.header.is-stuck {
  height: 64px;
  background: rgba(251, 250, 247, 0.82);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 24px -8px rgba(7, 19, 32, 0.14);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
}

/* Logo */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
  transition: opacity var(--t-fast);
}

.logo:hover {
  opacity: 0.75;
}

.logo__mark {
  width: 34px;
  height: 34px;
  flex: none;
}

.logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo__name {
  font-size: 0.95rem;
  font-weight: 680;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  white-space: nowrap;
}

.logo__tag {
  font-size: 0.6rem;
  font-weight: 560;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Navigation principale */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.3rem + 1.6vw, 2.1rem);
}

.nav__link {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 540;
  color: var(--ink-600);
  padding: 0.4rem 0;
  transition: color var(--t-fast);
  white-space: nowrap;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-base);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--ink-900);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__link[aria-current="page"] {
  font-weight: 620;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
}

/* Le bouton du header porte desormais le libelle complet de la demande
   d'echange, deux fois plus long que l'ancien. Entre 940 px (ou la barre
   passe au burger) et 1180 px, il serait a l'etroit entre la navigation et
   le logo : on resserre la fonte et les marges laterales sur cette plage,
   et on empeche la cesure sur deux lignes. */
.header__actions .btn {
  white-space: nowrap;
}

@media (min-width: 941px) and (max-width: 1180px) {
  .header__actions .btn {
    padding-left: var(--sp-3);
    padding-right: var(--sp-3);
    font-size: var(--fs-sm);
  }
}

/* Burger */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  flex: none;
}

.burger__box {
  position: relative;
  width: 22px;
  height: 14px;
}

.burger__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.8px;
  background: var(--ink-900);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-fast), top var(--t-base);
}

.burger__line:nth-child(1) { top: 0; }
.burger__line:nth-child(2) { top: 6.1px; }
.burger__line:nth-child(3) { top: 12.2px; }

.burger[aria-expanded="true"] .burger__line:nth-child(1) {
  top: 6.1px;
  transform: rotate(45deg);
}

.burger[aria-expanded="true"] .burger__line:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] .burger__line:nth-child(3) {
  top: 6.1px;
  transform: rotate(-45deg);
}

/* Panneau mobile */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--paper);
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-base), transform var(--t-base),
    visibility var(--t-base);
  overflow-y: auto;
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 0.25rem;
  font-size: 1.35rem;
  font-weight: 580;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(10px);
}

.mobile-nav.is-open .mobile-nav__link {
  animation: navItemIn 500ms var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 55ms + 90ms);
}

.mobile-nav__link[aria-current="page"] {
  color: var(--accent);
}

.mobile-nav__link span {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-200);
}

.mobile-nav__footer {
  margin-top: auto;
  padding-top: 2rem;
  display: grid;
  gap: var(--sp-3);
}

@keyframes navItemIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   07. HERO
   ========================================================================== */

.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(1.5rem, 1rem + 2.4vw, 3rem));
  padding-bottom: clamp(2.25rem, 1.6rem + 2.8vw, 4rem);
  overflow: hidden;
}

/* Sur l'accueil, le hero n'ouvre plus la page : le sélecteur de profil le
   précède et réserve déjà la hauteur du header. Sans cette règle, on
   cumule les deux et un trou de près de 200 px s'ouvre entre les deux
   blocs. */
.hero:not(:first-child) {
  padding-top: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
}

.hero::before {
  /* halo lumineux discret */
  content: "";
  position: absolute;
  top: -28%;
  right: -12%;
  width: min(760px, 82vw);
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    rgba(23, 97, 79, 0.09) 0%,
    rgba(23, 97, 79, 0.035) 42%,
    transparent 68%
  );
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.16fr 0.84fr;
  gap: clamp(2rem, 0.8rem + 4vw, 4rem);
  align-items: center;
}

.hero__content {
  max-width: 38rem;
}

.hero h1 {
  margin-bottom: var(--sp-5);
}

.hero__sub {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--ink-600);
  margin-bottom: var(--sp-5);
  /* 46ch decoupait le paragraphe en cinq lignes courtes ; a 54ch il en
     fait trois et le bloc respire mieux face au visuel. */
  max-width: 54ch;
}

.hero__cta {
  margin-bottom: var(--sp-6);
}

/* Mention de gratuité, juste au-dessus des boutons.
   C'est l'objection n°1 qu'elle lève : « combien ça va me coûter de
   simplement vous parler ». Elle doit donc se voir avant le bouton. */
/* Bandeau de réassurance sous le hero */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}

.hero__trust li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  font-weight: 520;
  color: var(--ink-600);
}

.hero__trust svg {
  flex: none;
  color: var(--accent);
}

/* Visuel du hero */
.hero__visual {
  position: relative;
}

.hero__frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
}

.hero__frame img,
.hero__frame svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Carte flottante posée sur le visuel */
.hero__badge {
  position: absolute;
  left: -1.5rem;
  bottom: 2.5rem;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.1rem 1.3rem;
  box-shadow: var(--shadow-lg);
  max-width: 250px;
}

.hero__badge strong {
  display: block;
  font-size: var(--fs-sm);
  margin-bottom: 0.2rem;
}

.hero__badge p {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
}

/* ==========================================================================
   08. SECTIONS & COMPOSANTS
   ========================================================================== */

/* Puce / chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3rem 0.7rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}

/* Étiquette longue : elle se plie sur deux lignes plutôt que de déborder
   de la colonne à 375 px. */
.chip--wide {
  max-width: 100%;
  line-height: 1.35;
  text-align: center;
}

/* Marqueur « à valider » — voir docs/CONTENU-A-VALIDER.md
   Pour masquer partout : ajouter la classe .hide-flags sur <body> */
.flag {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.22rem 0.6rem;
  font-size: 0.63rem;
  font-weight: 620;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  background: var(--brass-soft);
  color: #7A5C24;
  border: 1px dashed rgba(185, 146, 79, 0.55);
  vertical-align: middle;
}

body.hide-flags .flag {
  display: none !important;
}

/* Liste à puces vérifiées */
.check-list {
  display: grid;
  gap: var(--sp-3);
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  line-height: 1.55;
}

.check-list svg {
  flex: none;
  margin-top: 0.35em;
  color: var(--accent);
}

/* Bandeau statistique éditorial (sans chiffres inventés) */
.pull-quote {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  padding-left: var(--sp-5);
  border-left: 2px solid var(--accent);
}

/* Bande de logos / mentions */
.strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4) var(--sp-7);
  padding-block: var(--sp-5);
}

.strip__item {
  font-size: var(--fs-sm);
  font-weight: 560;
  color: var(--ink-300);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   09. CARTES
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.1rem + 1.1vw, 2.15rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform var(--t-base), box-shadow var(--t-base),
    border-color var(--t-base);
  height: 100%;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: var(--sp-4);
  flex: none;
}

.card__title {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.card__text {
  color: var(--text-muted);
  line-height: 1.62;
  font-size: var(--fs-sm);
}

.card__link {
  margin-top: auto;
  padding-top: var(--sp-5);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
}

.card__link svg {
  transition: transform var(--t-base);
}

.card:hover .card__link svg {
  transform: translateX(4px);
}

/* Carte cliquable en entier (lien étendu) */
.card--link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Carte « problème » */
.card--problem {
  background: transparent;
  border: 0;
  border-top: 2px solid var(--border-strong);
  border-radius: 0;
  padding: var(--sp-5) 0 0;
  transition: border-color var(--t-base);
}

.card--problem:hover {
  transform: none;
  box-shadow: none;
  border-top-color: var(--accent);
}

.card--problem .card__title {
  font-size: var(--fs-base);
  font-weight: 640;
}

/* Carte sur fond sombre */
.section--ink .card {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.11);
}

.section--ink .card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Sur fond sombre, ces règles doivent l'emporter sur les couleurs
   « muted » définies plus bas pour .value-card et .step (même
   spécificité sinon → contraste insuffisant). */
.section--ink .card__text,
.section--ink .value-card p {
  color: rgba(238, 243, 246, 0.8);
}

.section--ink .card__icon {
  background: rgba(127, 211, 184, 0.12);
  color: #7FD3B8;
}

/* Carte « valeur » numérotée */
.value-card {
  position: relative;
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--border);
}

.value-card__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
  display: block;
  margin-bottom: var(--sp-3);
}

/* Le niveau du titre depend de la page : h3 la ou une section h2 le
   precede, h2 sur le plan du site ou il ouvre le contenu. Le style ne
   doit pas dependre de ce choix semantique. */
.value-card h2,
.value-card h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-3);
}

.value-card p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.62;
}

/* Bloc service détaillé (page Services) */
.service-block {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  padding-block: clamp(3rem, 2rem + 3vw, 5rem);
  border-top: 1px solid var(--border);
  align-items: start;
}

.service-block__aside {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
}

.service-block__num {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--accent);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: var(--sp-4);
}

.service-block h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-4);
}

.service-block__steps {
  display: grid;
  gap: var(--sp-6);
}

.service-step__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--fs-xs);
  font-weight: 620;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin-bottom: var(--sp-2);
}

.service-step__label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.service-step h3 {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin-bottom: var(--sp-2);
  letter-spacing: -0.02em;
}

.service-step p {
  color: var(--text-muted);
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   09 bis. PREMIER ECHANGE ET DIAGNOSTIC
   -------------------------------------------------------------------------- */

.price-lead {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  background: var(--ink-900);
  color: var(--text-invert);
  border-radius: var(--r-xl);
}

.price-lead::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: min(560px, 70%);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(23,97,79,.55) 0%, transparent 68%);
  pointer-events: none;
}

.price-lead > * { position: relative; }

.price-lead h3 {
  color: #fff;
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-3);
}

.price-lead p {
  color: rgba(238, 243, 246, 0.8);
  max-width: 52ch;
}

/* `.price-lead p` a la meme specificite : on la depasse explicitement */
.price-lead p.price-lead__tag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #7FD3B8;
}

.price-lead p.price-lead__tag span {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(238, 243, 246, 0.62);
}

@media (max-width: 720px) {
  .price-lead { grid-template-columns: 1fr; }
}

/* ==========================================================================
   10. MÉTHODOLOGIE
   ========================================================================== */

.steps {
  display: grid;
  gap: 0;
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: minmax(90px, 130px) 1fr;
  gap: clamp(1.5rem, 0.8rem + 2.6vw, 3.5rem);
  padding-block: clamp(2rem, 1.4rem + 2vw, 3rem);
  border-top: 1px solid var(--border);
  align-items: start;
  transition: background var(--t-base);
}

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

/* Variante compacte, employee sur l'accueil : les cinq etapes y servent
   de repere, le detail vit sur approche.html. Un tiers de hauteur en
   moins sans toucher a la lisibilite. */
.steps--compact .step {
  padding-block: clamp(1.25rem, 1rem + 1.1vw, 1.9rem);
}

.steps--compact .step__body p {
  font-size: var(--fs-sm);
}

.step__num {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink-200);
  line-height: 1;
  transition: color var(--t-base);
}

.step:hover .step__num {
  color: var(--accent);
}

.step__body h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-3);
}

.step__body p {
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 62ch;
}

.step__meta {
  margin-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* Variante claire de la section « Le déroulé » (approche.html).
   Le fond encre d'origine écrasait une page déjà longue : même trame, posée
   sur un gris très clair. Toutes les couleurs héritées du fond sombre sont
   reprises ici, aucune ne subsiste. */
.section--etapes {
  background: #F7F8FA;
  color: #1A1A1A;
}

.section--etapes h2,
.section--etapes .step__body h3 {
  color: #0B1C2C;
}

/* Texte courant — #1A1A1A sur #F7F8FA : 16,4:1 */
.section--etapes p,
.section--etapes .lead,
.section--etapes .step__body p {
  color: #1A1A1A;
}

/* Le sur-titre garde le vert de marque commun a toutes les sections
   claires : 6,9:1 sur #F7F8FA. */
.section--etapes .eyebrow {
  color: var(--accent);
}

.section--etapes .step,
.section--etapes .step:last-child {
  border-color: #D9D9D9;
}

/* Numéros d'étape. Le laiton demandé (#B08D57) plafonne à 2,9:1 sur ce
   fond — sous le seuil AA même en grand texte, et les numéros retombent à
   22,4 px sous 720 px. Assombri à 4,8:1, la teinte dorée est conservée. */
.section--etapes .step__num,
.section--etapes .step:hover .step__num,
.section--etapes .step.is-active .step__num {
  color: #8A6A2F;
}

/* « systematiquement commente a l'oral » et toute autre mise en valeur :
   `strong` est calé globalement sur --ink-900, invisible sur l'ancien fond
   encre. Sur fond clair il reprend la couleur des titres, souligné d'un
   filet laiton. */
.section--etapes .step__body strong {
  color: #0B1C2C;
  border-bottom: 2px solid #B08D57;
  padding-bottom: 1px;
}

/* Étiquettes : texte encre sur blanc, 17,3:1 */
.section--etapes .chip {
  background: var(--white);
  color: #0B1C2C;
  border-color: #D9D9D9;
}

/* Le halo du curseur était un vert clair pensé pour le fond sombre. */
.section--etapes.spotlight::after {
  background: radial-gradient(
    620px circle at var(--sx, 50%) var(--sy, 30%),
    rgba(23, 97, 79, 0.06),
    transparent 65%
  );
}

/* --------------------------------------------------------------------------
   Variante « diagramme » de la méthodologie (approche.html)
   --------------------------------------------------------------------------
   Les cinq étapes se lisent comme un schéma de processus : un rail vertical
   qui se trace au défilement, un nœud numéroté par étape, une fiche à droite.

   Deux moteurs déjà présents pilotent l'ensemble, aucun script n'est ajouté :
     • `[data-trace-methode]` (signature.js) écrit --p, de 0 à 1, selon la
       position de la section dans la fenêtre → hauteur du rail plein ;
     • `initSteps` (main.js) pose .is-active sur l'étape centrée → nœud allumé.

   La variante compacte de syndic-professionnel.html n'est pas concernée :
   tout est porté par .steps--diagram.
   -------------------------------------------------------------------------- */

.steps--diagram {
  --node: 54px;
  --gutter: clamp(1rem, 0.6rem + 1.4vw, 2rem);
  position: relative;
  grid-template-columns: 1fr;
  /* Les paragraphes sont plafonnes a 62ch : au-dela, la fiche s'etirerait
     en laissant la moitie droite vide. On cale le schema sur sa mesure. */
  max-width: 52rem;
}

/* Rail creux : il court du centre du premier nœud à celui du dernier. */
.steps--diagram::before,
.steps--diagram::after {
  content: "";
  position: absolute;
  left: calc(var(--node) / 2);
  top: calc(var(--node) / 2);
  bottom: calc(var(--node) / 2);
  width: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  pointer-events: none;
}

.steps--diagram::before {
  background: #DCE0E6;
}

/* Rail plein : la progression suit le défilement. `transform` plutôt que
   `height` — la propriété est composée, la mise à jour ne déclenche pas
   de calcul de mise en page à chaque image. */
.steps--diagram::after {
  background: #B08D57;
  transform: translateX(-50%) scaleY(var(--p, 0));
  transform-origin: top center;
}

.steps--diagram .step,
.steps--diagram .step:last-child {
  grid-template-columns: var(--node) 1fr;
  gap: var(--gutter);
  border: 0;
  padding-block: clamp(0.6rem, 0.4rem + 0.9vw, 1.1rem);
  align-items: start;
}

/* Le rail doit démarrer et finir au centre d'un nœud, pas dans le vide. */
.steps--diagram .step:first-child { padding-top: 0; }
.steps--diagram .step:last-child  { padding-bottom: 0; }

/* --- Le nœud ---------------------------------------------------------- */
.steps--diagram .step__num {
  position: relative;
  z-index: 1;
  width: var(--node);
  height: var(--node);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid #DCE0E6;
  /* Le nœud garde sa taille : c'est un repère de schéma, pas un titre. */
  font-size: 1.05rem;
  line-height: 1;
  color: #8A6A2F;             /* 5,1:1 sur blanc */
  transition:
    border-color var(--t-base),
    box-shadow var(--t-base),
    transform var(--t-base);
}

.steps--diagram .step.is-active .step__num,
.steps--diagram .step:hover .step__num {
  border-color: #B08D57;
  box-shadow: 0 0 0 6px rgba(176, 141, 87, 0.13);
  transform: scale(1.06);
  color: #8A6A2F;
}

/* --- La fiche ---------------------------------------------------------- */
.steps--diagram .step__body {
  position: relative;
  background: var(--white);
  border: 1px solid #E4E7EC;
  border-radius: var(--r-md);
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.65rem) clamp(1.15rem, 0.9rem + 1vw, 1.9rem);
  box-shadow: var(--shadow-xs);
  transition:
    border-color var(--t-base),
    box-shadow var(--t-base),
    transform var(--t-base);
}

.steps--diagram .step.is-active .step__body {
  border-color: #DFD0B4;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Le trait qui relie le rail à la fiche : il se tire à l'activation. */
.steps--diagram .step__body::before {
  content: "";
  position: absolute;
  top: calc(var(--node) / 2 - 1px);
  right: 100%;
  width: var(--gutter);
  height: 2px;
  background: #DCE0E6;
  transform: scaleX(0.35);
  transform-origin: left center;
  transition: transform var(--t-base), background var(--t-base);
}

.steps--diagram .step.is-active .step__body::before {
  background: #B08D57;
  transform: scaleX(1);
}

.steps--diagram .step__body h3 {
  margin-bottom: var(--sp-2);
}

/* Sur la fiche blanche, l'étiquette blanche disparaîtrait : elle reprend le
   gris de fond de la section. #0B1C2C sur #F7F8FA = 16,2:1. */
.section--etapes .steps--diagram .chip {
  background: #F7F8FA;
  border-color: #DCE0E6;
  color: #0B1C2C;
}

/* --------------------------------------------------------------------------
   Diagramme — écrans étroits
   Le rail est conservé : c'est lui qui porte la lecture en étapes. Seules
   les dimensions se resserrent. `.step` repasserait en une colonne à 940 px
   (§ 16), la variante l'emporte par spécificité.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .steps--diagram {
    --node: 42px;
    --gutter: 0.85rem;
  }

  .steps--diagram .step__num {
    font-size: 0.9rem;
    border-width: 1.5px;
  }

  /* Trop court pour se voir, et il mange la largeur de la fiche. */
  .steps--diagram .step__body::before {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Mouvement réduit
   signature.js n'écrit pas --p dans ce mode : sans cette règle le rail
   plein resterait à zéro. Il s'affiche donc complet, d'emblée.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .steps--diagram { --p: 1; }

  .steps--diagram .step__num,
  .steps--diagram .step__body,
  .steps--diagram .step__body::before {
    transition: none;
  }

  .steps--diagram .step.is-active .step__num { transform: none; }
  .steps--diagram .step.is-active .step__body { transform: none; }
}

/* ==========================================================================
   11. FAQ
   ========================================================================== */

.faq {
  border-top: 1px solid var(--border);
}

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
  padding: clamp(1.25rem, 1rem + 0.7vw, 1.75rem) 0;
  text-align: left;
  font-size: var(--fs-lg);
  font-weight: 580;
  letter-spacing: -0.018em;
  color: var(--ink-900);
  line-height: 1.4;
  transition: color var(--t-fast);
}

.faq__trigger:hover {
  color: var(--accent);
}

.faq__icon {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.2em;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  transition: background var(--t-base), border-color var(--t-base),
    transform var(--t-base);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: opacity var(--t-fast), transform var(--t-base);
}

.faq__icon::before {
  width: 10px;
  height: 1.5px;
}

.faq__icon::after {
  width: 1.5px;
  height: 10px;
}

.faq__trigger[aria-expanded="true"] .faq__icon {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: rotate(180deg);
}

.faq__trigger[aria-expanded="true"] .faq__icon::after {
  opacity: 0;
}

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms var(--ease-out);
}

.faq__panel.is-open {
  grid-template-rows: 1fr;
}

.faq__panel > div {
  overflow: hidden;
}

.faq__answer {
  padding-bottom: clamp(1.25rem, 1rem + 0.7vw, 1.75rem);
  padding-right: clamp(0rem, -2rem + 6vw, 3.5rem);
  color: var(--text-muted);
  line-height: 1.68;
}

.faq__answer p + p {
  margin-top: var(--sp-3);
}

.faq__answer a {
  color: var(--accent);
  font-weight: 560;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   12. FORMULAIRES
   ========================================================================== */

.form {
  display: grid;
  gap: var(--sp-5);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.field {
  display: grid;
  gap: 0.45rem;
  /* Empêche le contrôle de s'étirer quand le champ voisin
     porte une ligne d'aide supplémentaire. */
  align-content: start;
}

.field__label {
  font-size: var(--fs-sm);
  font-weight: 580;
  color: var(--ink-700);
}

.field__label .req {
  color: var(--danger);
  margin-left: 0.15em;
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

.field__control {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: var(--fs-base);
  color: var(--ink-900);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast),
    background var(--t-fast);
}

.field__control::placeholder {
  color: var(--ink-200);
}

.field__control:hover {
  border-color: var(--ink-300);
}

.field__control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

textarea.field__control {
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
}

select.field__control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234A6379' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
  cursor: pointer;
}

/* Case à cocher RGPD */
.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  cursor: pointer;
}

.checkbox input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.18em;
  accent-color: var(--accent);
  cursor: pointer;
  flex: none;
}

.checkbox span {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-muted);
}

.checkbox a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* États de validation */
.field__control[aria-invalid="true"] {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.field__error {
  font-size: var(--fs-xs);
  font-weight: 560;
  color: var(--danger);
  display: none;
}

.field.has-error .field__error {
  display: block;
}

/* Message de retour du formulaire */
.form__status {
  padding: 1rem 1.25rem;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.55;
  display: none;
}

.form__status.is-visible {
  display: block;
}

.form__status--ok {
  background: var(--accent-soft);
  color: var(--accent-hover);
  border: 1px solid var(--accent-border);
}

.form__status--err {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid rgba(166, 58, 43, 0.25);
}

/* Anti-spam (champ leurre) */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Page contact — formulaire, puis deux cartes complémentaires
   --------------------------------------------------------------------------
   Le formulaire est l'élément principal : il occupe seul la largeur utile.
   Les deux cartes viennent dessous, à égalité de largeur, sur un fond clair
   qui les distingue de la page sans concurrencer le formulaire.
   -------------------------------------------------------------------------- */

.contact-layout {
  display: grid;
  gap: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
  max-width: 920px;
}

/* La carte « Nous joindre » ayant ete retiree, il ne reste qu'une carte :
   une grille figee a deux colonnes la laisserait a mi-largeur. `auto-fit`
   lui fait occuper toute la ligne, tout en reprenant deux colonnes si une
   seconde carte revient un jour. */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  align-items: stretch;
}

.contact-card {
  --contact-or: #B08D57; /* laiton de la page contact, réservé aux numéros */

  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 1.1rem + 1.1vw, 2.15rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}


.contact-card__title {
  font-size: var(--fs-h3);
  color: #0B1C2C;
  margin-top: var(--sp-2);
}

/* Carte sans surtitre : on réserve la hauteur de l'œillet de la carte
   voisine pour que les deux titres restent sur la même ligne de base. */
.contact-card__title--seul {
  margin-top: calc(var(--fs-xs) * 1.4 + var(--sp-2));
}

.contact-card__intro {
  color: #1A1A1A;
  font-size: var(--fs-sm);
  line-height: 1.62;
  margin-top: var(--sp-4);
}

.contact-card__list {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

.contact-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: start;
}

.contact-item__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  flex: none;
}

.contact-item dt {
  font-size: var(--fs-xs);
  font-weight: 620;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.contact-item dd {
  margin: 0;
  font-size: var(--fs-base);
  color: #1A1A1A;
  line-height: 1.5;
}

.contact-item dd a {
  color: #0B1C2C;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-item dd a:hover {
  color: var(--accent);
}

/* Étapes 01–04. Les numéros sont un repère visuel, doublé par l'ordre du
   <ol> : ils sont masqués aux lecteurs d'écran (aria-hidden dans le HTML).
   Composés en gras à 1.5rem, ils relèvent du « texte de grande taille »
   WCAG (seuil 3:1) — le laiton #B08D57 sur blanc mesure 3,1:1. */
.contact-steps {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  list-style: none;
  padding: 0;
}

.contact-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: #1A1A1A;
}

.contact-steps__num {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--contact-or);
  flex: none;
}

/* Sous 768 px, les deux cartes s'empilent : côte à côte, elles tomberaient
   sous le plancher de lisibilité de la ligne de texte. */
@media (max-width: 768px) {
  .contact-cards {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */

.footer {
  background: var(--ink-900);
  color: rgba(238, 243, 246, 0.82);
  padding-block: clamp(3rem, 2rem + 3vw, 5rem) var(--sp-6);
  font-size: var(--fs-sm);
}

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  padding-bottom: var(--sp-7);
}

.footer .logo__name {
  color: #fff;
}

.footer .logo__tag {
  color: rgba(238, 243, 246, 0.7);
}

.footer__pitch {
  margin-top: var(--sp-4);
  max-width: 38ch;
  line-height: 1.62;
}

.footer__col h3 {
  font-size: var(--fs-xs);
  font-weight: 620;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(238, 243, 246, 0.66);
  margin-bottom: var(--sp-4);
}

.footer__col ul {
  display: grid;
  gap: 0.7rem;
}

.footer__col a {
  color: rgba(238, 243, 246, 0.72);
  transition: color var(--t-fast);
}

.footer__col a:hover {
  color: #fff;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-xs);
  color: rgba(238, 243, 246, 0.7);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.footer__legal a:hover {
  color: #fff;
}

/* Bandeau CTA final */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--ink-900);
  color: var(--text-invert);
  border-radius: var(--r-xl);
  padding: clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
  text-align: center;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: auto -10% -60% -10%;
  aspect-ratio: 2.4;
  background: radial-gradient(
    ellipse at center,
    rgba(23, 97, 79, 0.42) 0%,
    transparent 66%
  );
  pointer-events: none;
}

.cta-band > * {
  position: relative;
}

.cta-band h2 {
  color: #fff;
  max-width: 20ch;
  margin-inline: auto;
}

.cta-band p {
  max-width: 54ch;
  margin: var(--sp-4) auto var(--sp-6);
  color: rgba(238, 243, 246, 0.74);
}

/* Accroche du bandeau final : le gris translucide (0,74) tombait sous le
   confort de lecture, et --fs-base descend a 15,5 px. Couleur pleine
   (#E8EDF2 sur --ink-900 : 15,8:1), plancher de 16 px, interlignage 1,5. */
.cta-band p.cta-band__accroche {
  color: #E8EDF2;
  font-size: 1rem;
  line-height: 1.5;
}

/* Deuxieme ligne du titre : meme voix que le titre, un cran en dessous.
   `.cta-band p` a la meme specificite : on la depasse explicitement. */
.cta-band p.cta-band__sous-titre {
  max-width: 24ch;
  margin: var(--sp-2) auto 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.86);
}

/* --- Bloc de présentation du fondateur --- */
/* Portrait à gauche, texte à droite. Le bloc est borné en largeur et les deux
   colonnes sont proportionnelles : la précédente version fixait le texte à
   62ch en calant le tout à gauche, ce qui laissait une bande morte de près de
   200 px à droite sur un écran large. Les colonnes se répondent verticalement
   (`center`) au lieu de pendre depuis le haut. */
.fondateur {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 1.55fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  /* Deux colonnes ne peuvent pas remplir 1120 px sans soit un portrait de
     556 px de large, soit une ligne de 84 caracteres. Le bloc est donc borne
     — et centre, pour que la place restante se lise comme deux marges egales
     et non comme un trou a droite. Le titre de section est centre avec lui. */
  max-width: 58rem;
  margin-inline: auto;
}

/* Le portrait reprend le cadre photo maison (.media) : voile de révélation,
   blur-up et léger Ken Burns, comme toutes les autres photos du site.
   Le ratio 4/5 de .media--tall correspond exactement au fichier 800 × 1000. */
.fondateur__portrait {
  margin: 0;
  /* La photo est cadrée sur un fond très sombre. Sur fond clair elle se
     découperait en rectangle flottant : l'anneau extérieur et l'ombre basse
     lui donnent une assise, sans retoucher le fichier. */
  box-shadow: 0 0 0 1px var(--border), var(--shadow-lg);
}

/* Liseré intérieur clair : adoucit la coupure franche entre le fond sombre
   de la photo et le fond clair de la page. Au-dessus du voile (z-index 2)
   pour rester visible pendant la révélation. */
.fondateur__portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.fondateur__nom {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-2);
}

.fondateur__fonction {
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--ink-600);
  margin-bottom: var(--sp-4);
}

.fondateur__parcours {
  color: var(--text);
  margin-bottom: var(--sp-4);
}

.fondateur__mentions {
  font-size: var(--fs-sm);
  color: var(--ink-600);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

/* Sous 860 px, deux colonnes réduisaient le portrait à 200 px de large :
   il devenait un timbre posé à côté d'un pavé de texte. On empile, et le
   portrait reprend une largeur qui tient debout. */
@media (max-width: 860px) {
  .fondateur {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    max-width: none;
    align-items: start;
  }

  .fondateur__portrait {
    width: min(320px, 100%);
  }

  /* Empile, le texte prendrait toute la largeur : 88 caracteres par ligne a
     768 px. On le borne a une mesure de lecture. */
  .fondateur__texte {
    max-width: 62ch;
  }
}

/* ==========================================================================
   14. ANIMATIONS & MOTION
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 780ms var(--ease-out), transform 780ms var(--ease-out);
  transition-delay: calc(var(--d, 0) * 85ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="left"] {
  transform: translateX(-26px);
}

[data-reveal="right"] {
  transform: translateX(26px);
}

[data-reveal="scale"] {
  transform: scale(0.965);
}

/* Ligne qui se dessine */
[data-reveal="line"] {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease-out);
}

[data-reveal="line"].is-visible {
  transform: scaleX(1);
}

/* Parallaxe douce */
[data-parallax] {
  will-change: transform;
}

/* --------------------------------------------------------------------------
   14 bis. ANIMATIONS AVANCÉES
   -------------------------------------------------------------------------- */

/* --- Barre de progression de lecture --- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--accent), #7FD3B8);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
  pointer-events: none;
}

/* --- Cadre photo : révélation + Ken Burns + blur-up --- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--paper-2) center/cover no-repeat;
  isolation: isolate;
}

.media--tall { aspect-ratio: 4 / 5; }
.media--wide { aspect-ratio: 2 / 1; }
.media--box  { aspect-ratio: 16 / 10; }

/* Sur mobile, un cadre large ne fait plus que ~170 px de haut : la légende en
   surimpression mange alors les deux tiers de la photo. On redresse le cadre
   en 4/3, la légende ne couvre plus qu'un tiers. */
@media (max-width: 720px) {
  .media--box { aspect-ratio: 5 / 4; }
}

/* Cadrage haut : pour une source en portrait recadrée en paysage, le centre
   par défaut coupe le sujet. On remonte la fenêtre de recadrage. */
.media__img--haut { object-position: 50% 38%; }

/* <picture> ne doit pas casser le dimensionnement du cadre */
.media picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Le cadre du hero garde son rayon plus large */
.hero__frame.media {
  border-radius: var(--r-xl);
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 900ms var(--ease-out), transform 1200ms var(--ease-out);
  will-change: transform, opacity;
}

.media img.is-loaded {
  opacity: 1;
  transform: scale(1.02);
}

/* Voile de révélation qui se retire */
.media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--paper-2);
  transform: scaleY(1);
  transform-origin: bottom;
  transition: transform 1000ms cubic-bezier(0.76, 0, 0.24, 1);
  pointer-events: none;
}

.media.is-visible::after {
  transform: scaleY(0);
}

.section--ink .media::after,
.media--on-ink::after {
  background: var(--ink-800);
}

/* Légère teinte de marque sur les photos, pour l'harmonie chromatique */
.media--tint::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    170deg,
    rgba(23, 97, 79, 0.10) 0%,
    rgba(11, 28, 44, 0.06) 55%,
    rgba(11, 28, 44, 0.20) 100%
  );
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Cartouche posée sur une photo */
.media__caption {
  position: absolute;
  z-index: 3;
  left: 1rem;
  bottom: 1rem;
  right: 1rem;
  /* Sur un cadre large, une légende courte étirée sur 1 200 px se lit comme
     une barre vide : on la borne à une mesure de lecture. En dessous de cette
     largeur, `right` reprend la main et la légende reste dans le cadre. */
  max-width: 48ch;
  padding: 0.85rem 1.05rem;
  background: rgba(251, 250, 247, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-700);
  box-shadow: var(--shadow-md);
}

.media__caption strong {
  display: block;
  font-size: var(--fs-sm);
  margin-bottom: 0.15rem;
}

@media (max-width: 520px) {
  .media__caption {
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.6rem;
    padding: 0.7rem 0.85rem;
  }
}

/* --- Bandeau photo pleine largeur --- */
.photo-band {
  position: relative;
  height: clamp(260px, 18rem + 12vw, 460px);
  overflow: hidden;
  background: var(--ink-800);
}

.photo-band img {
  width: 100%;
  height: 118%;
  object-fit: cover;
  /* cadrage bas : on privilégie les toits plutôt que le ciel */
  object-position: 50% 78%;
  will-change: transform;
}

.photo-band__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--gutter);
  background: linear-gradient(
    to bottom,
    rgba(7, 19, 32, 0.42),
    rgba(7, 19, 32, 0.62)
  );
}

.photo-band__overlay p {
  max-width: 30ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1rem + 1.7vw, 2.4rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

/* --- Révélation mot à mot des titres --- */
[data-split] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

[data-split] .w-i {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 900ms var(--ease-out);
  transition-delay: calc(var(--wi, 0) * 42ms);
  will-change: transform;
}

[data-split].is-visible .w-i {
  transform: translateY(0);
}

/* --- Étape active dans la méthodologie --- */
.step {
  --step-line: var(--border);
}

.step__num {
  position: relative;
  display: inline-block;
}

.step.is-active .step__num {
  color: var(--accent);
}

.step__bar {
  display: block;
  width: 0;
  height: 2px;
  margin-top: 0.6rem;
  background: currentColor;
  opacity: 0.55;
  transition: width 700ms var(--ease-out);
}

.step.is-active .step__bar {
  width: 2.6rem;
}

/* --- Compteur de section discret --- */
.section-count {
  position: fixed;
  right: clamp(0.75rem, 0.3rem + 1.2vw, 2rem);
  bottom: clamp(0.75rem, 0.3rem + 1.2vw, 2rem);
  z-index: 90;
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--ink-600);
  background: rgba(251, 250, 247, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-base), transform var(--t-base);
}

.section-count.is-on {
  opacity: 1;
  transform: none;
}

@media (min-width: 941px) {
  .section-count { display: inline-flex; }
}

.section-count b {
  color: var(--accent);
  font-weight: 600;
}

/* --- Micro-interaction : flèche magnétique --- */
.btn__arrow,
.card__link svg {
  will-change: transform;
}

/* --- Soulignement progressif des titres de section --- */
.section-head h2 {
  position: relative;
}

/* --- Apparition en fondu-montée des lignes de liste --- */
.check-list li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: calc(var(--li, 0) * 70ms);
}

.check-list.is-visible li,
.check-list li.is-visible {
  opacity: 1;
  transform: none;
}

/* Respect des préférences système */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .mobile-nav.is-open .mobile-nav__link {
    opacity: 1;
    transform: none;
    animation: none;
  }

  /* Animations avancées : tout est neutralisé, rien n'est masqué */
  .media::after { transform: scaleY(0) !important; }
  .media img { opacity: 1 !important; transform: none !important; }
  [data-split] .w-i { transform: none !important; }
  [data-split] .w { overflow: visible; }
  .check-list li { opacity: 1 !important; transform: none !important; }
  .scroll-progress,
  .section-count { display: none !important; }
  .photo-band img { transform: none !important; height: 100%; }
  .step__bar { transition: none; }
}

/* ==========================================================================
   15. UTILITAIRES
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.measure { max-width: 66ch; }
.relative { position: relative; }

/* Fil d'Ariane */
.breadcrumb {
  padding-top: calc(var(--header-h) + 1.75rem);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 0.5rem;
  color: var(--ink-200);
}

.breadcrumb a:hover {
  color: var(--accent);
}

.breadcrumb [aria-current="page"] {
  color: var(--ink-700);
  font-weight: 560;
}

/* En-tête de page intérieure */
.page-head {
  padding-top: var(--sp-5);
  padding-bottom: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
}

/* Le header est en `position: fixed` : il ne pousse rien. Sur la plupart
   des pages, le fil d'Ariane placé en tête de <main> fait office de
   dégagement. Quand .page-head ouvre directement la page, ce dégagement
   n'existe pas et le sur-titre passe sous le logo.

   Plutôt que de compter sur la présence d'un fil d'Ariane, la section se
   réserve elle-même la hauteur du header dès qu'elle est en première
   position. */
main > .page-head:first-child {
  padding-top: calc(var(--header-h) + var(--sp-5));
}

.page-head h1 {
  max-width: 18ch;
}

.page-head .lead {
  max-width: 58ch;
  margin-top: var(--sp-5);
}

/* Sommaire d'ancres */
.anchor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}

.anchor-nav a {
  padding: 0.45rem 0.9rem;
  font-size: var(--fs-sm);
  font-weight: 540;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  color: var(--ink-600);
  transition: all var(--t-fast);
}

.anchor-nav a:hover {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}

/* Contenu éditorial long (pages légales) */
.prose {
  max-width: 72ch;
}

.prose h2 {
  font-size: var(--fs-h3);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-4);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  font-size: var(--fs-lg);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
}

.prose p,
.prose ul,
.prose ol {
  margin-bottom: var(--sp-4);
  color: var(--ink-600);
}

.prose ul {
  list-style: disc;
  padding-left: 1.35rem;
}

.prose ol {
  list-style: decimal;
  padding-left: 1.35rem;
}

.prose li {
  margin-bottom: var(--sp-2);
  line-height: 1.68;
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
}

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

.prose th {
  font-weight: 620;
  color: var(--ink-900);
  background: var(--bg-alt);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--sp-7);
  }

  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 940px) {
  .nav,
  .header__actions .btn {
    display: none;
  }

  .burger {
    display: flex;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }

  .hero__content {
    max-width: 100%;
  }

  .hero__frame {
    aspect-ratio: 16 / 11;
  }

  .hero__badge {
    left: auto;
    right: 1rem;
    bottom: 1rem;
  }

  .split,
  .split--wide-left,
  .split--wide-right {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .service-block {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .service-block__aside {
    position: static;
  }

  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  :root {
    --header-h: 66px;
  }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .form__row {
    grid-template-columns: 1fr;
  }

  .step {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .step__num {
    font-size: 1.4rem;
  }

  .footer__top {
    grid-template-columns: 1fr;
  }

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

  .btn-group .btn {
    width: 100%;
  }

  .hero__badge {
    position: static;
    max-width: 100%;
    margin-top: var(--sp-4);
    box-shadow: none;
  }

  .pull-quote {
    padding-left: var(--sp-4);
  }
}

@media (max-width: 420px) {
  .logo__tag {
    display: none;
  }
}

/* ==========================================================================
   14 bis. SÉLECTEUR DE PROFIL
   --------------------------------------------------------------------------
   Première chose vue en page d'accueil. Cinq portes d'entrée vers cinq
   pages : ce sont des liens, donc ils fonctionnent sans JavaScript, se
   parcourent au clavier et s'ouvrent dans un nouvel onglet.
   ========================================================================== */

.profils-section {
  padding-top: calc(var(--header-h) + clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem));
  padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}

.profils-head {
  text-align: center;
  margin-bottom: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
}

.profils-lead {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 62ch;
  margin-inline: auto;
}

/* ==========================================================================
   LE DIAGRAMME DE CHOIX
   --------------------------------------------------------------------------
   Un nœud racine qui se ramifie vers cinq destinations. Les traits sont
   tracés en CSS et non en SVG : ils suivent ainsi la grille quelle que
   soit la largeur, sans qu'aucune coordonnée n'ait à être recalculée.

   Géométrie horizontale : la grille compte cinq colonnes égales, donc le
   centre de la première est à 10 % et celui de la dernière à 90 %. La
   barre de distribution s'étend exactement entre ces deux points.
   ========================================================================== */

.diagramme {
  --trait: var(--border-strong);
  --tige: 26px;          /* hauteur de chaque segment vertical */
  --gap: 0.75rem;        /* gouttière de la grille — entre aussi dans le calcul
                            de la barre de distribution, voir plus bas */
  --n: 4;                /* nombre de nœuds. La grille ET la barre en dépendent :
                            ajouter ou retirer un profil ne demande donc de
                            changer qu'une seule valeur. */
}

/* --- Le nœud racine --- */
.diagramme__racine {
  position: relative;
  display: block;
  width: max-content;
  margin: 0 auto var(--tige);
  padding: 0.5rem 1.4rem;
  border: 1px solid var(--ink-800);
  border-radius: var(--r-pill);
  background: var(--ink-800);
  color: var(--text-invert);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* La tige qui descend de la racine vers la barre de distribution */
.diagramme__racine::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: var(--tige);
  background: var(--trait);
}

/* --- La ramification --- */
.diagramme__branches {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  gap: var(--gap);
  padding-top: var(--tige);
}

/* La barre horizontale, du centre de la première colonne au centre de la
   dernière.

   Un pourcentage fixe serait faux : avec N colonnes et N−1 gouttières,
   une colonne ne vaut pas 100/N pour cent de la largeur. La demi-colonne
   vaut (100 % − (N−1) × gouttière) / 2N. Sans ce calcul, la barre n'atteint
   pas les descentes extrêmes — ou les dépasse dès qu'on retire un nœud. */
.diagramme__branches::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc((100% - (var(--n) - 1) * var(--gap)) / (2 * var(--n)));
  right: calc((100% - (var(--n) - 1) * var(--gap)) / (2 * var(--n)));
  height: 1px;
  background: var(--trait);
}

/* La descente de la barre vers chaque nœud */
.noeud::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 1px;
  height: var(--tige);
  background: var(--trait);
}

/* --- Les nœuds --- */
.noeud {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.45rem;
  padding: 0.95rem 1rem 1.1rem;
  border: 1px solid var(--trait);
  border-radius: var(--r-sm);
  background: var(--surface);
  text-decoration: none;
  transition: border-color var(--t-fast), background var(--t-fast),
    box-shadow var(--t-fast);
}

.noeud:hover,
.noeud:focus-visible {
  border-color: var(--ink-800);
  background: var(--paper-2);
  box-shadow: var(--shadow-sm);
}

/* Le trait qui mène au nœud survolé s'assombrit : on voit le chemin. */
.noeud:hover::before,
.noeud:focus-visible::before {
  background: var(--ink-800);
}

.noeud .noeud__icone {
  width: 24px;
  height: 24px;
  color: var(--accent);
}

.noeud .noeud__icone svg {
  width: 24px;
  height: 24px;
  overflow: visible;
}

.noeud__titre {
  font-size: var(--fs-sm);
  font-weight: 640;
  line-height: 1.3;
  color: var(--ink-900);
}

.noeud__sous {
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Sous 960 px, cinq colonnes deviennent illisibles : le nœud tombe à
   125 px de large et « Membre du conseil syndical » se brise sur trois
   lignes. L'arbre bascule alors à la verticale — une colonne vertébrale à
   gauche, une amorce horizontale vers chaque nœud. C'est toujours un
   diagramme, simplement lu de haut en bas.
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .diagramme {
    --tige: 18px;
    --rail: 15px;        /* abscisse de la colonne vertébrale */
    --relais: 16px;      /* longueur de l'amorce horizontale vers un nœud */
    --stub: 1.35rem;     /* hauteur à laquelle l'amorce rejoint le nœud */
  }

  .diagramme__racine {
    width: auto;
    margin-left: 0;
    margin-right: auto;
    margin-bottom: var(--tige);
    border-radius: var(--r-md);
  }

  /* La tige part du rail, plus du centre. */
  .diagramme__racine::after {
    left: var(--rail);
  }

  .diagramme__branches {
    grid-template-columns: 1fr;
    gap: var(--gap);
    padding-top: 0;
    padding-left: calc(var(--rail) + var(--relais));
  }

  /* Plus de colonne vertébrale unique : chaque nœud porte son propre
     segment. Le masquer sous le dernier nœud demandait un rectangle de la
     couleur du fond — une ruse qui casse dès que le fond change. Ici le
     trait s'arrête parce qu'il n'est pas dessiné, pas parce qu'on le
     recouvre. */
  .diagramme__branches::before {
    display: none;
  }

  /* L'amorce horizontale, du rail vers le nœud. */
  .noeud::before {
    bottom: auto;
    top: var(--stub);
    left: calc(-1 * var(--relais));
    width: var(--relais);
    height: 1px;
  }

  /* Le segment de colonne vertébrale : du haut du nœud jusqu'au haut du
     suivant, en traversant la gouttière. */
  .noeud::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: calc(-1 * var(--gap));
    left: calc(-1 * var(--relais));
    width: 1px;
    background: var(--trait);
  }

  /* Sous le dernier nœud, le trait s'arrête à son amorce. */
  .noeud:last-child::after {
    bottom: auto;
    height: var(--stub);
  }

  .noeud {
    grid-template-columns: 24px 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 0.8rem;
    row-gap: 0.15rem;
    padding: 0.85rem 0.95rem;
  }

  .noeud .noeud__icone { grid-row: 1 / 3; margin-top: 0.1rem; }
}

/* --------------------------------------------------------------------------
   Bande de clôture : l'offre en une liste, rien de plus.
   -------------------------------------------------------------------------- */
.resume-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.55rem;
  margin-bottom: var(--sp-6);
  list-style: none;
  padding: 0;
}

.resume-list a {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 520;
  color: var(--ink-700);
  text-decoration: none;
  transition: border-color var(--t-fast), color var(--t-fast);
}

.resume-list a:hover,
.resume-list a:focus-visible {
  border-color: var(--ink-800);
  color: var(--ink-900);
}

.resume-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Prestations retenues pour un profil : une liste de liens, pas des cartes.
   Les cartes illustrées vivent sur services.html ; ici on oriente, on
   n'expose pas.
   -------------------------------------------------------------------------- */
.presta-liens {
  display: grid;
  gap: var(--sp-3);
  border-top: 1px solid var(--border);
}

.presta-lien {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: padding-inline var(--t-base);
}

.presta-lien:hover,
.presta-lien:focus-visible {
  padding-inline: 0.6rem;
  background: var(--accent-soft);
}

.presta-lien__nom {
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--ink-800);
}

.presta-lien__desc {
  grid-column: 1;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 62ch;
}

.presta-lien__fleche {
  grid-row: 1 / 3;
  grid-column: 2;
  display: inline-flex;
  color: var(--accent);
  transition: transform var(--t-base);
}

.presta-lien:hover .presta-lien__fleche {
  transform: translateX(5px);
}

@media (max-width: 560px) {
  .presta-lien {
    grid-template-columns: 1fr;
  }

  .presta-lien__fleche {
    grid-row: auto;
    grid-column: 1;
  }
}

/* --------------------------------------------------------------------------
   Bande de clôture : l'offre en une liste, rien de plus.
   -------------------------------------------------------------------------- */
.resume-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 0.75rem;
  margin-bottom: var(--sp-7);
  list-style: none;
  padding: 0;
}

.resume-list a {
  display: inline-block;
  padding: 0.45rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 540;
  color: var(--ink-700);
  text-decoration: none;
  transition: border-color var(--t-base), color var(--t-base),
    background var(--t-base);
}

.resume-list a:hover,
.resume-list a:focus-visible {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent);
}

.resume-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  text-align: center;
}

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

  /* En colonne unique, l'icône passe à gauche du texte : on gagne de la
     hauteur sans perdre le repère visuel. */
  .profil {
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: var(--sp-4);
  }

  .profil__icone { grid-row: 1 / 3; }
  .profil__fleche { display: none; }
}

/* ==========================================================================
   15 bis. RESSOURCES : INDEX ET ARTICLES
   --------------------------------------------------------------------------
   La page Ressources est un index de cartes ; chaque article vit sur sa
   propre page, ce qui lui permet de viser ses propres requêtes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Index : les cartes d'article
   -------------------------------------------------------------------------- */
.cartes-articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(0.9rem, 0.6rem + 1vw, 1.4rem);
}

.carte-article {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 0.7rem;
  padding: clamp(1.3rem, 1rem + 1vw, 1.8rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-decoration: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast),
    transform var(--t-fast);
}

.carte-article:hover,
.carte-article:focus-visible {
  transform: translateY(-3px);
  border-color: var(--ink-800);
  box-shadow: var(--shadow-md);
}

.carte-article__meta,
.article-meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--fs-xs);
  color: var(--ink-300);
}

.article-cat {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 640;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.68rem;
}

.carte-article__titre {
  font-size: var(--fs-h4);
  font-weight: 640;
  line-height: 1.28;
  color: var(--ink-900);
}

.carte-article__extrait {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
}

.carte-article__lire {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
}

.carte-article__lire svg {
  transition: transform var(--t-fast);
}

.carte-article:hover .carte-article__lire svg {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Page d'article
   -------------------------------------------------------------------------- */
.article-head {
  padding-top: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.article-head .article-meta {
  margin-bottom: var(--sp-4);
}

.article-head h1 {
  font-size: clamp(1.7rem, 1.35rem + 1.5vw, 2.55rem);
  line-height: 1.12;
  margin-bottom: var(--sp-4);
}

/* Le corps rédactionnel : une seule colonne, mesure confortable. */
.article-corps {
  padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  border-top: 1px solid var(--border);
}

.article-corps h2 {
  font-size: var(--fs-h3);
  line-height: 1.22;
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-4);
}

.article-corps h2:first-child {
  margin-top: 0;
}

.article-corps p {
  line-height: 1.72;
  color: var(--ink-600);
  margin-bottom: var(--sp-4);
  max-width: 70ch;
}

.article-corps .check-list {
  margin-bottom: var(--sp-5);
}

/* --------------------------------------------------------------------------
   « L'essentiel » — pour qui ne lit pas tout
   -------------------------------------------------------------------------- */
.essentiel {
  padding: clamp(1.3rem, 1rem + 1.2vw, 1.9rem);
  border: 1px solid var(--accent-border);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--accent-soft);
  margin-bottom: var(--sp-7);
}

.essentiel h2 {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-4);
  color: var(--accent-hover);
}

.essentiel ul {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding-left: 1.1rem;
}

.essentiel li {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-700);
}

/* --------------------------------------------------------------------------
   Sources officielles
   -------------------------------------------------------------------------- */
.article-sources {
  padding-block: var(--sp-6);
  border-top: 1px solid var(--border);
}

.article-sources h2 {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-3);
}

.article-sources .muted {
  font-size: var(--fs-sm);
  line-height: 1.6;
  max-width: 70ch;
}

.sources {
  display: grid;
  gap: var(--sp-3);
  max-width: 68ch;
}

.sources--large {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
  max-width: none;
}

.source {
  /* Trois enfants — éditeur, titre, icône — mais deux colonnes : sans zones
     nommées, l'icône retomberait à la ligne suivante. */
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "editeur icone"
    "titre   icone";
  align-items: center;
  column-gap: var(--sp-4);
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  text-decoration: none;
  transition: border-color var(--t-base), background var(--t-base),
    transform var(--t-base);
}

.source:hover,
.source:focus-visible {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  transform: translateY(-2px);
}

.source__editeur {
  grid-area: editeur;
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 0.2rem;
}

.source__titre {
  grid-area: titre;
  display: block;
  font-size: var(--fs-sm);
  font-weight: 560;
  line-height: 1.4;
  color: var(--ink-800);
}

.source svg {
  grid-area: icone;
  align-self: center;
  flex: none;
  color: var(--ink-300);
  transition: transform var(--t-base), color var(--t-base);
}

.source:hover svg {
  color: var(--accent);
  transform: translate(2px, -2px);
}

/* --------------------------------------------------------------------------
   Passerelle vers la prestation, en fin d'article
   -------------------------------------------------------------------------- */
.article-cta {
  display: grid;
  gap: var(--sp-5);
  padding: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--paper-2);
  margin-bottom: var(--sp-7);
}

.article-cta h2 {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-3);
}

.article-cta p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 62ch;
}

@media (min-width: 761px) {
  /* La colonne des boutons se dimensionne sur son contenu : en fraction
     fixe, le libelle le plus long passait a la ligne. */
  .article-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-6);
  }
}

.article-cta .btn-group {
  flex-direction: column;
  align-items: stretch;
}

.article-cta .btn {
  justify-content: center;
}

/* `nowrap` empêche le libellé le plus long de passer à la ligne dans la
   colonne de droite — mais seulement là où cette colonne existe. En
   dessous de 761 px la mise en page est sur une seule colonne, et forcer
   le non-retour élargissait le bloc de 34 px au-delà de l'écran. */
@media (min-width: 761px) {
  .article-cta .btn {
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   « À lire aussi »
   -------------------------------------------------------------------------- */
.lire-aussi__titre-section {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-5);
}

.lire-aussi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}

.lire-aussi__item {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  text-decoration: none;
  transition: border-color var(--t-fast), transform var(--t-fast);
}

.lire-aussi__item:hover,
.lire-aussi__item:focus-visible {
  transform: translateY(-2px);
  border-color: var(--ink-800);
}

.lire-aussi__cat {
  font-size: 0.68rem;
  font-weight: 640;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.lire-aussi__titre {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-900);
}

/* --------------------------------------------------------------------------
   Avertissement — conservé, encore employé sur les pages profil
   -------------------------------------------------------------------------- */
.avertissement {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  max-width: 78ch;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--brass);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--brass-soft);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-700);
}

.avertissement svg {
  flex: none;
  margin-top: 0.15em;
  color: var(--brass);
}

/* ==========================================================================
   15 ter. PAGE SYNDIC PROFESSIONNEL
   --------------------------------------------------------------------------
   Le syndic professionnel n'est pas un prospect comme un autre : il arrive
   avec trois objections précises. La page y répond dans l'ordre — d'abord
   les règles d'or, ensuite seulement les bénéfices.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Les trois règles d'or
   -------------------------------------------------------------------------- */
.regles {
  padding: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-lg);
  background: var(--accent-soft);
}

.regles__titre {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-5);
  color: var(--accent-hover);
}

.regles__liste {
  display: grid;
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.regles__liste li {
  display: block;
}

/* Numero et titre sur une meme ligne de base, le texte explicatif dessous.
   Le numero a une largeur fixe : les trois titres s'alignent donc entre eux,
   et un titre qui passe sur deux lignes revient sous son propre premier mot
   plutot que sous le numero. */
.regle__entete {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  margin-bottom: 0.4rem;
}

/* Laiton demande (#B08D57) : 2,7:1 sur --accent-soft, sous le seuil AA.
   Assombri a 4,7:1, la teinte doree est conservee. */
.regle__num {
  flex: 0 0 2.25rem;
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1;
  color: #856429;
}

.regle__titre {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-900);
  margin: 0;
}

.regles__liste p,
.regle__texte {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-600);
  max-width: 68ch;
}

@media (min-width: 861px) {
  .regles__liste {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
  }
}

/* --------------------------------------------------------------------------
   Les quatre piliers
   -------------------------------------------------------------------------- */
.piliers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(0.9rem, 0.6rem + 1vw, 1.4rem);
}

.pilier {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 0.55rem;
  padding: clamp(1.3rem, 1rem + 1vw, 1.8rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.pilier__icone {
  display: block;
  width: 34px;
  height: 34px;
  margin-bottom: 0.4rem;
  color: var(--accent);
}

.pilier__icone svg {
  width: 34px;
  height: 34px;
}

.pilier__sur {
  font-size: 0.68rem;
  font-weight: 640;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-300);
}

.pilier__titre {
  font-size: var(--fs-h4);
  line-height: 1.25;
  color: var(--ink-900);
}

.pilier__texte {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Périmètre : ce que nous examinons, ce que nous ne touchons pas.
   La colonne de droite est celle qui rassure — elle mérite d'être aussi
   lisible que l'autre, pas reléguée en petits caractères.
   -------------------------------------------------------------------------- */
.perimetre {
  display: grid;
  gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
}

@media (min-width: 761px) {
  .perimetre {
    grid-template-columns: 1fr 1fr;
  }
}

.perimetre__col {
  padding: clamp(1.2rem, 1rem + 1vw, 1.75rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.perimetre__col--oui {
  border-left: 3px solid var(--accent);
}

.perimetre__col--non {
  border-left: 3px solid var(--ink-200);
  background: var(--paper-2);
}


/* Les deux colonnes ne portent plus de chapeau ni de liste : chacune tient
   en une phrase. Le repere visuel qui les distinguait — la coche d'un cote,
   la barre de l'autre — est donc reporte de `li` sur cette phrase, sinon
   rien ne separerait plus le perimetre inclus du perimetre exclu. */
.perimetre__phrase {
  position: relative;
  padding-left: 1.6rem;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-700);
}

.perimetre__col--non .perimetre__phrase {
  color: var(--text-muted);
}

.perimetre__col--oui .perimetre__phrase::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.perimetre__col--non .perimetre__phrase::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 11px;
  height: 2px;
  border-radius: 1px;
  background: var(--ink-200);
}


/* ==========================================================================
   15 quater. LEVIERS DE CONVERSION
   --------------------------------------------------------------------------
   Visuel du livrable, cas pratique, preuve sociale et CTA collant mobile.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Le rapport rendu — matérialiser un service qui, sans cela, reste abstrait
   -------------------------------------------------------------------------- */
.rapport {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 861px) {
  .rapport {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.rapport__feuille {
  padding: clamp(1rem, 0.7rem + 1.6vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background:
    radial-gradient(ellipse 80% 90% at 50% 0%, var(--accent-soft) 0%, transparent 70%),
    var(--surface);
  box-shadow: var(--shadow-md);
}

.rapport__feuille .illu {
  display: block;
  color: var(--accent);
}

.rapport__feuille .illu svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.rapport__legende {
  display: grid;
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.rapport__legende li {
  position: relative;
  padding-left: 1.7rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 58ch;
}

.rapport__legende li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.rapport__legende strong {
  color: var(--ink-800);
  font-weight: 620;
}

/* --------------------------------------------------------------------------
   Cas pratique — la preuve par l'exemple
   -------------------------------------------------------------------------- */
.cas {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.6vw, 2.25rem);
  padding: clamp(1.4rem, 1.1rem + 1.6vw, 2.25rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

@media (min-width: 761px) {
  .cas {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
}

.cas__chiffre {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.15rem;
  min-width: 140px;
  padding: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  border-radius: var(--r-md);
  background: var(--ink-900);
  color: var(--text-invert);
  text-align: center;
}

.cas__chiffre b {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.7rem + 2vw, 3rem);
  line-height: 1;
  color: #7FD3B8;
  font-weight: 400;
}

.cas__chiffre span {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(238, 243, 246, 0.6);
}


.cas__titre {
  font-size: var(--fs-h4);
  font-weight: 620;
  line-height: 1.3;
  color: var(--ink-900);
  margin-bottom: var(--sp-3);
}

.cas__corps p {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink-600);
  max-width: 62ch;
  margin-bottom: var(--sp-3);
}

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

/* --------------------------------------------------------------------------
   Preuve sociale : disponibilité et témoignages
   -------------------------------------------------------------------------- */
.dispo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}

.dispo__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.dispo__item svg {
  color: var(--accent);
  margin-top: 0.1rem;
}

.dispo__item strong {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ink-900);
  margin-bottom: 0.15rem;
}

.dispo__item span {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
}

.temoignages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
}

.temoignage {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  padding: clamp(1.3rem, 1rem + 1vw, 1.75rem);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-border);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface);
}

.temoignage blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.4;
  color: var(--ink-800);
}

.temoignage figcaption {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
}

/* Énoncé d'objectif : même cadre que le témoignage, mais sans guillemets
   ni attribution — rien ici ne se fait passer pour une parole de client. */
.temoignage__label {
  font-size: 0.7rem;
  font-weight: 640;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.temoignage__texte {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.4;
  color: var(--ink-800);
  max-width: 54ch;
}

/* --------------------------------------------------------------------------
   Les trois craintes du conseil syndical.
   L’objection est citée telle qu’on l’entend, puis la réponse. Les séparer
   visuellement évite que la peur et sa réponse se lisent d’un bloc.
   -------------------------------------------------------------------------- */
.craintes {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 861px) {
  .craintes { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
}

.crainte {
  padding-top: var(--sp-5);
  border-top: 2px solid var(--border-strong);
  transition: border-color var(--t-base);
}

.crainte:hover { border-top-color: var(--accent); }

.crainte__peur {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--ink-900);
  margin-bottom: var(--sp-3);
}

.crainte__réponse {
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 46ch;
}

/* Bandeau des pages légales. Ce n'est pas une note de développement : il
   informe le lecteur que le document n'est pas encore définitif, ce qui
   reste exact tant que les mentions obligatoires ne sont pas fournies. */
.avertissement strong {
  color: var(--ink-900);
}

/* Ligne de contact du 404 : discrète, mais présente. */
.footer__contact-404 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-sm);
  color: rgba(238, 243, 246, 0.7);
}

/* --------------------------------------------------------------------------
   CTA collant mobile
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 190;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(251, 250, 247, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  transform: translateY(110%);
  transition: transform 320ms var(--ease-out);
}

.sticky-cta.is-visible {
  transform: none;
}

/* Au-dessus de 720 px, le bouton du header est déjà visible en permanence :
   un second bouton fixe ne ferait que voler de la place. */
@media (min-width: 721px) {
  .sticky-cta { display: none; }
}

@media print {
  .sticky-cta { display: none; }
}

/* Le CTA collant recouvre le bas de page : on rend au document la hauteur
   qu'il lui prend, sinon les dernières lignes du pied de page sont
   inatteignables. */
@media (max-width: 720px) {
  body:has(.sticky-cta) {
    padding-bottom: 4.5rem;
  }
}

/* ==========================================================================
   16 bis. ROBUSTESSE RESPONSIVE
   --------------------------------------------------------------------------
   Corrections d'un débordement horizontal constaté en dessous de 420 px
   (iPhone SE, Android compacts) : la page se décalait latéralement et le
   formulaire sortait de l'écran.

   Trois causes, aucune n'était visible au-dessus de 768 px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Les éléments de grille et de flex ne descendent pas sous la largeur de
      leur contenu : leur `min-width` vaut `auto` par défaut. Il suffit alors
      d'un seul enfant large — un <select>, une adresse e-mail — pour élargir
      la grille, puis le conteneur, puis la page entière.

      `min-width: 0` les autorise à se comprimer. C'est le correctif de fond :
      sans lui, tout le reste ne serait qu'un pansement.
   -------------------------------------------------------------------------- */
.split > *,
.grid > *,
.steps > *,
.step > *,
.form__row > *,
.form > *,
.field,
.field > *,
.tally > *,
.check-list > *,
.contact-item > * {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   2. Chaînes insécables. Une adresse e-mail ou une URL ne comporte aucun
      point de césure : le navigateur préfère déborder plutôt que couper.
      `overflow-wrap: anywhere` l'autorise à couper là où il faut.
   -------------------------------------------------------------------------- */
.contact-item dd,
.contact-item dd a,
.contact-card a,
.footer a,
.legal a,
.link-underline {
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   3. Contrôles de formulaire. Un <select> adopte spontanément la largeur de
      sa plus longue option — ici « Un accompagnement du conseil syndical ».
      On le ramène à la largeur de son champ.
   -------------------------------------------------------------------------- */
.field__control,
select.field__control,
textarea.field__control {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Le texte saisi ne doit pas non plus élargir le champ. */
textarea.field__control {
  resize: vertical;
}

/* --------------------------------------------------------------------------
   4. Confort de saisie sur mobile. En dessous de 640 px, les champs passent
      à 16 px : en deçà, iOS zoome automatiquement au focus et l'utilisateur
      se retrouve avec une page décalée qu'il doit repincer.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .field__control {
    font-size: 16px;
  }

  /* Cibles tactiles : 44 px de haut, recommandation WCAG 2.5.5. */
  .btn,
  .field__control {
    min-height: 44px;
  }

  .btn-group {
    flex-direction: column;
    align-items: stretch;
  }

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

/* --------------------------------------------------------------------------
   6. Révélations latérales. `[data-reveal="left"]` et `="right"` décalent
      l'élément de 26 px horizontalement EN ATTENDANT d'être déclenchés. Sur
      un écran étroit, un bloc encore non révélé — donc situé sous la ligne
      de flottaison — pousse la page de 26 px vers la droite. L'utilisateur
      voit un décalage latéral sans comprendre d'où il vient.

      En dessous de 720 px les mises en page sont de toute façon sur une
      seule colonne : un décalage horizontal n'y raconte plus rien. On le
      remplace par le décalage vertical, qui ne peut pas déborder.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  [data-reveal="left"],
  [data-reveal="right"] {
    transform: translateY(22px);
  }
}

/* --------------------------------------------------------------------------
   5. Médias. Aucune image, aucun tableau ne doit pouvoir dépasser.
   -------------------------------------------------------------------------- */
img,
svg,
video,
picture {
  max-width: 100%;
}

/* Un tableau large défile dans son propre cadre, jamais la page. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   17. IMPRESSION
   ========================================================================== */

@media print {
  .header,
  .mobile-nav,
  .burger,
  .cta-band,
  .btn,
  .footer__top {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .faq__panel {
    grid-template-rows: 1fr !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }
}


/* ==========================================================================
   17. CTA FLOTTANT (page d'accueil)
   --------------------------------------------------------------------------
   Un seul appel à l'action fixe à la fois : le bouton n'existe qu'entre le
   premier bloc CTA et le suivant, et disparaît dès qu'un vrai bouton est à
   l'écran. Tout le mouvement passe par `transform` et `opacity` — jamais
   `top` ni `left` — pour rester composé par le GPU.
   ========================================================================== */

.cta-flottant {
  position: fixed;
  z-index: 200;
  right: max(24px, var(--gutter));
  bottom: max(24px, env(safe-area-inset-bottom, 0px));

  /* État de départ : hors champ, transparent et non focalisable.
     `visibility` évite qu'une tabulation atteigne un bouton invisible. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out),
    visibility 0s linear 350ms;
}

.cta-flottant.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out),
    visibility 0s linear 0s;
}

.cta-flottant__lien {
  box-shadow: var(--shadow-md);
  transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out),
    color 200ms var(--ease-out), transform 200ms var(--ease-out),
    box-shadow 200ms var(--ease-out);
}

.cta-flottant__lien:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.cta-flottant__lien:active {
  transform: translateY(0);
}

/* Rappel d'attention : un halo qui s'ouvre une fois toutes les 7 secondes.
   Jamais continu, jamais clignotant, et purement décoratif. */
.cta-flottant__lien::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--accent);
  border-radius: var(--r-pill);
  opacity: 0;
  pointer-events: none;
  transform: scale(1);
}

.cta-flottant.is-visible .cta-flottant__lien::after {
  animation: cta-flottant-halo 7s var(--ease-out) 2.5s infinite;
}

@keyframes cta-flottant-halo {
  0%   { opacity: 0;    transform: scale(1); }
  3%   { opacity: 0.55; transform: scale(1); }
  16%  { opacity: 0;    transform: scale(1.16); }
  100% { opacity: 0;    transform: scale(1.16); }
}

/* Mobile : barre pleine largeur, calée sur le bas de l'écran. */
@media (max-width: 720px) {
  .cta-flottant {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(251, 250, 247, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
  }

  .cta-flottant__lien {
    display: flex;
    width: 100%;
    min-height: 48px; /* zone de clic confortable, au-dessus du plancher de 44 px */
  }

  /* La barre recouvre le bas du document : on lui rend la hauteur qu'elle
     prend, sinon les dernières lignes du pied de page sont inatteignables. */
  body:has(.cta-flottant) {
    padding-bottom: 5rem;
  }
}

@media print {
  .cta-flottant { display: none; }
}

/* Mouvement réduit : le bouton reste utile, simplement immobile. */
@media (prefers-reduced-motion: reduce) {
  .cta-flottant.is-visible .cta-flottant__lien::after {
    animation: none;
  }

  .cta-flottant__lien:hover {
    transform: none;
  }
}

/* ==========================================================================
   18. PIED DE PAGE COMPACT (page d'accueil)
   --------------------------------------------------------------------------
   Deux colonnes de liens au lieu de quatre : la grille générale, calibrée
   pour quatre, laissait un vide à droite. On repart d'un partage marque /
   liens, avec des espacements et une hiérarchie propres à cette page.
   ========================================================================== */

/* La colonne de marque recevait 1,15fr — soit près de 590 px à 1280 — alors
   que son contenu est borné à 42ch (~340 px). Les 250 px restants creusaient
   un trou entre la marque et les liens. La marque prend désormais l'espace
   souple, les colonnes de liens sont dimensionnées sur leur contenu et calées
   sur le bord droit : l'écart devient une respiration voulue. */
/* Trois colonnes reelles reparties sur toute la largeur. `.footer__cols` est
   un simple conteneur : `display: contents` le fait disparaitre de la mise en
   page pour que ses deux colonnes deviennent des colonnes du pied de page.
   Sans cela, marque et liens se partagent la largeur en deux et laissent un
   vide de 300 px au milieu. */
.footer--compact .footer__top {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 1.2rem + 2.5vw, 4rem);
  padding-bottom: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
}

.footer--compact .footer__cols {
  display: contents;
}

.footer--compact .footer__marque {
  max-width: 42ch;
}

.footer--compact .footer__pitch {
  margin-top: var(--sp-4);
  max-width: 42ch;
  line-height: 1.68;
  color: rgba(238, 243, 246, 0.72);
}

.footer--compact .footer__col h3 {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: rgba(238, 243, 246, 0.55);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer--compact .footer__col ul {
  gap: 0.62rem;
}

.footer--compact .footer__col a {
  color: rgba(238, 243, 246, 0.8);
  line-height: 1.45;
}

.footer--compact .footer__bottom {
  gap: var(--sp-3) var(--sp-6);
  padding-top: var(--sp-5);
  color: rgba(238, 243, 246, 0.6);
}

.footer--compact .footer__legal {
  gap: var(--sp-3) var(--sp-5);
}

.footer--compact .footer__legal a {
  color: rgba(238, 243, 246, 0.75);
}

/* Sous 860 px : marque en pleine largeur, puis les deux colonnes de liens
   cote a cote. `.footer__cols` redevient une grille a part entiere. */
@media (max-width: 860px) {
  .footer--compact .footer__top {
    grid-template-columns: 1fr;
    row-gap: var(--sp-7);
  }

  .footer--compact .footer__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.75rem, 1rem + 2.5vw, 3.25rem);
  }
}

@media (max-width: 460px) {
  .footer--compact .footer__cols {
    grid-template-columns: 1fr;
    row-gap: var(--sp-6);
  }

  .footer--compact .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   Cartes d'acces (pages profils)
   Deux portes vers l'offre et vers la methode, posees avant l'appel a
   l'action final. La carte entiere est cliquable ; le focus clavier reprend
   le contour global (:focus-visible) et l'etat de survol.
   -------------------------------------------------------------------------- */
.acces-cartes {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 768px) {
  .acces-cartes {
    grid-template-columns: repeat(2, 1fr);
  }
}

.acces-carte {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: clamp(1.3rem, 1rem + 1vw, 1.8rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-decoration: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast),
    transform var(--t-fast);
}

.acces-carte:hover,
.acces-carte:focus-visible {
  transform: translateY(-3px);
  border-color: var(--ink-800);
  box-shadow: var(--shadow-md);
}

.acces-carte__titre {
  margin: 0;
  font-size: var(--fs-h4);
  color: #0B1C2C;
}

.acces-carte__texte {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: #1A1A1A;
}

/* L'action est le bouton principal du site : c'est le seul chemin de cette
   page vers l'offre et vers la methode depuis le retrait des entrees de
   menu. `.btn` fournit la mise en forme ; on ne fixe ici que le calage. */
.acces-carte__lien {
  align-self: flex-start;
  margin-top: var(--sp-1);
}

/* Le bouton n'est qu'un habillage : c'est la carte entiere qui est le lien.
   Il doit donc reagir au survol et au focus de la carte, pas seulement au
   sien. */
.acces-carte:hover .acces-carte__lien,
.acces-carte:focus-visible .acces-carte__lien {
  --btn-bg: var(--accent-hover);
  --btn-bd: var(--accent-hover);
}

.acces-carte:hover .acces-carte__lien .btn__arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .acces-carte {
    transition: none;
  }

  .acces-carte:hover,
  .acces-carte:focus-visible {
    transform: none;
  }
}