/* =========================================================================
   Tree'Top — Design system
   Toute couleur, police, espace, rayon ou ombre est un jeton --ds-*.
   Aucune valeur brute (hexa, px de police) hors de :root. Cf. taches/design.md
   ========================================================================= */

@layer reset, base, composants, utilitaires;

/* ------------------------------------------------------------------ polices */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-variable.fdf9c509a809.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable.260c81a4759b.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------- jetons */
:root {
  /* Couleur — tirée du sujet : canopée, feuille, sécurité, aubier, écorce */
  --ds-canopee: #0f2e1d;
  --ds-canopee-clair: #1b4530;
  --ds-accent: #4e8b2e;
  --ds-accent-fonce: #3d6f24;
  --ds-accent-clair: #7fb552;
  --ds-urgent: #e2572b;
  --ds-urgent-fonce: #c4441d;
  --ds-papier: #f3f4ef;
  --ds-surface: #ffffff;
  --ds-ecorce: #3d3630;
  --ds-ecorce-doux: #6b6157;
  --ds-anneau: #e0dfd6;
  --ds-anneau-fort: #c9c7ba;

  /* Sémantique */
  --ds-texte: var(--ds-ecorce);
  --ds-texte-doux: var(--ds-ecorce-doux);
  --ds-texte-inverse: #f6f8f3;
  --ds-fond: var(--ds-papier);
  --ds-bordure: var(--ds-anneau);
  --ds-succes: #2f7a3e;
  --ds-erreur: #b3341a;

  /* Type */
  --ds-font-heading: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --ds-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;

  --ds-t-surtitre: 0.75rem;
  --ds-t-xs: 0.8125rem;
  --ds-t-s: 0.9375rem;
  --ds-t-base: 1rem;
  --ds-t-m: 1.125rem;
  --ds-t-l: 1.375rem;
  --ds-t-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --ds-t-2xl: clamp(1.9rem, 1.4rem + 2.4vw, 2.75rem);
  --ds-t-3xl: clamp(2.3rem, 1.5rem + 3.8vw, 4rem);

  --ds-lh-titre: 1.08;
  --ds-lh-corps: 1.65;
  --ds-ls-titre: -0.03em;
  --ds-ls-surtitre: 0.14em;

  /* Espace — rythme de 4 */
  --ds-e1: 0.25rem;
  --ds-e2: 0.5rem;
  --ds-e3: 0.75rem;
  --ds-e4: 1rem;
  --ds-e5: 1.5rem;
  --ds-e6: 2rem;
  --ds-e7: 3rem;
  --ds-e8: 4rem;
  --ds-e9: 6rem;
  --ds-section: clamp(3.5rem, 2rem + 6vw, 6rem);

  /* Formes */
  --ds-r-s: 4px;
  --ds-r-m: 8px;
  --ds-r-l: 16px;
  --ds-r-xl: 24px;
  --ds-r-pilule: 999px;

  --ds-ombre-1: 0 1px 2px rgb(15 46 29 / 0.06), 0 2px 8px rgb(15 46 29 / 0.04);
  --ds-ombre-2: 0 2px 6px rgb(15 46 29 / 0.08), 0 12px 28px rgb(15 46 29 / 0.1);
  --ds-ombre-3: 0 8px 20px rgb(15 46 29 / 0.14), 0 24px 56px rgb(15 46 29 / 0.16);

  --ds-contenu: 1180px;
  --ds-texte-large: 68ch;

  --ds-transition: 180ms cubic-bezier(0.2, 0, 0.2, 1);
  --ds-z-topbar: 60;
  --ds-z-widget: 80;
  --ds-z-toasts: 90;
}

/* -------------------------------------------------------------------- reset */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
  }
  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }
  body {
    min-height: 100dvh;
    font-family: var(--ds-font-body);
    font-size: var(--ds-t-base);
    line-height: var(--ds-lh-corps);
    color: var(--ds-texte);
    background: var(--ds-fond);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  img,
  svg,
  video {
    display: block;
    max-width: 100%;
  }
  img {
    height: auto;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }
  button {
    background: none;
    border: 0;
    cursor: pointer;
    touch-action: manipulation;
  }
  a {
    color: inherit;
  }
  h1,
  h2,
  h3,
  h4 {
    font-family: var(--ds-font-heading);
    font-weight: 700;
    line-height: var(--ds-lh-titre);
    letter-spacing: var(--ds-ls-titre);
    text-wrap: balance;
  }
  p {
    text-wrap: pretty;
  }
  [x-cloak] {
    display: none !important;
  }
  /* Indicateurs htmx. Normalement injectés par htmx dans un <style> inline —
     interdit par notre CSP. On les déclare donc ici, et `includeIndicatorStyles`
     est mis à false dans le <meta name="htmx-config"> de base.html. */
  .realisation__credit {
    margin-block-start: var(--ds-e1);
    font-size: var(--ds-t-xs);
    color: var(--ds-texte-doux);
    font-style: italic;
  }
  .htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
  }
  .htmx-request .htmx-indicator,
  .htmx-request.htmx-indicator {
    opacity: 1;
  }
  :focus-visible {
    outline: 3px solid var(--ds-accent-clair);
    outline-offset: 2px;
    border-radius: var(--ds-r-s);
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* --------------------------------------------------------------------- base */
@layer base {
  .contenu {
    width: 100%;
    max-width: var(--ds-contenu);
    margin-inline: auto;
    padding-inline: var(--ds-e5);
  }
  .section {
    padding-block: var(--ds-section);
  }
  .section--sombre {
    background: var(--ds-canopee);
    color: var(--ds-texte-inverse);
  }
  .section--surface {
    background: var(--ds-surface);
  }

  .surtitre {
    display: flex;
    align-items: center;
    gap: var(--ds-e2);
    font-size: var(--ds-t-surtitre);
    font-weight: 600;
    letter-spacing: var(--ds-ls-surtitre);
    text-transform: uppercase;
    color: var(--ds-accent);
    margin-bottom: var(--ds-e3);
  }
  .surtitre::before {
    content: "";
    inline-size: var(--ds-e5);
    block-size: 1px;
    background: currentColor;
  }
  .section--sombre .surtitre {
    color: var(--ds-accent-clair);
  }

  .titre-section {
    font-size: var(--ds-t-2xl);
    max-width: 20ch;
  }
  .intro {
    font-size: var(--ds-t-m);
    color: var(--ds-texte-doux);
    max-width: var(--ds-texte-large);
    margin-top: var(--ds-e4);
  }
  .section--sombre .intro {
    color: color-mix(in srgb, var(--ds-texte-inverse) 78%, transparent);
  }

  .prose {
    max-width: var(--ds-texte-large);
  }
  .prose > * + * {
    margin-top: var(--ds-e4);
  }
  .prose h2 {
    font-size: var(--ds-t-xl);
    margin-top: var(--ds-e7);
  }
  .prose h3 {
    font-size: var(--ds-t-l);
    margin-top: var(--ds-e6);
  }
  .prose ul,
  .prose ol {
    padding-left: var(--ds-e5);
  }
  .prose li + li {
    margin-top: var(--ds-e2);
  }
  .prose strong {
    font-weight: 600;
    color: var(--ds-canopee);
  }

  .icone {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    flex: none;
  }
  .icone--s {
    inline-size: 1.125rem;
    block-size: 1.125rem;
  }
  .icone--l {
    inline-size: 2rem;
    block-size: 2rem;
  }

  .km {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }

  .saut-contenu {
    position: absolute;
    inset-inline-start: var(--ds-e4);
    inset-block-start: -100%;
    z-index: 100;
    padding: var(--ds-e3) var(--ds-e4);
    background: var(--ds-canopee);
    color: var(--ds-texte-inverse);
    border-radius: 0 0 var(--ds-r-m) var(--ds-r-m);
    transition: inset-block-start var(--ds-transition);
  }
  .saut-contenu:focus {
    inset-block-start: 0;
  }

  .visuellement-cache {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* --------------------------------------------------------------- composants */
@layer composants {
  /* ---- Boutons ---- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-e2);
    min-block-size: 48px; /* cible tactile */
    padding: var(--ds-e3) var(--ds-e5);
    font-family: var(--ds-font-heading);
    font-weight: 600;
    font-size: var(--ds-t-s);
    letter-spacing: 0.01em;
    text-decoration: none;
    border-radius: var(--ds-r-pilule);
    border: 1.5px solid transparent;
    transition: background var(--ds-transition), border-color var(--ds-transition),
      color var(--ds-transition), transform var(--ds-transition);
  }
  .btn:active {
    transform: translateY(1px);
  }
  .btn--primaire {
    background: var(--ds-accent);
    color: var(--ds-texte-inverse);
  }
  .btn--primaire:hover {
    background: var(--ds-accent-fonce);
  }
  .btn--urgence {
    background: var(--ds-urgent);
    color: var(--ds-texte-inverse);
  }
  .btn--urgence:hover {
    background: var(--ds-urgent-fonce);
  }
  .btn--fantome {
    border-color: currentColor;
    color: inherit;
  }
  .btn--fantome:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
  }
  .btn--clair {
    background: var(--ds-surface);
    color: var(--ds-canopee);
  }
  .btn--clair:hover {
    background: var(--ds-papier);
  }
  .btn--bloc {
    inline-size: 100%;
  }
  .btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
  }

  /* ---- Lien téléphone ---- */
  .tel {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-e2);
    font-family: var(--ds-font-heading);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    white-space: nowrap;
  }

  /* ---- Barre du haut ---- */
  .topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--ds-z-topbar);
    background: var(--ds-canopee);
    color: var(--ds-texte-inverse);
    border-block-end: 1px solid color-mix(in srgb, var(--ds-accent-clair) 22%, transparent);
  }
  .topbar__rangee {
    display: flex;
    align-items: center;
    gap: var(--ds-e5);
    min-block-size: 72px;
  }
  .topbar__marque {
    display: flex;
    align-items: center;
    gap: var(--ds-e3);
    text-decoration: none;
    margin-inline-end: auto;
  }
  .topbar__logo {
    inline-size: 42px;
    block-size: 42px;
    object-fit: contain;
  }
  .topbar__nom {
    display: block;
    font-family: var(--ds-font-heading);
    font-weight: 700;
    font-size: var(--ds-t-m);
    letter-spacing: var(--ds-ls-titre);
    line-height: 1.1;
  }
  .topbar__baseline {
    display: block;
    font-size: var(--ds-t-xs);
    color: var(--ds-accent-clair);
    letter-spacing: 0.02em;
  }
  .nav {
    display: flex;
    align-items: center;
    /* Six libellés français longs (« Zone d'intervention » à lui seul fait
       19 caractères) : on resserre l'espacement pour qu'ils tiennent sur une
       ligne sans déborder à côté du logo et du téléphone. */
    gap: var(--ds-e4);
  }
  .nav__lien {
    position: relative;
    padding-block: var(--ds-e2);
    font-size: var(--ds-t-xs);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    color: color-mix(in srgb, var(--ds-texte-inverse) 82%, transparent);
    transition: color var(--ds-transition);
  }
  .nav__lien:hover,
  .nav__lien.est-actif {
    color: var(--ds-texte-inverse);
  }
  .nav__lien.est-actif::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: -2px;
    block-size: 2px;
    background: var(--ds-accent-clair);
    border-radius: var(--ds-r-pilule);
  }
  .topbar__tel {
    color: var(--ds-texte-inverse);
    font-size: var(--ds-t-m);
  }
  .topbar__tel .icone {
    color: var(--ds-accent-clair);
  }
  .topbar__dispo {
    display: block;
    font-family: var(--ds-font-body);
    font-size: var(--ds-t-xs);
    font-weight: 500;
    color: var(--ds-accent-clair);
    letter-spacing: 0.02em;
  }
  .topbar__burger {
    display: none;
    color: inherit;
    padding: var(--ds-e2);
  }

  .langues {
    display: flex;
    align-items: center;
    gap: var(--ds-e1);
    padding-inline-start: var(--ds-e4);
    border-inline-start: 1px solid color-mix(in srgb, var(--ds-texte-inverse) 20%, transparent);
  }
  .langues__btn {
    padding: var(--ds-e1) var(--ds-e2);
    font-size: var(--ds-t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--ds-texte-inverse) 65%, transparent);
    border-radius: var(--ds-r-s);
  }
  .langues__btn[aria-current="true"] {
    color: var(--ds-canopee);
    background: var(--ds-accent-clair);
  }

  /* ---- Barre d'appel mobile (zone du pouce) ---- */
  .barre-appel {
    display: none;
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--ds-z-topbar);
    padding: var(--ds-e3) var(--ds-e4) calc(var(--ds-e3) + env(safe-area-inset-bottom));
    background: var(--ds-urgent);
    color: var(--ds-texte-inverse);
    box-shadow: var(--ds-ombre-3);
  }
  .barre-appel__lien {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-e2);
    min-block-size: 44px;
    font-family: var(--ds-font-heading);
    font-weight: 700;
    font-size: var(--ds-t-m);
    text-decoration: none;
  }

  /* ---- Héros ---- */
  .heros {
    position: relative;
    background: var(--ds-canopee);
    color: var(--ds-texte-inverse);
    overflow: hidden;
  }
  .heros__grille {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: stretch;
    gap: 0;
  }
  .heros__media {
    position: relative;
    min-block-size: 520px;
  }
  .heros__media img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 50% 28%;
  }
  .heros__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      100deg,
      transparent 45%,
      color-mix(in srgb, var(--ds-canopee) 92%, transparent) 100%
    );
  }
  .heros__texte {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--ds-e5);
    padding: var(--ds-e9) var(--ds-e6) var(--ds-e9) var(--ds-e8);
  }
  .heros__titre {
    font-size: var(--ds-t-3xl);
    max-width: 14ch;
  }
  .heros__titre em {
    font-style: normal;
    color: var(--ds-accent-clair);
  }
  .heros__accroche {
    font-size: var(--ds-t-m);
    color: color-mix(in srgb, var(--ds-texte-inverse) 80%, transparent);
    max-width: 46ch;
  }
  .heros__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-e3);
  }
  .heros__preuves {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-e2) var(--ds-e5);
    padding-block-start: var(--ds-e5);
    border-block-start: 1px solid color-mix(in srgb, var(--ds-texte-inverse) 16%, transparent);
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }
  .heros__preuve {
    display: flex;
    align-items: center;
    gap: var(--ds-e2);
    font-size: var(--ds-t-xs);
    font-weight: 500;
    color: color-mix(in srgb, var(--ds-texte-inverse) 78%, transparent);
  }
  .heros__preuve .icone {
    color: var(--ds-accent-clair);
  }
  /* arcs de cerne traversant la couture du héros */
  .heros__cernes {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: min(60%, 720px);
    pointer-events: none;
    color: var(--ds-accent-clair);
    opacity: 0.18;
  }

  /* ---- Bandeau urgence ---- */
  .urgence {
    background: var(--ds-urgent);
    color: var(--ds-texte-inverse);
  }
  .urgence__rangee {
    display: flex;
    align-items: center;
    gap: var(--ds-e5);
    padding-block: var(--ds-e5);
    flex-wrap: wrap;
  }
  .urgence__icone {
    flex: none;
    color: var(--ds-texte-inverse);
  }
  .urgence__corps {
    flex: 1 1 22rem;
  }
  .urgence__titre {
    font-size: var(--ds-t-l);
    margin-bottom: var(--ds-e1);
  }
  .urgence__texte {
    font-size: var(--ds-t-s);
    color: color-mix(in srgb, var(--ds-texte-inverse) 88%, transparent);
  }

  /* ---- Cartes prestation ---- */
  .grille-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--ds-e4);
    margin-top: var(--ds-e7);
  }
  .carte-service {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ds-e3);
    padding: var(--ds-e6) var(--ds-e5) var(--ds-e5);
    background: var(--ds-surface);
    border: 1px solid var(--ds-bordure);
    border-radius: var(--ds-r-l);
    text-decoration: none;
    overflow: hidden;
    transition: border-color var(--ds-transition), box-shadow var(--ds-transition),
      transform var(--ds-transition);
  }
  .carte-service::before {
    /* le cerne qui s'ouvre au survol : le motif signature, en micro-état */
    content: "";
    position: absolute;
    inset-block-start: -40%;
    inset-inline-end: -30%;
    inline-size: 12rem;
    block-size: 12rem;
    border: 1.5px solid var(--ds-accent-clair);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--ds-transition), transform 320ms cubic-bezier(0.2, 0, 0.2, 1);
  }
  .carte-service:hover {
    border-color: var(--ds-accent-clair);
    box-shadow: var(--ds-ombre-2);
    transform: translateY(-2px);
  }
  .carte-service:hover::before {
    opacity: 0.35;
    transform: scale(1);
  }
  .carte-service--pilier {
    background: var(--ds-canopee);
    color: var(--ds-texte-inverse);
    border-color: var(--ds-canopee);
  }
  .carte-service__icone {
    color: var(--ds-accent);
  }
  .carte-service--pilier .carte-service__icone {
    color: var(--ds-urgent);
  }
  .carte-service__titre {
    font-size: var(--ds-t-l);
  }
  .carte-service__accroche {
    font-size: var(--ds-t-s);
    color: var(--ds-texte-doux);
    flex: 1;
  }
  .carte-service--pilier .carte-service__accroche {
    color: color-mix(in srgb, var(--ds-texte-inverse) 78%, transparent);
  }
  .carte-service__lire {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-e2);
    font-family: var(--ds-font-heading);
    font-weight: 600;
    font-size: var(--ds-t-s);
    color: var(--ds-accent);
  }
  .carte-service--pilier .carte-service__lire {
    color: var(--ds-urgent);
  }
  .carte-service:hover .carte-service__lire .icone {
    transform: translateX(3px);
  }
  .carte-service__lire .icone {
    transition: transform var(--ds-transition);
  }

  /* ---- Bloc confiance ---- */
  .grille-confiance {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--ds-e6) var(--ds-e5);
    margin-top: var(--ds-e7);
  }
  .confiance__item {
    display: flex;
    gap: var(--ds-e4);
  }
  .confiance__icone {
    flex: none;
    color: var(--ds-accent-clair);
  }
  .confiance__titre {
    font-size: var(--ds-t-m);
    margin-bottom: var(--ds-e1);
  }
  .confiance__texte {
    font-size: var(--ds-t-s);
    color: color-mix(in srgb, var(--ds-texte-inverse) 74%, transparent);
  }

  /* ---- Carte-cerne (signature) ---- */
  .cerne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ds-e8);
    align-items: center;
    margin-top: var(--ds-e7);
  }
  .cerne__figure {
    position: relative;
    margin: 0;
  }
  .cerne__svg {
    inline-size: 100%;
    block-size: auto;
    overflow: visible;
  }
  .cerne__anneau {
    fill: none;
    stroke: var(--ds-anneau-fort);
    stroke-width: 1;
  }
  .cerne__anneau--jalon {
    stroke: var(--ds-accent);
    stroke-dasharray: 3 5;
    opacity: 0.75;
  }
  .cerne__rayon {
    stroke: var(--ds-anneau);
    stroke-width: 1;
    stroke-dasharray: 2 6;
  }
  .cerne__moelle {
    fill: var(--ds-urgent);
  }
  .cerne__point {
    fill: var(--ds-accent);
    transition: r var(--ds-transition), fill var(--ds-transition);
  }
  .cerne__etiquette {
    font-family: var(--ds-font-body);
    font-size: 10px;
    font-weight: 500;
    fill: var(--ds-texte-doux);
  }
  .cerne__etiquette--centre {
    font-family: var(--ds-font-heading);
    font-size: 12px;
    font-weight: 700;
    fill: var(--ds-canopee);
  }
  .cerne__jalon-txt {
    font-family: var(--ds-font-body);
    font-size: 9px;
    font-weight: 600;
    fill: var(--ds-accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
  }
  .cerne__lien:hover .cerne__point {
    fill: var(--ds-urgent);
  }
  .cerne__lien:hover .cerne__etiquette {
    fill: var(--ds-canopee);
    font-weight: 700;
  }
  .cerne__legende {
    font-size: var(--ds-t-xs);
    color: var(--ds-texte-doux);
    margin-top: var(--ds-e3);
    text-align: center;
  }
  .cerne__liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--ds-e1) var(--ds-e4);
    list-style: none;
    padding: 0;
    margin-top: var(--ds-e5);
  }
  .cerne__ville {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ds-e3);
    padding-block: var(--ds-e2);
    border-block-end: 1px solid var(--ds-bordure);
    text-decoration: none;
    font-size: var(--ds-t-s);
  }
  .cerne__ville:hover {
    color: var(--ds-accent);
  }
  .cerne__ville-km {
    font-size: var(--ds-t-xs);
    color: var(--ds-texte-doux);
  }

  /* animation de tracé des cernes */
  .cerne__anneau,
  .cerne__rayon {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: tracer-cerne 900ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  .cerne__anneau--jalon {
    stroke-dasharray: 3 5;
    stroke-dashoffset: 0;
    animation: none;
  }
  @keyframes tracer-cerne {
    to {
      stroke-dashoffset: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cerne__anneau,
    .cerne__rayon {
      stroke-dasharray: none;
      stroke-dashoffset: 0;
      animation: none;
    }
  }

  /* ---- Réalisations ---- */
  .filtres {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-e2);
    margin-top: var(--ds-e5);
  }
  .filtre {
    padding: var(--ds-e2) var(--ds-e4);
    min-block-size: 40px;
    font-size: var(--ds-t-xs);
    font-weight: 600;
    border: 1px solid var(--ds-bordure);
    border-radius: var(--ds-r-pilule);
    background: var(--ds-surface);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all var(--ds-transition);
  }
  .filtre:hover {
    border-color: var(--ds-accent);
    color: var(--ds-accent);
  }
  .filtre.est-actif {
    background: var(--ds-canopee);
    border-color: var(--ds-canopee);
    color: var(--ds-texte-inverse);
  }
  .grille-realisations {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--ds-e5);
    margin-top: var(--ds-e6);
  }
  .realisation {
    background: var(--ds-surface);
    border: 1px solid var(--ds-bordure);
    border-radius: var(--ds-r-l);
    overflow: hidden;
  }
  .realisation__paire {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--ds-bordure);
  }
  .realisation__vue {
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--ds-papier);
  }
  .realisation__vue img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .realisation__balise {
    position: absolute;
    inset-block-start: var(--ds-e2);
    inset-inline-start: var(--ds-e2);
    padding: 2px var(--ds-e2);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--ds-canopee);
    color: var(--ds-texte-inverse);
    border-radius: var(--ds-r-s);
  }
  .realisation__corps {
    padding: var(--ds-e4);
  }
  .realisation__titre {
    font-size: var(--ds-t-m);
  }
  .realisation__meta {
    font-size: var(--ds-t-xs);
    color: var(--ds-texte-doux);
    margin-top: var(--ds-e1);
  }

  /* ---- Témoignages ---- */
  .grille-temoignages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--ds-e5);
    margin-top: var(--ds-e7);
  }
  .temoignage {
    display: flex;
    flex-direction: column;
    gap: var(--ds-e3);
    padding: var(--ds-e5);
    background: var(--ds-surface);
    border: 1px solid var(--ds-bordure);
    border-radius: var(--ds-r-l);
  }
  .temoignage__notes {
    display: flex;
    gap: 2px;
    color: var(--ds-accent);
  }
  .temoignage__texte {
    flex: 1;
    font-size: var(--ds-t-s);
  }
  .temoignage__auteur {
    font-family: var(--ds-font-heading);
    font-weight: 600;
    font-size: var(--ds-t-s);
  }
  .temoignage__lieu {
    font-size: var(--ds-t-xs);
    color: var(--ds-texte-doux);
  }

  /* ---- FAQ : <details> natif, zéro JS ---- */
  .faq {
    max-width: var(--ds-texte-large);
    margin-top: var(--ds-e6);
  }
  .faq__item {
    border-block-end: 1px solid var(--ds-bordure);
  }
  .faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-e4);
    padding-block: var(--ds-e4);
    min-block-size: 48px;
    font-family: var(--ds-font-heading);
    font-weight: 600;
    font-size: var(--ds-t-m);
    cursor: pointer;
    list-style: none;
  }
  .faq__question::-webkit-details-marker {
    display: none;
  }
  .faq__question .icone {
    flex: none;
    color: var(--ds-accent);
    transition: transform var(--ds-transition);
  }
  .faq__item[open] .faq__question .icone {
    transform: rotate(180deg);
  }
  .faq__reponse {
    padding-block-end: var(--ds-e5);
    color: var(--ds-texte-doux);
    font-size: var(--ds-t-s);
  }

  /* ---- Formulaires ---- */
  .champ {
    display: flex;
    flex-direction: column;
    gap: var(--ds-e2);
    margin-bottom: var(--ds-e4);
  }
  .champ__label {
    font-size: var(--ds-t-s);
    font-weight: 600;
  }
  .champ__aide {
    font-size: var(--ds-t-xs);
    color: var(--ds-texte-doux);
  }
  .champ__saisie,
  .champ textarea,
  .champ select,
  .champ input {
    inline-size: 100%;
    min-block-size: 48px;
    padding: var(--ds-e3) var(--ds-e4);
    font-size: var(--ds-t-base);
    background: var(--ds-surface);
    border: 1.5px solid var(--ds-bordure);
    border-radius: var(--ds-r-m);
    transition: border-color var(--ds-transition), box-shadow var(--ds-transition);
  }
  .champ textarea {
    min-block-size: 8rem;
    resize: vertical;
  }
  .champ input:focus,
  .champ textarea:focus,
  .champ select:focus {
    border-color: var(--ds-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-accent) 18%, transparent);
    outline: none;
  }
  .champ--erreur input,
  .champ--erreur textarea,
  .champ--erreur select {
    border-color: var(--ds-erreur);
  }
  .champ__erreur {
    font-size: var(--ds-t-xs);
    font-weight: 600;
    color: var(--ds-erreur);
  }
  .champ--case {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--ds-e3);
  }
  .champ--case input {
    inline-size: 20px;
    block-size: 20px;
    min-block-size: 0;
    margin-block-start: 3px;
    flex: none;
  }
  .champ--case label {
    font-size: var(--ds-t-xs);
    color: var(--ds-texte-doux);
    font-weight: 400;
  }
  .miel {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  /* ---- Toasts ---- */
  .toasts {
    position: fixed;
    inset-block-end: var(--ds-e5);
    inset-inline-end: var(--ds-e5);
    z-index: var(--ds-z-toasts);
    display: flex;
    flex-direction: column;
    gap: var(--ds-e2);
    pointer-events: none;
  }
  .toasts__lot {
    display: contents;
  }
  .toast {
    display: flex;
    align-items: center;
    gap: var(--ds-e3);
    max-inline-size: 26rem;
    padding: var(--ds-e3) var(--ds-e4);
    font-size: var(--ds-t-s);
    font-weight: 500;
    color: var(--ds-texte-inverse);
    background: var(--ds-canopee);
    border-radius: var(--ds-r-m);
    box-shadow: var(--ds-ombre-3);
    pointer-events: auto;
    animation: toast-entree 220ms cubic-bezier(0.2, 0, 0.2, 1);
  }
  .toast--succes {
    background: var(--ds-succes);
  }
  .toast--erreur {
    background: var(--ds-erreur);
  }
  .toast--alerte {
    background: var(--ds-urgent);
  }
  @keyframes toast-entree {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  /* ---- Pied de page ---- */
  .pied {
    background: var(--ds-canopee);
    color: var(--ds-texte-inverse);
    padding-block: var(--ds-e8) var(--ds-e5);
  }
  .pied__grille {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: var(--ds-e6);
  }
  .pied__titre {
    font-size: var(--ds-t-s);
    text-transform: uppercase;
    letter-spacing: var(--ds-ls-surtitre);
    color: var(--ds-accent-clair);
    margin-bottom: var(--ds-e4);
  }
  .pied__liste {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-e2);
  }
  .pied__lien {
    font-size: var(--ds-t-s);
    text-decoration: none;
    color: color-mix(in srgb, var(--ds-texte-inverse) 76%, transparent);
  }
  .pied__lien:hover {
    color: var(--ds-texte-inverse);
  }
  .pied__logo {
    inline-size: 56px;
    block-size: 56px;
    margin-bottom: var(--ds-e4);
  }
  .pied__bas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-e4);
    justify-content: space-between;
    margin-top: var(--ds-e7);
    padding-block-start: var(--ds-e5);
    border-block-start: 1px solid color-mix(in srgb, var(--ds-texte-inverse) 16%, transparent);
    font-size: var(--ds-t-xs);
    color: color-mix(in srgb, var(--ds-texte-inverse) 60%, transparent);
  }

  /* ---- Fil d'Ariane ---- */
  .fil {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-e2);
    padding-block: var(--ds-e4);
    font-size: var(--ds-t-xs);
    color: var(--ds-texte-doux);
    list-style: none;
  }
  .fil a {
    text-decoration: none;
  }
  .fil a:hover {
    color: var(--ds-accent);
  }

  /* ---- Encart CTA ---- */
  .cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-e5);
    padding: var(--ds-e7);
    background: var(--ds-canopee);
    color: var(--ds-texte-inverse);
    border-radius: var(--ds-r-xl);
  }
  .cta__titre {
    font-size: var(--ds-t-xl);
    max-width: 22ch;
  }
  .cta__texte {
    font-size: var(--ds-t-s);
    color: color-mix(in srgb, var(--ds-texte-inverse) 76%, transparent);
    margin-top: var(--ds-e2);
    max-width: 44ch;
  }
  .cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-e3);
  }

  /* ---- Pagination ---- */
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-e2);
    margin-top: var(--ds-e6);
  }
  .pagination__lien {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 44px;
    min-block-size: 44px;
    padding-inline: var(--ds-e3);
    font-size: var(--ds-t-s);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--ds-bordure);
    border-radius: var(--ds-r-m);
    background: var(--ds-surface);
  }
  .pagination__lien.est-actif {
    background: var(--ds-canopee);
    border-color: var(--ds-canopee);
    color: var(--ds-texte-inverse);
  }

  /* ---- Vide ---- */
  .vide {
    padding: var(--ds-e8) var(--ds-e5);
    text-align: center;
    border: 1px dashed var(--ds-anneau-fort);
    border-radius: var(--ds-r-l);
    color: var(--ds-texte-doux);
  }
}

/* -------------------------------------------------------------- utilitaires */
@layer utilitaires {
  .pile {
    display: flex;
    flex-direction: column;
  }
  .pile-3 > * + * {
    margin-top: var(--ds-e3);
  }
  .pile-5 > * + * {
    margin-top: var(--ds-e5);
  }
  .rangee {
    display: flex;
    align-items: center;
    gap: var(--ds-e3);
  }
  .rangee--espacee {
    justify-content: space-between;
  }
  .centre {
    text-align: center;
  }
  .centre .surtitre,
  .centre .titre-section,
  .centre .intro {
    margin-inline: auto;
    justify-content: center;
  }
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-e1);
    padding: 3px var(--ds-e2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--ds-r-s);
    background: color-mix(in srgb, var(--ds-accent) 14%, transparent);
    color: var(--ds-accent-fonce);
  }
  .badge--pied {
    margin-block-start: var(--ds-e4);
  }
  .badge--urgent {
    background: color-mix(in srgb, var(--ds-urgent) 16%, transparent);
    color: var(--ds-urgent-fonce);
  }
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 1020px) {
  .heros__grille {
    grid-template-columns: 1fr;
  }
  .heros__media {
    min-block-size: 320px;
  }
  .heros__media::after {
    background: linear-gradient(
      180deg,
      transparent 40%,
      color-mix(in srgb, var(--ds-canopee) 92%, transparent) 100%
    );
  }
  .heros__texte {
    padding: var(--ds-e7) var(--ds-e5);
  }
  .cerne {
    grid-template-columns: 1fr;
    gap: var(--ds-e6);
  }
  .pied__grille {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 780px) {
  .topbar__rangee {
    min-block-size: 60px;
    gap: var(--ds-e3);
  }
  .topbar__burger {
    display: inline-flex;
  }
  .nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--ds-e3) var(--ds-e5) var(--ds-e5);
    background: var(--ds-canopee-clair);
    border-block-end: 1px solid color-mix(in srgb, var(--ds-accent-clair) 22%, transparent);
  }
  .nav.est-ouverte {
    display: flex;
  }
  .nav__lien {
    padding-block: var(--ds-e3);
    font-size: var(--ds-t-m);
  }
  .topbar__tel-bloc {
    display: none; /* remplacé par la barre d'appel collante en bas */
  }
  .barre-appel {
    display: block;
  }
  body {
    padding-block-end: 72px; /* dégagement pour la barre d'appel */
  }
  .pied__grille {
    grid-template-columns: 1fr;
    gap: var(--ds-e5);
  }
  .toasts {
    inset-inline: var(--ds-e4);
    inset-block-end: 88px;
  }
  .cta {
    padding: var(--ds-e5);
  }
  .realisation__paire {
    grid-template-columns: 1fr 1fr;
  }
}

@media print {
  .topbar,
  .barre-appel,
  .chatbot,
  .toasts,
  .cta {
    display: none !important;
  }
}