/* ==========================================================================
   Élagage Gard T2A — feuille de style du thème
   Implémentation responsive de la maquette « Accueil.dc.html ».
   La maquette fournissait deux planches fixes (1440 et 390) ; tout est ici
   fluide, en mobile-first, avec un seul point de bascule à 1024 px.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Inter, servie depuis ce serveur.
   Police variable : un seul fichier pour les graisses 400 à 900.
   Le sous-ensemble latin-ext n'est téléchargé que si une page contient un
   caractère qui en relève, ce qui n'arrive jamais en français : il ne coûte
   donc rien et couvre le cas d'un nom propre inhabituel.
   Voir assets/fonts/README.txt.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Vert */
  --vert-950: #052E2A;
  --vert-900: #0A2A26;
  --vert-800: #134E4A;
  --vert-700: #1F3A36;
  --teal:     #0F766E;
  --teal-800: #115E59;
  --menthe:   #6EE7B7;

  /* Orange */
  /* --orange reste la couleur d'accent : filets, points, anneau de focus.
     À ce titre elle relève du seuil de 3:1 des éléments non textuels, qu'elle
     tient (3.36 sur crème).
     Dès qu'elle porte du texte blanc, elle ne suffit plus : 3.56 pour un
     bouton, sous les 4.5 requis. Les fonds de bouton passent donc à
     --orange-fonce (5.18) et le survol à --orange-tres-fonce (7.31). À l'œil
     la différence est mince, le bouton reste orange vif. */
  --orange:      #EA580C;
  --orange-fonce:#C2410C;
  --orange-tres-fonce:#9A3412;
  --ambre:       #F59E0B;

  /* Neutres */
  --creme:    #FAF8F4;
  --canvas:   #E9E5DD;
  --panneau:  #F2EFE7;
  --slot:     #E7E3DA;
  --blanc:    #FFFFFF;

  --texte:       #0A2A26;
  --texte-doux:  #4E635F;
  /* Assombries pour atteindre 4.5:1, le seuil du critère 1.4.3 des WCAG.
     Les valeurs de la maquette plafonnaient à 3.37 sur crème et 2.12 sur
     blanc : lisibles sur un bon écran de bureau, beaucoup moins à 50 ans,
     sur un téléphone en plein soleil, c'est-à-dire dans la situation réelle
     de la plupart des clients de Franck.
     #606D6A donne 5.09 sur crème, 5.39 sur blanc, 4.69 sur panneau.
     Anciennes valeurs : #7A8B87 et #A8B5B2. */
  --texte-faible:#606D6A;
  --texte-tres-faible: #6E7674;

  /* Fond des sections alternées. Sans cette déclaration, var(--bg-alt) est
     invalide et le navigateur rend la section transparente : les blocs « alt »
     des pages service et le bloc zone des pages villes perdaient leur fond. */
  --bg-alt:   #F2EFE7;

  --trait:      rgba(10, 42, 38, 0.10);
  --trait-fort: rgba(10, 42, 38, 0.16);
  --trait-clair:rgba(250, 248, 244, 0.12);

  --police: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --marge: 18px;
  --barre-h: 76px;
}

/* Au-delà de 1024 px la marge absorbe le débord : la colonne de contenu reste
   plafonnée à 1312 px et centrée, mais les fonds (bandeaux sombres, pied de
   page) filent d'un bord à l'autre de l'écran. */
@media (min-width: 1024px) {
  :root { --marge: max(64px, calc((100% - 1312px) / 2)); }
}

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

/* scroll-padding-top calé sur la hauteur du header collant, sinon les ancres
   arrivent sous celui-ci. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 104px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--creme);
  color: var(--texte);
  font-family: var(--police);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* place pour la barre d'appel collante */
  padding-bottom: calc(var(--barre-h) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1024px) { body { font-size: 16px; padding-bottom: 0; } }

h1, h2, h3, h4 { margin: 0; letter-spacing: -0.035em; line-height: 1.08; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--vert-950); }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

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

.t2a-skip {
  position: absolute; left: 12px; top: -80px; z-index: 999;
  padding: 12px 20px; background: var(--vert-950); color: var(--creme);
  border-radius: 999px; font-weight: 700; font-size: 14px;
  transition: top 160ms ease;
}
.t2a-skip:focus { top: 12px; color: var(--creme); }

.t2a-wrap { padding-inline: var(--marge); }
/* Pleine largeur : le plafonnement se fait par --marge, pas par un max-width
   sur le conteneur, sinon les sections sombres seraient encadrées de crème. */
.t2a-page { overflow: clip; }

/* -------------------------------------------------------------------------
   Éléments partagés
   ------------------------------------------------------------------------- */
.t2a-surtitre {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--teal);
}
@media (min-width: 1024px) { .t2a-surtitre { font-size: 11px; letter-spacing: 0.24em; } }

.t2a-h2 { font-size: 27px; font-weight: 900; letter-spacing: -0.035em; line-height: 1.1; }
@media (min-width: 1024px) { .t2a-h2 { font-size: 40px; letter-spacing: -0.04em; line-height: 1.06; } }

.t2a-num { font-variant-numeric: tabular-nums; }

.t2a-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 15px 26px; border: 1.5px solid transparent;
  border-radius: 999px; font-family: var(--police); font-size: 15px; font-weight: 800;
  letter-spacing: -0.01em; cursor: pointer; text-align: center;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.t2a-btn--orange { background: var(--orange-fonce); color: #fff; box-shadow: 0 16px 34px rgba(194, 65, 12, 0.28); }
.t2a-btn--orange:hover { background: var(--orange-tres-fonce); color: #fff; }
.t2a-btn--sombre { background: var(--vert-950); color: var(--creme); }
.t2a-btn--sombre:hover { background: var(--teal); color: var(--creme); }
.t2a-btn--contour { background: var(--blanc); color: var(--vert-700); border-color: var(--trait-fort); font-weight: 600; }
.t2a-btn--contour:hover { border-color: var(--teal); color: var(--vert-700); }
.t2a-btn--clair { background: transparent; color: var(--creme); border-color: rgba(250, 248, 244, 0.30); font-weight: 700; }
.t2a-btn--clair:hover { border-color: var(--creme); color: var(--creme); }
.t2a-btn--bloc { width: 100%; }

/* Emplacement photo non encore fourni — visible exprès pendant la relecture */
.t2a-slot {
  display: flex; align-items: center; justify-content: center; height: 100%; min-height: 140px;
  padding: 18px; background: var(--slot);
  background-image: repeating-linear-gradient(45deg, rgba(10,42,38,.05) 0 10px, transparent 10px 20px);
  color: var(--texte-faible); font-size: 12px; font-weight: 700; text-align: center;
  letter-spacing: 0.02em;
}
.t2a-img { width: 100%; height: 100%; object-fit: cover; }

/* Liseré de relecture */
.t2a-relecture {
  margin: 14px 0 0; padding: 10px 14px;
  background: rgba(234, 88, 12, 0.08); border-left: 3px solid var(--orange);
  font-size: 12.5px; line-height: 1.5; color: var(--vert-700);
}
.t2a-section--sombre .t2a-relecture { background: rgba(234,88,12,.16); color: #FDBA74; }

/* -------------------------------------------------------------------------
   En-tête
   ------------------------------------------------------------------------- */
.t2a-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--marge);
  background: rgba(250, 248, 244, 0.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--trait);
}
/* min-height, jamais height : à 1024 px la navigation passait sur deux lignes,
   le contenu dépassait de 8 px hors d'un header à hauteur figée, et comme il
   est collé à top:0 ces 8 px disparaissaient sous le bord de l'écran.
   Avec min-height le header s'agrandit au lieu de rogner son contenu. */
@media (min-width: 1024px) { .t2a-header { min-height: 92px; padding-block: 10px; gap: 20px; } }
@media (min-width: 1280px) { .t2a-header { padding-block: 0; gap: 30px; } }

/* La marque peut se comprimer, sauf à partir de 1024 px où la barre serrée
   repliait « Élagage Gard T2A » sur trois lignes.
   En dessous, elle DOIT pouvoir céder : à 320 px la sous-ligne poussait le
   bouton du menu 24 px hors de l'écran, où .t2a-page (overflow: clip) le
   coupait. Un bouton de menu à moitié absent sur les plus petits téléphones,
   c'est une part du site simplement inaccessible. */
.t2a-marque { display: flex; align-items: center; gap: 10px; color: inherit; min-width: 0; }
.t2a-marque > span { min-width: 0; }
.t2a-marque__nom, .t2a-marque__sous { overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1024px) { .t2a-marque { flex-shrink: 0; } }
.t2a-marque:hover { color: inherit; }
.t2a-marque__nom, .t2a-marque__sous { white-space: nowrap; }
.t2a-marque__jeton {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--vert-950); color: var(--creme);
  font-size: 12px; font-weight: 900; letter-spacing: 0.02em; flex-shrink: 0;
}
.t2a-marque__nom { display: block; font-size: 14px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; }
.t2a-marque__sous { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-faible); }
@media (min-width: 1024px) {
  .t2a-marque { gap: 14px; }
  .t2a-marque__jeton { width: 46px; height: 46px; border-radius: 13px; font-size: 14px; }
  .t2a-marque__nom { font-size: 18px; letter-spacing: -0.03em; }
  .t2a-marque__sous { font-size: 10px; letter-spacing: 0.16em; }
}

.t2a-nav { display: none; }
@media (min-width: 1024px) {
  .t2a-nav { display: block; margin-left: auto; }
  .t2a-nav > ul { display: flex; gap: 6px; flex-wrap: nowrap; }
  .t2a-nav__item { position: relative; }

  .t2a-nav__lien {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 12px; border-radius: 6px;
    font-size: 14px; font-weight: 500; color: var(--texte-doux);
    white-space: nowrap; cursor: pointer; list-style: none;
    transition: background-color 160ms ease, color 160ms ease;
  }
  .t2a-nav__lien::-webkit-details-marker { display: none; }
  .t2a-nav__lien:hover { background: var(--panneau); color: var(--vert-950); }
  .t2a-nav__lien.is-actif { color: var(--vert-950); font-weight: 700; }
  .t2a-nav__chevron { transition: transform 160ms ease; }
  .t2a-nav__menu[open] > .t2a-nav__lien { background: var(--panneau); color: var(--vert-950); }
  .t2a-nav__menu[open] .t2a-nav__chevron { transform: rotate(180deg); }

  .t2a-nav__panneau {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
    min-width: 290px; padding: 8px;
    background: var(--blanc); border: 1px solid var(--trait); border-radius: 8px;
    box-shadow: 0 18px 40px -12px rgba(5, 46, 42, 0.22);
  }
  .t2a-nav__tout {
    display: block; padding: 8px 12px; margin-bottom: 4px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--texte-faible); border-bottom: 1px solid var(--trait);
  }
  .t2a-nav__tout:hover { color: var(--teal); }
  .t2a-nav__enfant {
    display: block; padding: 9px 12px; border-radius: 6px; color: var(--vert-900);
    transition: background-color 140ms ease;
  }
  .t2a-nav__enfant:hover { background: var(--panneau); color: var(--vert-900); }
  .t2a-nav__enfant.is-actif { background: rgba(15, 118, 110, 0.08); }
  .t2a-nav__enfant-nom { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
  .t2a-nav__enfant-txt { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--texte-faible); }
}
@media (min-width: 1280px) { .t2a-nav > ul { gap: 10px; } }

/* Tranche serrée, 1024 à 1279 px.
   À 1024 px la barre disposait de 896 px utiles et en réclamait 1002 : le
   bouton « Devis gratuit » sortait de l'écran et .t2a-page (overflow: clip)
   le coupait sans laisser d'ascenseur, donc sans rien de visible. Plutôt que
   de sacrifier une entrée de menu, on rogne ce qui ne porte pas d'information
   nouvelle : la sous-ligne de la marque répète le métier et la ville déjà
   présents partout ailleurs. Elle revient à 1280 px. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .t2a-marque__sous { display: none; }
  .t2a-marque { gap: 11px; }
  .t2a-marque__jeton { width: 40px; height: 40px; border-radius: 12px; font-size: 13px; }
  .t2a-marque__nom { font-size: 16px; }
  .t2a-nav__lien { padding: 9px 8px; font-size: 13.5px; gap: 4px; }
  .t2a-header__droite { gap: 14px; }
  .t2a-header__tel .num { font-size: 15px; }
  .t2a-header__cta { padding: 11px 17px; font-size: 12.5px; }
}

.t2a-header__droite { display: none; }
@media (min-width: 1024px) {
  .t2a-header__droite { display: flex; align-items: center; gap: 20px; }
}
.t2a-header__droite { flex-shrink: 0; }
.t2a-header__tel { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: var(--texte); white-space: nowrap; }
.t2a-header__tel:hover { color: var(--teal); }
.t2a-header__tel .lab { font-size: 9px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texte-faible); }
.t2a-header__tel .num { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.t2a-header__cta { display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 999px; background: var(--vert-950); color: var(--creme); font-size: 13px; font-weight: 700; }
.t2a-header__cta:hover { background: var(--teal); color: var(--creme); }

.t2a-burger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 11px; flex-shrink: 0;
  background: transparent; border: 1px solid rgba(10, 42, 38, 0.14); border-radius: 12px; cursor: pointer;
}
.t2a-burger span { display: block; height: 1.5px; background: var(--vert-900); transition: transform 200ms ease, opacity 200ms ease; }
.t2a-burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.t2a-burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
@media (min-width: 1024px) { .t2a-burger { display: none; } }

.t2a-menu {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; padding: 18px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--vert-950); color: var(--creme);
}
.t2a-menu[hidden] { display: none; }
.t2a-menu__fermer {
  align-self: flex-end; width: 44px; height: 44px;
  background: transparent; border: 1px solid rgba(250,248,244,.25); border-radius: 12px;
  color: var(--creme); font-size: 22px; line-height: 1; cursor: pointer;
}
/* min-height: 0 et flex: 1 1 auto sont indispensables, pas décoratifs.
   Un élément flex vaut min-height: auto par défaut, ce qui l'empêche de
   descendre sous la hauteur de son contenu : la règle overflow-y ci-dessous
   ne s'appliquait donc jamais, le menu débordait au lieu de défiler, et le
   défilement de la page étant bloqué pendant l'ouverture, les liens du bas
   devenaient tout simplement inatteignables. Mesuré : cinq liens perdus sur
   un écran de 568 px, huit en orientation paysage, dont « Demander un
   devis », c'est-à-dire l'action principale du site. */
.t2a-menu__nav {
  margin-top: 24px; display: grid; gap: 22px;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.t2a-menu__grand {
  display: block; font-size: 24px; font-weight: 900; letter-spacing: -0.03em; color: var(--creme);
}
.t2a-menu__enfants { display: grid; gap: 10px; margin-top: 12px; padding-left: 14px; border-left: 2px solid rgba(250,248,244,.2); }
.t2a-menu__enfants a { font-size: 16px; font-weight: 500; color: rgba(250, 248, 244, 0.78); }
.t2a-menu__enfants a:hover { color: var(--creme); }
.t2a-menu__pied { margin-top: auto; padding-top: 22px; display: grid; gap: 12px; }
.t2a-menu__pied .num { font-size: 22px; font-weight: 900; color: var(--creme); }

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.t2a-hero { padding: 26px var(--marge) 30px; }
@media (min-width: 1024px) {
  .t2a-hero {
    display: grid; grid-template-columns: 7fr 5fr; gap: 56px;
    padding: 76px var(--marge) 92px; align-items: stretch;
  }
}
.t2a-hero__texte { display: flex; flex-direction: column; align-items: flex-start; }
.t2a-hero h1 {
  margin-top: 14px; font-size: clamp(28px, 7.4vw, 34px); font-weight: 900;
  letter-spacing: -0.04em; line-height: 1.02;
}
@media (min-width: 1024px) {
  .t2a-hero__texte { padding-top: 8px; }
  /* 18ch : « Élagueur grimpeur » tient sur la première ligne, « dans le Gard »
     passe à la seconde. Titre volontairement sur deux lignes.
     Taille réduite à la demande du client (04/08) : 44→60 px au lieu de 56→78. */
  .t2a-hero h1 { margin-top: 22px; font-size: clamp(44px, 4.2vw, 60px); letter-spacing: -0.045em; line-height: 0.98; max-width: 18ch; }
}
.t2a-hero__chapo { margin-top: 16px; font-size: 15px; line-height: 1.55; color: var(--texte-doux); }
@media (min-width: 1024px) { .t2a-hero__chapo { margin-top: 30px; font-size: 19px; max-width: 48ch; } }

.t2a-hero__actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 24px; }
@media (min-width: 1024px) { .t2a-hero__actions { flex-direction: row; align-items: center; gap: 14px; width: auto; margin-top: 38px; } }

.t2a-hero__preuves {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-top: 16px; font-size: 12.5px; color: var(--texte-faible);
}
@media (min-width: 1024px) { .t2a-hero__preuves { margin-top: 24px; font-size: 13px; } }
.t2a-hero__preuves .pt { width: 4px; height: 4px; border-radius: 50%; background: var(--texte-tres-faible); }

.t2a-hero__creds { display: none; }
@media (min-width: 1024px) {
  .t2a-hero__creds {
    display: grid; grid-template-columns: repeat(3, 1fr); width: 100%;
    margin-top: auto; padding-top: 52px; border-top: 1px solid var(--trait);
  }
  .t2a-hero__creds > div { padding: 22px 24px 0; }
  .t2a-hero__creds > div:first-child { padding-left: 0; }
  .t2a-hero__creds > div:last-child { padding-right: 0; }
  .t2a-hero__creds > div + div { border-left: 1px solid var(--trait); }
  .t2a-hero__creds .lab { font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texte-faible); }
  .t2a-hero__creds .val { margin-top: 7px; font-size: 14px; font-weight: 700; line-height: 1.35; }
  .t2a-hero__creds .val em { font-style: normal; color: var(--orange-fonce); }
}

.t2a-hero__media { position: relative; height: 400px; margin-top: 22px; }
@media (min-width: 1024px) { .t2a-hero__media { height: auto; min-height: 660px; margin-top: 0; } }
.t2a-hero__cadre {
  position: absolute; inset: 0; overflow: hidden; background: var(--slot);
  clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%);
}
@media (min-width: 1024px) { .t2a-hero__cadre { clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%); } }

/* Repères de hauteur — motif signature */
.t2a-echelle {
  position: absolute; top: 36px; bottom: 36px; right: -14px; width: 52px; z-index: 2;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 12px 8px 10px; background: var(--creme);
  border: 1px solid rgba(10, 42, 38, 0.14);
  box-shadow: 0 16px 34px rgba(5, 46, 42, 0.20);
}
@media (min-width: 1024px) {
  .t2a-echelle { top: 64px; bottom: 64px; right: -32px; width: 74px; padding: 16px 12px 14px; box-shadow: 0 24px 56px rgba(5, 46, 42, 0.22); }
}
.t2a-echelle__rail {
  position: absolute; top: 12px; bottom: 28px; left: 7px; width: 7px;
  background-image: repeating-linear-gradient(to bottom, rgba(10,42,38,0.26) 0 1px, transparent 1px 10px);
}
@media (min-width: 1024px) { .t2a-echelle__rail { top: 16px; bottom: 34px; left: 9px; width: 9px; background-image: repeating-linear-gradient(to bottom, rgba(10,42,38,0.26) 0 1px, transparent 1px 11px); } }
.t2a-echelle__cran { display: flex; align-items: flex-start; justify-content: flex-end; gap: 5px; }
@media (min-width: 1024px) { .t2a-echelle__cran { gap: 7px; } }
.t2a-echelle__cran b { font-size: 10px; font-weight: 800; color: var(--texte-doux); }
.t2a-echelle__cran i { display: block; width: 13px; height: 1.5px; margin-top: 5px; background: var(--texte-doux); }
@media (min-width: 1024px) { .t2a-echelle__cran b { font-size: 11px; } .t2a-echelle__cran i { width: 20px; margin-top: 6px; } }
.t2a-echelle__cran--haut b { color: var(--vert-900); font-weight: 900; }
.t2a-echelle__cran--haut i { height: 2px; width: 16px; background: var(--vert-900); }
@media (min-width: 1024px) { .t2a-echelle__cran--haut i { width: 24px; } }
.t2a-echelle__cran--teal b { color: var(--teal); font-weight: 900; }
.t2a-echelle__cran--teal i { height: 2px; background: var(--teal); }
.t2a-echelle__sol {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  padding-top: 5px; border-top: 1px solid rgba(10, 42, 38, 0.14);
}
.t2a-echelle__sol b { font-size: 10px; font-weight: 900; }
.t2a-echelle__sol span { font-size: 7.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-faible); }
@media (min-width: 1024px) { .t2a-echelle__sol b { font-size: 11px; } .t2a-echelle__sol span { font-size: 8px; letter-spacing: 0.16em; } }

/* -------------------------------------------------------------------------
   Bandeau chiffres
   ------------------------------------------------------------------------- */
.t2a-stats { padding-inline: var(--marge); }
.t2a-stats__boite {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px;
  padding: 26px 24px; border-radius: 22px;
  background: var(--vert-950); color: var(--creme);
}
.t2a-stats__boite::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 180px at 10% 120%, rgba(15,118,110,0.55), transparent 62%);
}
@media (min-width: 1024px) {
  .t2a-stats__boite { grid-template-columns: repeat(4, 1fr); gap: 0; padding: 44px 48px; border-radius: 26px; }
  .t2a-stats__boite::before { background: radial-gradient(760px 220px at 16% 120%, rgba(15,118,110,0.55), transparent 62%); }
  .t2a-stats__item { padding-inline: 28px; }
  .t2a-stats__item:first-child { padding-left: 0; }
  .t2a-stats__item:last-child { padding-right: 0; }
  .t2a-stats__item + .t2a-stats__item { border-left: 1px solid rgba(250, 248, 244, 0.14); }
}
.t2a-stats__item { position: relative; }
.t2a-stats__chiffre { font-size: 32px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.t2a-stats__chiffre span { color: var(--menthe); }
.t2a-stats__texte { margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: rgba(250, 248, 244, 0.68); }
@media (min-width: 1024px) {
  .t2a-stats__chiffre { font-size: 52px; }
  .t2a-stats__texte { margin-top: 12px; font-size: 13px; line-height: 1.5; max-width: 22ch; }
}

/* -------------------------------------------------------------------------
   Prestations
   ------------------------------------------------------------------------- */
.t2a-services { padding: 44px var(--marge) 40px; }
@media (min-width: 1024px) { .t2a-services { padding: 96px var(--marge) 88px; } }
.t2a-services__tete { margin-bottom: 24px; }
@media (min-width: 1024px) {
  .t2a-services__tete { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: end; margin-bottom: 44px; }
  .t2a-services__tete h2 { font-size: 46px; letter-spacing: -0.04em; line-height: 1.04; max-width: 18ch; }
  .t2a-services__tete p { font-size: 16px; line-height: 1.65; color: var(--texte-doux); max-width: 56ch; }
}
.t2a-services__tete h2 { margin-top: 12px; }
/* Ce paragraphe était masqué en mobile. Il n'existait nulle part ailleurs :
   Google indexant la version mobile, il était donc absent de ce qu'il évalue.
   Sur un site où l'on explique une méthode, la phrase qui décrit la visite
   préalable n'est pas du remplissage. */
.t2a-services__tete p { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--texte-doux); }
@media (min-width: 1024px) { .t2a-services__tete p { margin-top: 0; } }

.t2a-cartes { display: grid; gap: 14px; }
@media (min-width: 1024px) { .t2a-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

.t2a-carte {
  display: flex; flex-direction: column;
  background: var(--blanc); border: 1px solid var(--trait);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
@media (min-width: 1024px) { .t2a-carte { clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); } }
.t2a-carte__media { height: 160px; overflow: hidden; background: var(--slot); }
@media (min-width: 1024px) { .t2a-carte__media { height: 196px; } }
.t2a-carte__corps { display: flex; flex-direction: column; flex: 1; padding: 20px; }
@media (min-width: 1024px) { .t2a-carte__corps { padding: 28px 28px 30px; } }
.t2a-carte__titre { display: flex; align-items: baseline; gap: 10px; }
.t2a-carte__titre span { font-size: 10px; font-weight: 900; letter-spacing: 0.14em; color: var(--texte-tres-faible); }
.t2a-carte__titre h3 { font-size: 21px; font-weight: 900; letter-spacing: -0.03em; }
@media (min-width: 1024px) { .t2a-carte__titre { gap: 12px; } .t2a-carte__titre h3 { font-size: 25px; } }
.t2a-carte__resume { margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: var(--texte-doux); }
@media (min-width: 1024px) { .t2a-carte__resume { display: none; } }
.t2a-carte__points { display: none; }
@media (min-width: 1024px) {
  .t2a-carte__points { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
  .t2a-carte__points li { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--texte-doux); }
  /* Puce dessinée : un filet court, plus discret qu'un tiret typographique */
  .t2a-carte__points li::before {
    content: ''; flex-shrink: 0; width: 9px; height: 2px; margin-top: 9px; background: var(--teal);
  }
}
.t2a-carte__pied {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--trait);
}
@media (min-width: 1024px) { .t2a-carte__pied { padding-top: 24px; } }
.t2a-carte__prix { font-size: 13px; font-weight: 800; }
@media (min-width: 1024px) { .t2a-carte__prix { font-size: 14px; } }
.t2a-carte__lien { font-size: 12.5px; font-weight: 700; color: var(--teal); white-space: nowrap; }

/* -------------------------------------------------------------------------
   Urgence — entaille haute
   ------------------------------------------------------------------------- */
.t2a-urgence {
  padding: 40px var(--marge) 34px;
  background: var(--vert-900); color: var(--creme);
  clip-path: polygon(0 18px, 100% 0, 100% 100%, 0 100%);
}
@media (min-width: 1024px) {
  .t2a-urgence { padding: 74px var(--marge) 66px; clip-path: polygon(0 26px, 100% 0, 100% 100%, 0 100%); }
  .t2a-urgence__grille { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }
}
.t2a-urgence h2 { margin-top: 16px; font-size: 27px; font-weight: 900; letter-spacing: -0.035em; line-height: 1.1; }
@media (min-width: 1024px) { .t2a-urgence h2 { margin-top: 20px; font-size: 42px; letter-spacing: -0.04em; line-height: 1.06; max-width: 24ch; } }
.t2a-urgence p { margin-top: 12px; font-size: 14px; line-height: 1.6; color: rgba(250, 248, 244, 0.70); }
@media (min-width: 1024px) { .t2a-urgence p { margin-top: 18px; font-size: 16px; max-width: 60ch; } }
.t2a-urgence__badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 9px;
  border-radius: 999px; background: rgba(234, 88, 12, 0.16); border: 1px solid rgba(234, 88, 12, 0.38);
}
.t2a-urgence__badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); animation: t2apulse 2s infinite; }
.t2a-urgence__badge span { font-size: 9px; font-weight: 800; letter-spacing: 0.20em; text-transform: uppercase; color: #FDBA74; }
@media (min-width: 1024px) { .t2a-urgence__badge span { font-size: 10px; } }
.t2a-urgence__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 20px; }
@media (min-width: 1024px) { .t2a-urgence__actions { margin-top: 0; } }
.t2a-urgence__mention { font-size: 13px; line-height: 1.6; color: rgba(250, 248, 244, 0.62); }

@keyframes t2apulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(234, 88, 12, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .t2a-urgence__badge i { animation: none; }
}

/* -------------------------------------------------------------------------
   Méthode — ligne de vie
   ------------------------------------------------------------------------- */
.t2a-methode {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 16px;
  padding: 44px var(--marge) 40px;
}
@media (min-width: 1024px) {
  .t2a-methode {
    grid-template-columns: 46px minmax(0, 5fr) minmax(0, 7fr);
    gap: 0 40px; padding: 100px var(--marge) 96px; align-items: start;
  }
}
.t2a-corde { position: relative; align-self: stretch; }
@media (min-width: 1024px) { .t2a-corde { min-height: 560px; } }
.t2a-corde__brin {
  position: absolute; top: 4px; bottom: 4px; left: 12px; width: 3px; border-radius: 2px;
  background-image: repeating-linear-gradient(160deg, var(--teal) 0 4px, var(--teal-800) 4px 8px);
}
@media (min-width: 1024px) { .t2a-corde__brin { top: 6px; bottom: 6px; left: 16px; width: 4px; background-image: repeating-linear-gradient(160deg, var(--teal) 0 5px, var(--teal-800) 5px 10px); } }
.t2a-corde__noeud {
  position: absolute; left: 6px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--creme); border: 3px solid var(--teal);
}
@media (min-width: 1024px) { .t2a-corde__noeud { left: 9px; width: 18px; height: 18px; border-width: 3.5px; } }
.t2a-corde__noeud--plein { background: var(--teal); box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.14); }
@media (min-width: 1024px) { .t2a-corde__noeud--plein { box-shadow: 0 0 0 5px rgba(15, 118, 110, 0.14); } }
.t2a-corde__label { display: none; }
@media (min-width: 1024px) {
  .t2a-corde__label {
    display: block; position: absolute; top: 56%; left: 30px;
    writing-mode: vertical-rl; font-size: 9px; font-weight: 800;
    letter-spacing: 0.30em; text-transform: uppercase; color: var(--texte-faible);
  }
}
.t2a-methode h2 { margin-top: 12px; font-size: 27px; font-weight: 900; letter-spacing: -0.035em; line-height: 1.1; }
@media (min-width: 1024px) { .t2a-methode h2 { margin-top: 14px; font-size: 44px; letter-spacing: -0.04em; line-height: 1.05; } }
.t2a-methode__media { position: relative; height: 280px; margin-top: 20px; overflow: hidden; background: var(--slot); clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 100%); }
/* La photo est dans le flux du texte sur mobile, en 3e colonne sur desktop.
   Deux emplacements dans le gabarit, un seul visible à la fois. */
.t2a-methode__media--desktop { display: none; }
@media (min-width: 1024px) {
  .t2a-methode__media--mobile { display: none; }
  .t2a-methode__media--desktop { display: block; }
  .t2a-methode__media { height: auto; min-height: 660px; margin-top: 0; clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 100%); }
}
.t2a-methode__liste { display: flex; flex-direction: column; gap: 18px; margin-top: 22px; }
@media (min-width: 1024px) { .t2a-methode__liste { gap: 26px; margin-top: 32px; } }
.t2a-methode__point h3 { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.t2a-methode__point h3::before { content: attr(data-num) ' · '; }
.t2a-methode__point p { margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--texte-doux); }
/* Sur mobile le numéro est préfixé au titre ; sur desktop il passe en colonne. */
.t2a-methode__point > b { display: none; }
@media (min-width: 1024px) {
  .t2a-methode__point { display: grid; grid-template-columns: 34px 1fr; gap: 14px; }
  .t2a-methode__point > b { display: block; font-size: 12px; font-weight: 900; color: var(--teal); padding-top: 3px; }
  .t2a-methode__point h3::before { content: none; }
  .t2a-methode__point h3 { font-size: 18px; }
  .t2a-methode__point p { margin-top: 7px; font-size: 15px; line-height: 1.6; }
}
.t2a-methode__citation {
  margin: 22px 0 0; padding: 16px 18px; background: var(--panneau);
  border-left: 3px solid var(--teal);
}
.t2a-methode__citation blockquote {
  margin: 0; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--vert-700);
}
.t2a-methode__citation figcaption {
  margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--texte-faible);
}
@media (min-width: 1024px) {
  .t2a-methode__citation { margin-top: 34px; padding: 20px 22px; max-width: 52ch; }
  .t2a-methode__citation blockquote { font-size: 16px; line-height: 1.55; }
}

/* -------------------------------------------------------------------------
   Le devis — quatre étapes (remplace la grille tarifaire)
   ------------------------------------------------------------------------- */
.t2a-devis { padding: 0 var(--marge) 40px; }
@media (min-width: 1024px) {
  .t2a-devis { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; padding: 0 var(--marge) 96px; align-items: start; }
}
.t2a-devis h2 { margin-top: 12px; }
.t2a-devis__texte { margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: var(--texte-doux); }
@media (min-width: 1024px) { .t2a-devis__texte { margin-top: 18px; font-size: 15px; line-height: 1.65; } }
.t2a-devis__intro .t2a-btn { margin-top: 20px; }
@media (min-width: 1024px) { .t2a-devis__intro .t2a-btn { margin-top: 26px; } }

.t2a-etapes { margin: 26px 0 0; padding: 0; list-style: none; counter-reset: none; border-top: 1.5px solid var(--trait-fort); }
@media (min-width: 1024px) { .t2a-etapes { margin-top: 0; } }
.t2a-etape {
  display: grid; grid-template-columns: 38px 1fr; gap: 0 14px;
  padding: 18px 2px; border-bottom: 1px solid var(--trait);
}
@media (min-width: 1024px) { .t2a-etape { grid-template-columns: 52px 1fr; gap: 0 20px; padding: 26px 4px; } }
.t2a-etape__num { font-size: 13px; font-weight: 900; color: var(--teal); padding-top: 2px; }
@media (min-width: 1024px) { .t2a-etape__num { font-size: 15px; } }
.t2a-etape__titre { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
@media (min-width: 1024px) { .t2a-etape__titre { font-size: 19px; } }
.t2a-etape__texte { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--texte-doux); }
@media (min-width: 1024px) { .t2a-etape__texte { margin-top: 8px; font-size: 15px; } }
.t2a-etapes__mention { padding: 14px 2px 0; font-size: 12.5px; line-height: 1.6; color: var(--texte-faible); }
@media (min-width: 1024px) { .t2a-etapes__mention { padding: 18px 4px 0; font-size: 13px; } }

/* -------------------------------------------------------------------------
   Avant / après
   ------------------------------------------------------------------------- */
.t2a-ba { padding: 0 var(--marge) 40px; }
@media (min-width: 1024px) { .t2a-ba { padding: 0 var(--marge) 96px; } }
.t2a-ba__tete { margin-bottom: 20px; }
.t2a-ba__tete h2 { margin-top: 12px; }
.t2a-ba__tete p { margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: var(--texte-doux); }
@media (min-width: 1024px) {
  .t2a-ba__tete { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 36px; }
  .t2a-ba__tete p { margin-top: 0; font-size: 15px; line-height: 1.6; max-width: 44ch; }
}
/* Trois chantiers : une colonne sur mobile, deux dès 900 px, trois quand la
   place le permet sans que les volets deviennent des vignettes. */
.t2a-ba__grille { display: grid; gap: 14px; }
@media (min-width: 900px)  { .t2a-ba__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1360px) { .t2a-ba__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

.t2a-ba__carte { margin: 0; background: var(--blanc); border: 1px solid var(--trait); }

/* --- Curseur de comparaison ---------------------------------------------
   L'après est peint en entier ; l'avant est posé par-dessus et rogné à la
   position --pos. Un seul cadre, deux photos superposées. */
.t2a-cmp {
  position: relative; overflow: hidden; background: var(--slot);
  aspect-ratio: 4 / 3; touch-action: pan-y; user-select: none;
}
.t2a-cmp__couche { position: absolute; inset: 0; }
.t2a-cmp__couche img { width: 100%; height: 100%; object-fit: cover; }
.t2a-cmp__couche--avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.t2a-cmp__ligne {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; margin-left: -1px; background: var(--orange);
  pointer-events: none; z-index: 3;
}
.t2a-cmp__poignee {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 3px 12px rgba(5, 46, 42, 0.35);
}
/* Deux chevrons dessinés en CSS : aucune icône à charger. */
.t2a-cmp__poignee::before,
.t2a-cmp__poignee::after {
  content: ''; position: absolute; top: 50%; width: 7px; height: 7px;
  border-top: 2px solid #fff; border-right: 2px solid #fff;
}
.t2a-cmp__poignee::before { left: 10px; transform: translateY(-50%) rotate(-135deg); }
.t2a-cmp__poignee::after  { right: 10px; transform: translateY(-50%) rotate(45deg); }

/* Le range couvre toute la vignette : c'est lui qui reçoit le pointeur, le
   doigt et le clavier. Invisible, mais bien présent pour l'accessibilité. */
.t2a-cmp__curseur {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 0; cursor: grab;
}
.t2a-cmp.is-drag .t2a-cmp__curseur { cursor: grabbing; }
.t2a-cmp__curseur::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 44px; height: 44px; border-radius: 50%; background: transparent; cursor: grab;
}
.t2a-cmp__curseur::-moz-range-thumb {
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: grab;
}
/* La poignée grossit légèrement pendant le glissement : retour visuel du geste. */
.t2a-cmp__poignee { transition: transform 120ms ease; }
.t2a-cmp.is-drag .t2a-cmp__poignee { transform: translate(-50%, -50%) scale(1.12); }
.t2a-cmp__curseur:focus-visible { outline: 2px solid var(--orange); outline-offset: -4px; }

.t2a-ba__etiquette {
  position: absolute; top: 10px; padding: 4px 10px; border-radius: 999px;
  font-size: 9px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  pointer-events: none; z-index: 2;
}
.t2a-ba__etiquette--avant { left: 10px; background: rgba(5, 46, 42, 0.86); color: var(--creme); }
.t2a-ba__etiquette--apres { right: 10px; background: var(--teal); color: #fff; }
.t2a-ba__legende { padding: 16px 18px 18px; }
@media (min-width: 1024px) { .t2a-ba__legende { padding: 22px 24px 24px; } }
.t2a-ba__titre { display: block; font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }
@media (min-width: 1024px) { .t2a-ba__titre { font-size: 18px; } }
.t2a-ba__detail { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--texte-doux); }
@media (min-width: 1024px) { .t2a-ba__detail { margin-top: 7px; font-size: 14px; } }

/* -------------------------------------------------------------------------
   Zone d'intervention
   ------------------------------------------------------------------------- */
.t2a-zone { padding: 0 var(--marge) 40px; }
@media (min-width: 1024px) {
  .t2a-zone { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; padding: 0 var(--marge) 96px; align-items: stretch; }
}
.t2a-zone h2 { margin-top: 12px; }
.t2a-zone__texte { margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: var(--texte-doux); }
@media (min-width: 1024px) { .t2a-zone__texte { margin-top: 18px; font-size: 15px; line-height: 1.65; max-width: 56ch; } }

.t2a-radar {
  position: relative; overflow: hidden; height: 280px; margin-top: 20px;
  background: var(--panneau); border: 1px solid var(--trait);
}
@media (min-width: 1024px) { .t2a-radar { height: auto; min-height: 430px; margin-top: 0; order: -1; } }
.t2a-radar__grille {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(10, 42, 38, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 42, 38, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
}
@media (min-width: 1024px) { .t2a-radar__grille { background-size: 38px 38px; } }
.t2a-radar__cercle {
  position: absolute; left: 46%; top: 50%; border-radius: 50%;
  border: 1px dashed rgba(15, 118, 110, 0.42);
}
@media (min-width: 1024px) { .t2a-radar__cercle { left: 44%; top: 52%; } }
.t2a-radar__cercle--30 { width: 250px; height: 250px; margin: -125px 0 0 -125px; }
.t2a-radar__cercle--20 { width: 166px; height: 166px; margin: -83px 0 0 -83px; background: rgba(15, 118, 110, 0.05); }
.t2a-radar__cercle--10 { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: rgba(15, 118, 110, 0.09); border-color: rgba(15, 118, 110, 0.5); }
@media (min-width: 1024px) {
  .t2a-radar__cercle--30 { width: 360px; height: 360px; margin: -180px 0 0 -180px; }
  .t2a-radar__cercle--20 { width: 240px; height: 240px; margin: -120px 0 0 -120px; }
  .t2a-radar__cercle--10 { width: 120px; height: 120px; margin: -60px 0 0 -60px; }
}
.t2a-radar__centre {
  position: absolute; left: 46%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 7px;
}
@media (min-width: 1024px) { .t2a-radar__centre { left: 44%; top: 52%; gap: 8px; } }
.t2a-radar__centre i { width: 11px; height: 11px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.22); }
.t2a-radar__centre b { font-size: 11px; font-weight: 900; letter-spacing: -0.01em; }
@media (min-width: 1024px) { .t2a-radar__centre i { width: 13px; height: 13px; } .t2a-radar__centre b { font-size: 12px; } }
.t2a-radar__ville { position: absolute; display: flex; align-items: center; gap: 5px; }
.t2a-radar__ville i { width: 6px; height: 6px; border-radius: 50%; background: var(--vert-950); }
.t2a-radar__ville span { font-size: 10px; font-weight: 700; }
@media (min-width: 1024px) { .t2a-radar__ville { gap: 6px; } .t2a-radar__ville i { width: 7px; height: 7px; } .t2a-radar__ville span { font-size: 11px; } }
.t2a-radar__legende {
  position: absolute; left: 12px; bottom: 12px; padding: 8px 12px;
  background: rgba(250, 248, 244, 0.92); border: 1px solid var(--trait);
}
@media (min-width: 1024px) { .t2a-radar__legende { left: 16px; bottom: 16px; padding: 10px 14px; } }
.t2a-radar__legende b { display: block; font-size: 8px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte-faible); }
.t2a-radar__legende span { display: block; margin-top: 3px; font-size: 12px; font-weight: 800; }
@media (min-width: 1024px) { .t2a-radar__legende b { font-size: 9px; letter-spacing: 0.18em; } .t2a-radar__legende span { margin-top: 4px; font-size: 13px; } }
.t2a-radar__km {
  position: absolute; left: 44%; top: 52%; transform: translateX(-50%); padding: 0 6px;
  background: var(--panneau); font-size: 9px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal);
  display: none;
}
@media (min-width: 1024px) { .t2a-radar__km { display: block; } }

.t2a-communes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px;
  margin-top: 18px; font-size: 13px; color: var(--vert-700);
}
@media (min-width: 1024px) {
  .t2a-communes {
    grid-template-columns: repeat(3, 1fr); gap: 9px 24px;
    margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--trait); font-size: 14px;
  }
  .t2a-communes ul { display: flex; flex-direction: column; gap: 9px; }
}
/* Les communes qui ont leur page se distinguent discrètement des autres */
.t2a-communes a { color: var(--vert-700); text-decoration: underline; text-decoration-color: var(--trait-fort); text-underline-offset: 3px; }
.t2a-communes a:hover { color: var(--teal); text-decoration-color: currentColor; }

/* -------------------------------------------------------------------------
   Avis
   ------------------------------------------------------------------------- */
.t2a-avis { padding: 0 var(--marge) 40px; }
@media (min-width: 1024px) { .t2a-avis { padding: 0 var(--marge) 96px; } }
.t2a-avis__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.t2a-avis__note { font-size: 13px; color: var(--texte-faible); }
.t2a-avis__note b { font-family: var(--police); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 900; color: var(--texte); }
.t2a-avis__extrait { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--texte-tres-faible); white-space: nowrap; }
.t2a-avis__grille { display: grid; gap: 12px; margin-top: 18px; }
@media (min-width: 1024px) { .t2a-avis__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 26px; } }
.t2a-avis__carte { display: flex; flex-direction: column; padding: 20px; background: var(--blanc); border: 1px solid var(--trait); }
@media (min-width: 1024px) { .t2a-avis__carte { padding: 30px; } }
.t2a-avis__etoiles { display: flex; gap: 2px; color: var(--ambre); }
.t2a-avis__texte { margin-top: 12px; font-size: 14px; line-height: 1.55; font-weight: 500; }
@media (min-width: 1024px) { .t2a-avis__texte { margin-top: 18px; font-size: 16px; line-height: 1.6; } }
.t2a-avis__auteur { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 18px; }
@media (min-width: 1024px) { .t2a-avis__auteur { padding-top: 24px; } }
.t2a-avis__pastille {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--teal); color: #fff; font-size: 13px; font-weight: 800; flex-shrink: 0;
}
.t2a-avis__nom { font-size: 14px; font-weight: 800; }
.t2a-avis__lieu { font-size: 12px; color: var(--texte-faible); }

/* -------------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------------- */
.t2a-faq { padding: 0 var(--marge) 40px; }
@media (min-width: 1024px) {
  .t2a-faq { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; padding: 0 var(--marge) 100px; align-items: start; }
}
.t2a-faq h2 { margin-top: 12px; }
/* Masquée en mobile jusqu'ici, alors que c'est un appel à l'action placé
   exactement là où quelqu'un cherche une réponse, et qu'elle manquait sur
   neuf pages de la version indexée par Google. */
.t2a-faq__intro { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--texte-doux); }
@media (min-width: 1024px) { .t2a-faq__intro { margin-top: 18px; font-size: 15px; line-height: 1.65; } }
.t2a-faq__liste { margin-top: 18px; border-top: 1.5px solid var(--trait-fort); }
@media (min-width: 1024px) { .t2a-faq__liste { margin-top: 0; } }
.t2a-faq details { border-bottom: 1px solid var(--trait); }
.t2a-faq details:last-child { border-bottom: 0; }
.t2a-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 48px; padding: 16px 2px; cursor: pointer;
  font-size: 15px; font-weight: 800; letter-spacing: -0.02em; list-style: none;
}
.t2a-faq summary::-webkit-details-marker { display: none; }
.t2a-faq summary .sig { font-size: 20px; font-weight: 400; color: var(--teal); transition: transform 200ms ease; flex-shrink: 0; }
.t2a-faq details[open] summary .sig { transform: rotate(45deg); }
.t2a-faq details p { padding: 0 2px 16px; font-size: 13.5px; line-height: 1.6; color: var(--texte-doux); }
@media (min-width: 1024px) {
  .t2a-faq summary { gap: 24px; padding: 24px 4px; font-size: 18px; }
  .t2a-faq summary .sig { font-size: 22px; }
  .t2a-faq details p { padding: 0 4px 24px; font-size: 15px; line-height: 1.65; max-width: 70ch; }
}

/* -------------------------------------------------------------------------
   CTA — l'entaille
   ------------------------------------------------------------------------- */
.t2a-cta {
  padding: 56px var(--marge) 36px; background: var(--vert-800); color: var(--creme);
  clip-path: polygon(0 0, 40% 0, 50% 44px, 60% 0, 100% 0, 100% 100%, 0 100%);
}
@media (min-width: 1024px) {
  .t2a-cta { padding: 104px var(--marge) 92px; clip-path: polygon(0 0, 44% 0, 50% 72px, 56% 0, 100% 0, 100% 100%, 0 100%); }
  .t2a-cta__grille { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: end; }
}
.t2a-cta h2 { font-size: 32px; font-weight: 900; letter-spacing: -0.04em; line-height: 1.05; }
@media (min-width: 1024px) { .t2a-cta h2 { font-size: 56px; letter-spacing: -0.045em; line-height: 1.02; max-width: 20ch; } }
.t2a-cta p { margin-top: 14px; font-size: 14.5px; line-height: 1.6; color: rgba(250, 248, 244, 0.72); }
@media (min-width: 1024px) { .t2a-cta p { margin-top: 22px; font-size: 17px; max-width: 52ch; } }
.t2a-cta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 20px; }
@media (min-width: 1024px) { .t2a-cta__actions { gap: 18px; margin-top: 0; padding-bottom: 6px; } }
.t2a-cta__coord { font-size: 13.5px; line-height: 1.7; color: rgba(250, 248, 244, 0.62); }
.t2a-cta__coord a { color: rgba(250, 248, 244, 0.85); }
.t2a-cta__coord a:hover { color: var(--creme); }

/* -------------------------------------------------------------------------
   Pied de page
   ------------------------------------------------------------------------- */
.t2a-footer { padding: 36px var(--marge) 40px; background: var(--vert-950); color: var(--creme); }
@media (min-width: 1024px) { .t2a-footer { padding: 72px var(--marge) 36px; } }
.t2a-footer__grille { display: grid; gap: 26px; }
/* Cinq colonnes depuis l'ajout des guides. La marque garde la plus large,
   les trois listes se partagent le milieu, le contact ferme. */
@media (min-width: 1024px) { .t2a-footer__grille { grid-template-columns: 1.9fr .95fr 1.25fr .95fr 1.1fr; gap: 32px; } }
@media (min-width: 1280px) { .t2a-footer__grille { gap: 40px; } }
.t2a-footer__jeton {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 11px; background: rgba(250, 248, 244, 0.10);
  border: 1px solid rgba(250, 248, 244, 0.18); font-size: 12px; font-weight: 900; flex-shrink: 0;
}
@media (min-width: 1024px) { .t2a-footer__jeton { width: 42px; height: 42px; border-radius: 12px; font-size: 13px; } }
.t2a-footer__marque { display: flex; align-items: center; gap: 11px; }
.t2a-footer__marque span { font-size: 16px; font-weight: 900; letter-spacing: -0.03em; }
@media (min-width: 1024px) { .t2a-footer__marque { gap: 13px; } .t2a-footer__marque span { font-size: 19px; } }
.t2a-footer__pitch { margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: rgba(250, 248, 244, 0.55); }
@media (min-width: 1024px) { .t2a-footer__pitch { margin-top: 18px; font-size: 13px; line-height: 1.65; max-width: 38ch; } }
.t2a-footer h3 {
  margin-bottom: 14px; font-size: 10px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(250, 248, 244, 0.62);
}
.t2a-footer__liens { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.t2a-footer__liens a, .t2a-footer address a { color: rgba(250, 248, 244, 0.85); }
.t2a-footer__liens a:hover, .t2a-footer address a:hover { color: var(--creme); }
.t2a-footer address { font-style: normal; display: flex; flex-direction: column; gap: 9px; font-size: 13px; color: rgba(250, 248, 244, 0.85); }
.t2a-footer address .num { font-size: 15px; font-weight: 800; color: var(--creme); }
.t2a-footer address .lieu { color: rgba(250, 248, 244, 0.55); }
.t2a-footer__bas {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--trait-clair);
  font-size: 11.5px; line-height: 1.7; color: rgba(250, 248, 244, 0.62);
}
.t2a-footer__bas a { color: rgba(250, 248, 244, 0.62); }
.t2a-footer__bas a:hover { color: rgba(250, 248, 244, 0.8); }
@media (min-width: 1024px) {
  .t2a-footer__bas {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    margin-top: 56px; padding-top: 28px; font-size: 12px;
  }
  .t2a-footer__bas nav { display: flex; gap: 22px; }
}

/* =========================================================================
   Cibles tactiles : 24 px de haut minimum, à toutes les tailles d'écran.
   =========================================================================
   Critère 2.5.8 des WCAG. Il ne concerne pas que le tactile : une souris
   demande elle aussi de la précision, et beaucoup de gens en manquent.
   Sont exclus les liens en pleine phrase, que le critère dispense.

   PRINCIPE : on ne touche ni à la taille du texte ni au rythme visuel. Le
   rembourrage ajouté à chaque lien est calibré sur le déficit mesuré de son
   groupe, et l'espacement du conteneur est réduit d'autant. La zone cliquable
   grandit, la mise en page ne bouge pas.

   Un exemple de ce que ça corrige : les pastilles de communes faisaient bien
   28 px, mais le rembourrage appartenait au li et pas au lien. Toucher le
   bord de la pastille ne déclenchait rien. La cible visible n'était pas la
   cible réelle. */
.t2a-fil a        { display: inline-block; padding-block: 2px; }  /* 20 → 24 */
.t2a-carte__lien  { display: inline-block; padding-block: 2px; }  /* 20 → 24 */
.t2a-communes a   { display: inline-block; padding-block: 4px; }  /* 17 → 25 */
.t2a-ct__fiche a  { display: inline-block; padding-block: 4px; }  /* 17 → 25 */
.t2a-plan__liens a{ display: inline-block; padding-block: 3px; }  /* 20 → 26 */
.t2a-lg__defs a   { display: inline-block; padding-block: 3px; }  /* 19 → 25 */
.t2a-lg__renvoi a { display: inline-block; padding-block: 2px; }  /* 20 → 24 */
.t2a-lg__autres a { display: inline-block; padding-block: 2px; }  /* 22 → 26 */
.t2a-gd__sommaire a, .t2a-lg__sommaire a { display: inline-block; padding-block: 4px; }
.t2a-gd__sommaire ol, .t2a-lg__sommaire ol { gap: 1px; }          /* compense les 8 px ajoutés */

.t2a-footer__liens { gap: 5px; }                                  /* 9 − 4 */
.t2a-footer__liens a { display: inline-block; padding-block: 2px; }
.t2a-footer address { gap: 5px; }
.t2a-footer address a { display: inline-block; padding-block: 2px; }
.t2a-footer__bas nav a, .t2a-lien-cookies { display: inline-block; padding-block: 2px; }
.t2a-footer h3 a { display: inline-block; padding-block: 7px; color: inherit; }   /* 11 → 25 */
.t2a-footer h3:has(a) { margin-bottom: 0; }                        /* 14 − 14 */

/* En mobile on va au-delà du minimum : le doigt est moins précis que le
   pointeur, et la place ne manque pas verticalement. */
@media (max-width: 1023.98px) {
  .t2a-footer__liens { gap: 0; }
  .t2a-footer__liens a { padding-block: 8px; }
  .t2a-carte__lien { padding-block: 6px; }
  .t2a-plan__liens a { padding-block: 5px; }
  .t2a-communes a,
  .t2a-gd__sommaire a,
  .t2a-lg__sommaire a,
  .t2a-lg__defs a,
  .t2a-lg__renvoi a,
  .t2a-lg__autres a,
  .t2a-ct__fiche a { padding-block: 5px; }
  .t2a-lg__sommaire ol, .t2a-gd__sommaire ol { gap: 2px; }
  .t2a-footer h3 a { padding-block: 8px; }
  .t2a-footer address { gap: 2px; }
  .t2a-footer address a { padding-block: 6px; }
  .t2a-footer__bas nav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; }
  .t2a-footer__bas nav a, .t2a-lien-cookies { padding-block: 7px; }
  .t2a-fil { padding-top: 10px; }
  .t2a-fil a { padding-block: 6px; }
}

/* -------------------------------------------------------------------------
   Barre d'appel collante — mobile
   ------------------------------------------------------------------------- */
.t2a-barre {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; box-shadow: 0 -12px 30px rgba(5, 46, 42, 0.16);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--vert-950);
}
@media (min-width: 1024px) { .t2a-barre { display: none; } }
.t2a-barre__moitie {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px;
  height: var(--barre-h); font-size: 16px; font-weight: 800; letter-spacing: -0.01em;
  text-decoration: none; transition: background-color 160ms ease;
}
.t2a-barre__moitie--tel { background: var(--vert-950); color: var(--creme); }
.t2a-barre__moitie--tel:active { background: var(--vert-900); color: var(--creme); }
.t2a-barre__moitie--devis { background: var(--orange-fonce); color: #fff; }
.t2a-barre__moitie--devis:active { background: var(--orange-tres-fonce); color: #fff; }

/* -------------------------------------------------------------------------
   Page devis + formulaire
   ------------------------------------------------------------------------- */
.t2a-page-devis { padding: 32px var(--marge) 48px; }
@media (min-width: 1024px) {
  .t2a-page-devis { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; padding: 72px var(--marge) 96px; align-items: start; }
}
.t2a-page-devis__titre {
  margin-top: 12px; font-size: clamp(28px, 7vw, 34px); font-weight: 900;
  letter-spacing: -0.04em; line-height: 1.06;
}
@media (min-width: 1024px) { .t2a-page-devis__titre { margin-top: 14px; font-size: 42px; } }
.t2a-page-devis__chapo { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--texte-doux); }
@media (min-width: 1024px) { .t2a-page-devis__chapo { margin-top: 18px; font-size: 17px; } }
.t2a-page-devis__points { margin: 22px 0 0; display: grid; gap: 10px; }
.t2a-page-devis__points li {
  position: relative; padding-left: 26px; font-size: 14px; line-height: 1.5; color: var(--vert-700);
}
.t2a-page-devis__points li::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 8px;
  border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}
.t2a-page-devis__tel {
  margin-top: 26px; padding: 18px 20px; background: var(--panneau);
  border-left: 3px solid var(--vert-950);
}
.t2a-page-devis__tel > span { display: block; font-size: 13px; color: var(--texte-doux); }
.t2a-page-devis__tel a {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 6px;
  font-size: 22px; font-weight: 900; letter-spacing: -0.02em; color: var(--vert-950);
}
.t2a-page-devis__tel small { display: block; margin-top: 4px; font-size: 12px; color: var(--texte-faible); }
@media (min-width: 1024px) { .t2a-page-devis__col { padding-top: 6px; } }

.t2a-page-devis__figure { margin: 26px 0 0; }
.t2a-page-devis__figure img {
  width: 100%; height: auto; border-radius: 6px;
  /* Le portrait 3/4 pleine hauteur écraserait la colonne : on cadre. */
  aspect-ratio: 4 / 3; object-fit: cover; object-position: center 42%;
}
@media (min-width: 1024px) { .t2a-page-devis__figure img { aspect-ratio: 1 / 1; } }
.t2a-page-devis__figure figcaption {
  margin-top: 10px; font-size: 12.5px; line-height: 1.55; color: var(--texte-faible);
}

/* Messages d'état */
.t2a-message { padding: 18px 20px; border-radius: var(--radius, 6px); margin-bottom: 22px; }
.t2a-message h2 { font-size: 22px; font-weight: 900; letter-spacing: -0.03em; margin-bottom: 8px; }
.t2a-message p { font-size: 15px; line-height: 1.6; }
.t2a-message ul { margin: 8px 0 0; padding-left: 20px; list-style: disc; font-size: 14px; line-height: 1.7; }
.t2a-message--ok { background: #E8F3EC; border-left: 3px solid #2E7D4F; color: #14432c; }
.t2a-message--ok h2 { color: #14432c; }
.t2a-message--ok a { color: #14432c; text-decoration: underline; }
.t2a-message--alerte { background: rgba(234,88,12,.08); border-left: 3px solid var(--orange); color: #7a2f08; }
.t2a-message--alerte a { color: #7a2f08; }

/* Formulaire */
.t2a-form {
  display: grid; gap: 20px; padding: 24px 20px;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: 6px;
}
@media (min-width: 1024px) { .t2a-form { padding: 34px; gap: 22px; } }
.t2a-form__groupe { border: 0; padding: 0; margin: 0; }
.t2a-form__groupe legend { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 700; }
.t2a-form__duo { display: grid; gap: 20px; }
@media (min-width: 640px) { .t2a-form__duo { grid-template-columns: 1fr 1fr; } }
.t2a-champ { display: grid; gap: 6px; }
.t2a-champ > label { font-size: 14px; font-weight: 700; }
.t2a-req { color: var(--orange-fonce); }
.t2a-fac { font-weight: 400; font-size: 12.5px; color: var(--texte-faible); }

.t2a-form input[type="text"],
.t2a-form input[type="tel"],
.t2a-form input[type="email"],
.t2a-form textarea,
.t2a-form input[type="file"] {
  width: 100%; padding: 0 14px; height: 52px;
  font-family: var(--police); font-size: 16px; color: var(--texte);
  background: var(--blanc); border: 1px solid var(--trait-fort); border-radius: 6px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.t2a-form textarea { height: auto; padding: 12px 14px; line-height: 1.6; resize: vertical; }
.t2a-form input[type="file"] { padding-top: 13px; height: auto; }
.t2a-form :is(input, textarea):focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15,118,110,.14);
}
.t2a-form :is(input, textarea)[aria-invalid="true"] { border-color: var(--orange); }

.t2a-aide { font-size: 12.5px; line-height: 1.5; color: var(--texte-faible); }
.t2a-erreur {
  display: flex; gap: 6px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.5; font-weight: 600; color: #b32d0f;
}
.t2a-erreur::before { content: '⚠'; font-size: 13px; line-height: 1.3; }

/* Pastilles de choix — trois options se montrent, elles ne se déroulent pas */
.t2a-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.t2a-pastille {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 16px;
  border: 1.5px solid var(--trait-fort); border-radius: 6px; background: var(--blanc);
  font-size: 14.5px; cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.t2a-pastille:hover { border-color: var(--teal); }
.t2a-pastille.is-on { border-color: var(--teal); background: rgba(15,118,110,.07); font-weight: 700; }
.t2a-pastille:focus-within { outline: 2px solid var(--orange); outline-offset: 2px; }

.t2a-champ--case > label { display: flex; gap: 11px; align-items: flex-start; font-weight: 400; font-size: 13.5px; line-height: 1.55; color: var(--texte-doux); }
/* 24 px : le minimum du critère 2.5.8 des WCAG. Le libellé entier reste
   cliquable, mais la case est une cible que beaucoup visent directement, et
   c'est un champ obligatoire. */
.t2a-champ--case input { margin-top: 2px; width: 24px; height: 24px; accent-color: var(--teal); flex-shrink: 0; }

.t2a-form__pied { font-size: 12.5px; line-height: 1.6; color: var(--texte-faible); text-align: center; }

/* Champ appât — hors écran, jamais annoncé, jamais atteignable au clavier */
.t2a-appat { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* -------------------------------------------------------------------------
   Pages service
   ------------------------------------------------------------------------- */
.t2a-fil {
  padding: 14px var(--marge) 0; font-size: 12.5px; color: var(--texte-faible);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.t2a-fil a { color: var(--texte-doux); }
.t2a-fil [aria-current] { color: var(--vert-900); font-weight: 600; }

.t2a-sv-hero { padding: 20px var(--marge) 36px; }
@media (min-width: 1024px) {
  .t2a-sv-hero { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; padding: 40px var(--marge) 80px; align-items: center; }
}
.t2a-sv-hero__titre {
  margin-top: 12px; font-size: clamp(28px, 6.4vw, 34px); font-weight: 900;
  letter-spacing: -0.04em; line-height: 1.04;
}
@media (min-width: 1024px) { .t2a-sv-hero__titre { margin-top: 14px; font-size: clamp(40px, 3.8vw, 54px); max-width: 16ch; } }
.t2a-sv-hero__chapo { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--texte-doux); }
@media (min-width: 1024px) { .t2a-sv-hero__chapo { margin-top: 20px; font-size: 17px; max-width: 52ch; } }
.t2a-sv-hero .t2a-hero__actions { margin-top: 22px; }
.t2a-sv-hero__media { margin-top: 24px; overflow: hidden; background: var(--slot); aspect-ratio: 4 / 3; clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%); }
@media (min-width: 1024px) { .t2a-sv-hero__media { margin-top: 0; aspect-ratio: 3 / 4; clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%); } }
.t2a-sv-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.t2a-sv-reperes { display: grid; gap: 0; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--trait); }
@media (min-width: 640px) { .t2a-sv-reperes { grid-template-columns: repeat(3, 1fr); } }
.t2a-sv-reperes > div { padding: 10px 0; }
@media (min-width: 640px) {
  .t2a-sv-reperes > div { padding: 0 20px; }
  .t2a-sv-reperes > div:first-child { padding-left: 0; }
  .t2a-sv-reperes > div + div { border-left: 1px solid var(--trait); }
}
.t2a-sv-reperes dt { font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texte-faible); }
.t2a-sv-reperes dd { margin: 6px 0 0; font-size: 14px; font-weight: 700; line-height: 1.35; }

.t2a-sv-bloc { padding: 40px var(--marge); }
@media (min-width: 1024px) { .t2a-sv-bloc { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; padding: 72px var(--marge); align-items: start; } }
.t2a-sv-bloc--alt { background: var(--bg-alt); }
.t2a-sv-bloc__tete h2 { margin-top: 12px; }
.t2a-sv-bloc__chapo { margin-top: 14px; font-size: 14.5px; line-height: 1.6; color: var(--texte-doux); }
@media (min-width: 1024px) { .t2a-sv-bloc__chapo { margin-top: 18px; font-size: 15px; line-height: 1.65; } }
.t2a-sv-bloc__corps { margin-top: 22px; display: grid; gap: 22px; }
@media (min-width: 1024px) { .t2a-sv-bloc__corps { margin-top: 0; gap: 26px; } }

.t2a-sv-prose { display: grid; gap: 14px; max-width: 68ch; }
.t2a-sv-prose p { font-size: 15px; line-height: 1.7; color: var(--vert-700); }
@media (min-width: 1024px) { .t2a-sv-prose p { font-size: 16px; } }
.t2a-sv-liste__titre { font-weight: 700; color: var(--vert-900); }
.t2a-sv-liste { display: grid; gap: 10px; }
.t2a-sv-liste li {
  position: relative; padding-left: 26px; font-size: 15px; line-height: 1.6; color: var(--vert-700);
}
.t2a-sv-liste li::before {
  content: ''; position: absolute; left: 0; top: 9px; width: 11px; height: 2px; background: var(--teal);
}

.t2a-sv-cols { display: grid; gap: 16px; }
@media (min-width: 700px)  { .t2a-sv-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.t2a-sv-col { background: var(--blanc); border: 1px solid var(--trait); border-radius: 6px; padding: 20px 22px; }
.t2a-sv-bloc--alt .t2a-sv-col { background: var(--blanc); }
.t2a-sv-col h3 { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.t2a-sv-col p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--texte-doux); }

.t2a-sv-figure { margin: 0; overflow: hidden; background: var(--slot); aspect-ratio: 3 / 2; }
.t2a-sv-figure img { width: 100%; height: 100%; object-fit: cover; }

.t2a-sv-encart {
  padding: 16px 18px; background: var(--panneau); border-left: 3px solid var(--teal);
  font-size: 14px; line-height: 1.6; color: var(--vert-700); max-width: 62ch;
}
.t2a-sv-bloc--alt .t2a-sv-encart { background: var(--blanc); }

/* Chantier documenté */
.t2a-sv-chantier { padding: 40px var(--marge); background: var(--vert-950); color: var(--creme); }
@media (min-width: 1024px) { .t2a-sv-chantier { padding: 76px var(--marge); } }
.t2a-sv-chantier__tete { max-width: 60ch; }
.t2a-sv-chantier__tete .t2a-surtitre { color: var(--menthe); }
.t2a-sv-chantier__tete h2 { margin-top: 12px; color: var(--creme); }
.t2a-sv-chantier__tete p { margin-top: 14px; font-size: 15px; line-height: 1.65; color: rgba(250, 248, 244, 0.72); }
.t2a-sv-etapes { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: none; }
/* auto-fit : s'adapte à 2, 3 ou 4 étapes sans laisser de colonne vide. */
@media (min-width: 640px)  { .t2a-sv-etapes { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; } }
@media (min-width: 1024px) { .t2a-sv-etapes { gap: 20px; margin-top: 40px; } }
.t2a-sv-etape__media { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: rgba(250,248,244,.08); }
.t2a-sv-etape__media img { width: 100%; height: 100%; object-fit: cover; }
.t2a-sv-etape__num {
  position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 999px;
  background: var(--orange-fonce); color: #fff; font-size: 11px; font-weight: 800;
}
.t2a-sv-etape__legende { display: block; margin-top: 10px; font-size: 13px; line-height: 1.45; color: rgba(250, 248, 244, 0.78); }

.t2a-sv-citation {
  margin: 32px 0 0; padding: 22px 24px; border-left: 3px solid var(--orange);
  background: rgba(250, 248, 244, 0.06); max-width: 72ch;
}
@media (min-width: 1024px) { .t2a-sv-citation { margin-top: 44px; padding: 26px 30px; } }
.t2a-sv-citation blockquote { margin: 0; font-size: 16px; line-height: 1.6; font-style: italic; color: var(--creme); }
@media (min-width: 1024px) { .t2a-sv-citation blockquote { font-size: 18px; } }
.t2a-sv-citation figcaption { margin-top: 12px; font-size: 13px; color: rgba(250, 248, 244, 0.6); }
.t2a-sv-citation figcaption strong { color: var(--creme); font-weight: 700; margin-right: 8px; }

/* Prestations connexes */
.t2a-sv-connexes { padding: 40px var(--marge); }
@media (min-width: 1024px) { .t2a-sv-connexes { padding: 72px var(--marge); } }
.t2a-sv-connexes__grille { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 700px) { .t2a-sv-connexes__grille { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
.t2a-sv-connexe {
  display: block; padding: 22px 24px; background: var(--blanc);
  border: 1px solid var(--trait); border-radius: 6px; color: inherit;
  transition: border-color 160ms ease, transform 160ms ease;
}
.t2a-sv-connexe:hover { border-color: var(--teal); transform: translateY(-2px); color: inherit; }
.t2a-sv-connexe__nom { display: block; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.t2a-sv-connexe__nom::after { content: ' →'; color: var(--teal); }
.t2a-sv-connexe__txt { display: block; margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--texte-doux); }

/* -------------------------------------------------------------------------
   Pages villes
   ------------------------------------------------------------------------- */
.t2a-vl-hero { padding: 20px var(--marge) 36px; }
@media (min-width: 1024px) {
  .t2a-vl-hero { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; padding: 40px var(--marge) 76px; align-items: center; }
}
.t2a-vl-hero__titre {
  margin-top: 12px; font-size: clamp(30px, 7vw, 36px); font-weight: 900;
  letter-spacing: -0.04em; line-height: 1.04;
}
@media (min-width: 1024px) { .t2a-vl-hero__titre { margin-top: 14px; font-size: clamp(42px, 4vw, 56px); } }
.t2a-vl-hero__chapo { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--texte-doux); }
@media (min-width: 1024px) { .t2a-vl-hero__chapo { margin-top: 20px; font-size: 17px; max-width: 52ch; } }
.t2a-vl-hero .t2a-hero__actions { margin-top: 22px; }
.t2a-vl-hero__media { margin-top: 24px; overflow: hidden; background: var(--slot); aspect-ratio: 4 / 3; clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%); }
@media (min-width: 1024px) { .t2a-vl-hero__media { margin-top: 0; aspect-ratio: 3 / 4; clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%); } }
.t2a-vl-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.t2a-vl-services { padding: 40px var(--marge); }
@media (min-width: 1024px) { .t2a-vl-services { padding: 72px var(--marge); } }
.t2a-vl-services__tete h2 { margin-top: 12px; }
.t2a-vl-services__grille { margin-top: 22px; }
@media (min-width: 900px) { .t2a-vl-services__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.t2a-vl-zone { padding: 40px var(--marge); background: var(--bg-alt); }
@media (min-width: 1024px) { .t2a-vl-zone { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; padding: 72px var(--marge); align-items: start; } }
.t2a-vl-zone h2 { margin-top: 12px; }
.t2a-vl-zone__txt { margin-top: 14px; font-size: 14.5px; line-height: 1.6; color: var(--texte-doux); }
.t2a-vl-zone__st { margin-top: 22px; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte-faible); }
.t2a-vl-zone__st:first-child { margin-top: 0; }
@media (min-width: 1024px) { .t2a-vl-zone > div:last-child > .t2a-vl-zone__st:first-child { margin-top: 4px; } }
.t2a-vl-puces {
  display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px;
}
.t2a-vl-puces li {
  padding: 6px 13px; background: var(--blanc); border: 1px solid var(--trait);
  border-radius: 999px; font-size: 13.5px; color: var(--vert-700);
}
/* La pastille faisait 28 px de haut mais son lien 16 : le rembourrage
   appartenait au li, donc toucher le bord ne déclenchait rien. On déplace le
   rembourrage dans le lien pour que la cible visible soit la cible réelle. */
.t2a-vl-puces li:has(a) { padding: 0; border-color: var(--trait-fort); }
.t2a-vl-puces li a { display: block; padding: 6px 13px; color: var(--vert-700); }
.t2a-vl-puces li a:hover { color: var(--teal); }

/* -------------------------------------------------------------------------
   Guides
   ------------------------------------------------------------------------- */
.t2a-gd { padding: 20px var(--marge) 40px; max-width: 1100px; margin-inline: auto; }
@media (min-width: 1024px) { .t2a-gd { padding: 36px var(--marge) 72px; } }
.t2a-gd__tete { max-width: 62ch; }
.t2a-gd__titre {
  margin-top: 12px; font-size: clamp(28px, 6.6vw, 34px); font-weight: 900;
  letter-spacing: -0.04em; line-height: 1.06;
}
@media (min-width: 1024px) { .t2a-gd__titre { font-size: clamp(38px, 3.6vw, 48px); } }
.t2a-gd__chapo { margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--texte-doux); }
@media (min-width: 1024px) { .t2a-gd__chapo { font-size: 18px; } }
.t2a-gd__meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;
  font-size: 12.5px; color: var(--texte-faible);
}

.t2a-gd__sommaire {
  margin-top: 30px; padding: 20px 22px; background: var(--panneau);
  border-left: 3px solid var(--teal); max-width: 62ch;
}
.t2a-gd__sommaire h2 {
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--texte-faible);
}
.t2a-gd__sommaire ol { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.t2a-gd__sommaire li { font-size: 14.5px; line-height: 1.45; }
.t2a-gd__sommaire a { color: var(--vert-700); text-decoration: underline; text-decoration-color: var(--trait-fort); text-underline-offset: 3px; }
.t2a-gd__sommaire a:hover { color: var(--teal); }

.t2a-gd__corps { margin-top: 36px; max-width: 68ch; }
.t2a-gd__section { margin-bottom: 40px; }
.t2a-gd__section h2 {
  font-size: 22px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.2;
  padding-top: 16px; border-top: 1px solid var(--trait);
}
@media (min-width: 1024px) { .t2a-gd__section h2 { font-size: 27px; } }
.t2a-gd__section p { margin-top: 14px; font-size: 15.5px; line-height: 1.75; color: var(--vert-700); }
@media (min-width: 1024px) { .t2a-gd__section p { font-size: 16.5px; } }
.t2a-gd__liste-titre { font-weight: 700; color: var(--vert-900); }
.t2a-gd__section .t2a-sv-liste { margin-top: 14px; }
.t2a-gd__section .t2a-faq__liste { margin-top: 18px; border-top: 1.5px solid var(--trait-fort); }

.t2a-gd__encadre {
  margin-top: 22px; padding: 18px 20px; background: var(--panneau);
  border-left: 3px solid var(--orange);
}
.t2a-gd__encadre h3 { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }
.t2a-gd__encadre p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; }

.t2a-gd__avert {
  margin-top: 8px; padding: 16px 18px; border: 1px dashed var(--trait-fort);
  border-radius: 6px;
}
.t2a-gd__avert p { font-size: 13px; line-height: 1.6; color: var(--texte-faible); }

.t2a-gd__connexes { margin-top: 40px; }
.t2a-gd__connexes .t2a-sv-connexes__grille { margin-top: 16px; }

.t2a-gd__local { margin-top: 36px; padding: 20px 22px; background: var(--panneau); border-radius: 6px; }
.t2a-gd__local p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--texte-doux); }
.t2a-gd__local .t2a-vl-puces { margin-top: 14px; }

/* Index des guides */
.t2a-gdx { padding: 20px var(--marge) 48px; }
@media (min-width: 1024px) { .t2a-gdx { padding: 40px var(--marge) 80px; } }
.t2a-gdx__tete { max-width: 62ch; }
.t2a-gdx__titre {
  margin-top: 12px; font-size: clamp(30px, 7vw, 36px); font-weight: 900;
  letter-spacing: -0.04em; line-height: 1.05;
}
@media (min-width: 1024px) { .t2a-gdx__titre { font-size: clamp(40px, 3.8vw, 52px); } }
.t2a-gdx__chapo { margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--texte-doux); }
.t2a-gdx__grille { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 760px)  { .t2a-gdx__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.t2a-gdx__carte {
  display: flex; flex-direction: column; padding: 24px 26px;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: 6px;
  color: inherit; transition: border-color 160ms ease, transform 160ms ease;
}
.t2a-gdx__carte:hover { border-color: var(--teal); transform: translateY(-2px); color: inherit; }
.t2a-gdx__carte-meta { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-faible); }
.t2a-gdx__carte-titre { margin-top: 10px; font-size: 20px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.2; }
@media (min-width: 1024px) { .t2a-gdx__carte-titre { font-size: 23px; } }
.t2a-gdx__carte-txt { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--texte-doux); }
.t2a-gdx__carte-lien { margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 700; color: var(--teal); }

/* -------------------------------------------------------------------------
   Page contact
   ------------------------------------------------------------------------- */
.t2a-ct__hero { padding: 20px var(--marge) 30px; max-width: 1100px; margin-inline: auto; }
@media (min-width: 1024px) { .t2a-ct__hero { padding: 40px var(--marge) 44px; } }
.t2a-ct__titre {
  margin-top: 12px; font-size: clamp(30px, 7vw, 36px); font-weight: 900;
  letter-spacing: -0.04em; line-height: 1.04;
}
@media (min-width: 1024px) { .t2a-ct__titre { font-size: clamp(42px, 4vw, 54px); } }
.t2a-ct__chapo { margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--texte-doux); max-width: 58ch; }
@media (min-width: 1024px) { .t2a-ct__chapo { font-size: 18px; } }

/* Les trois canaux. Chacun porte son rang : le visiteur doit voir d'un coup
   d'œil lequel est le sien, plutôt que de choisir au hasard. */
.t2a-ct__voies { display: grid; gap: 14px; padding: 0 var(--marge) 44px; max-width: 1100px; margin-inline: auto; }
@media (min-width: 860px)  { .t2a-ct__voies { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1024px) { .t2a-ct__voies { padding-bottom: 76px; } }
.t2a-ct__voie {
  display: flex; flex-direction: column; padding: 22px 24px 24px;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: 6px;
  color: inherit; transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.t2a-ct__voie:hover {
  color: inherit; border-color: var(--teal); transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(10, 42, 38, 0.07);
}
.t2a-ct__voie--tel { border-color: var(--trait-fort); background: var(--vert-950); color: var(--creme); }
.t2a-ct__voie--tel:hover { color: var(--creme); border-color: var(--menthe); }
.t2a-ct__voie-rang {
  font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--texte-faible);
}
.t2a-ct__voie--tel .t2a-ct__voie-rang { color: var(--menthe); }
.t2a-ct__voie-icone { margin-top: 16px; color: var(--teal); }
.t2a-ct__voie--tel .t2a-ct__voie-icone { color: var(--menthe); }
.t2a-ct__voie-titre { margin-top: 12px; font-size: 18px; font-weight: 800; letter-spacing: -0.025em; }
.t2a-ct__voie-valeur {
  margin-top: 4px; font-size: 20px; font-weight: 900; letter-spacing: -0.03em;
  line-height: 1.25; color: var(--vert-950); overflow-wrap: anywhere;
}
@media (min-width: 1024px) { .t2a-ct__voie-valeur { font-size: 22px; } }
.t2a-ct__voie--tel .t2a-ct__voie-valeur { color: var(--creme); }
.t2a-ct__voie--mail .t2a-ct__voie-valeur { font-size: 15px; font-weight: 700; color: var(--teal); }
.t2a-ct__voie-txt { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--texte-doux); }
.t2a-ct__voie--tel .t2a-ct__voie-txt { color: rgba(250, 248, 244, 0.72); }

.t2a-ct__preparer { padding: 40px var(--marge); background: var(--bg-alt); }
@media (min-width: 1024px) {
  .t2a-ct__preparer { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; padding: 76px var(--marge); align-items: start; }
}
.t2a-ct__preparer-tete h2 { margin-top: 12px; }
.t2a-ct__preparer-tete p { margin-top: 14px; font-size: 14.5px; line-height: 1.65; color: var(--texte-doux); }
.t2a-ct__preparer-liste { margin-top: 22px; max-width: 70ch; }
@media (min-width: 1024px) { .t2a-ct__preparer-liste { margin-top: 4px; } }
.t2a-ct__preparer-liste li { font-size: 15px; line-height: 1.7; }
.t2a-ct__franchise {
  margin-top: 22px; padding: 18px 20px; background: var(--blanc);
  border-left: 3px solid var(--orange);
  font-size: 14.5px; line-height: 1.65; color: var(--vert-700); max-width: 70ch;
}
@media (min-width: 1024px) { .t2a-ct__franchise { margin-top: 28px; } }

.t2a-ct__ou { padding: 40px var(--marge); }
@media (min-width: 1024px) {
  .t2a-ct__ou { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; padding: 76px var(--marge); align-items: start; }
}
.t2a-ct__adresse h2 { margin-top: 12px; }
.t2a-ct__adresse-bloc {
  display: flex; flex-direction: column; gap: 3px; margin-top: 20px;
  font-style: normal; font-size: 16px; line-height: 1.5; color: var(--vert-700);
}
.t2a-ct__adresse-bloc strong { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--vert-950); }
.t2a-ct__note { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--texte-doux); max-width: 46ch; }
.t2a-ct__fiche { margin-top: 14px; font-size: 14px; }
.t2a-ct__fiche a { font-weight: 700; text-decoration: underline; text-decoration-color: var(--trait-fort); text-underline-offset: 3px; }
.t2a-ct__fiche a::after { content: ' ↗'; text-decoration: none; }

.t2a-ct__liens { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.t2a-ct__figure { margin: 26px 0 0; }
.t2a-ct__figure img { width: 100%; height: auto; border-radius: 6px; }
.t2a-ct__figure figcaption {
  margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--texte-faible); max-width: 52ch;
}

.t2a-ct__zone { margin-top: 36px; padding: 22px 24px; background: var(--panneau); border-radius: 6px; }
@media (min-width: 1024px) { .t2a-ct__zone { margin-top: 0; padding: 28px 30px; } }
.t2a-ct__zone h3 { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.t2a-ct__zone p { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--texte-doux); }
.t2a-ct__villes { display: grid; gap: 8px; margin-top: 16px; }
@media (min-width: 560px) { .t2a-ct__villes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.t2a-ct__villes a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 11px 15px; background: var(--blanc); border: 1px solid var(--trait);
  border-radius: 6px; transition: border-color 160ms ease;
}
.t2a-ct__villes a:hover { border-color: var(--teal); }
.t2a-ct__villes span { font-size: 14.5px; font-weight: 700; color: var(--vert-900); }
.t2a-ct__villes em { font-style: normal; font-size: 12px; color: var(--texte-faible); white-space: nowrap; }
.t2a-ct__zone-note { margin-top: 14px; font-size: 13px; line-height: 1.55; color: var(--texte-faible); }

.t2a-ct__horaires { padding: 40px var(--marge); background: var(--bg-alt); }
@media (min-width: 1024px) {
  .t2a-ct__horaires { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; padding: 76px var(--marge); align-items: start; }
}
.t2a-ct__horaires h2 { margin-top: 12px; }
.t2a-ct__creneaux { display: grid; gap: 0; margin: 22px 0 0; }
@media (min-width: 1024px) { .t2a-ct__creneaux { margin-top: 0; } }
.t2a-ct__creneaux > div { padding: 16px 0; border-top: 1px solid var(--trait); }
.t2a-ct__creneaux > div:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 700px) {
  .t2a-ct__creneaux > div { display: grid; grid-template-columns: 250px 1fr; gap: 24px; align-items: baseline; }
}
.t2a-ct__creneaux dt { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; color: var(--vert-950); }
.t2a-ct__creneaux dd { margin: 6px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--texte-doux); }
@media (min-width: 700px) { .t2a-ct__creneaux dd { margin-top: 0; } }

/* -------------------------------------------------------------------------
   Pages légales
   ------------------------------------------------------------------------- */
.t2a-lg { padding: 20px var(--marge) 48px; max-width: 940px; margin-inline: auto; }
@media (min-width: 1024px) { .t2a-lg { padding: 36px var(--marge) 88px; } }
.t2a-lg__tete { max-width: 62ch; }
.t2a-lg__titre {
  margin-top: 12px; font-size: clamp(28px, 6.6vw, 34px); font-weight: 900;
  letter-spacing: -0.04em; line-height: 1.06;
}
@media (min-width: 1024px) { .t2a-lg__titre { font-size: clamp(36px, 3.4vw, 44px); } }
.t2a-lg__chapo { margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--texte-doux); }
@media (min-width: 1024px) { .t2a-lg__chapo { font-size: 17px; } }
.t2a-lg__maj { margin-top: 14px; font-size: 12.5px; color: var(--texte-faible); }

.t2a-lg__sommaire {
  margin-top: 30px; padding: 20px 22px; background: var(--panneau);
  border-left: 3px solid var(--teal);
}
.t2a-lg__sommaire h2 {
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--texte-faible);
}
.t2a-lg__sommaire ol { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; }
@media (min-width: 700px) { .t2a-lg__sommaire ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; } }
.t2a-lg__sommaire li { font-size: 14px; line-height: 1.45; }
.t2a-lg__sommaire a { color: var(--vert-700); text-decoration: underline; text-decoration-color: var(--trait-fort); text-underline-offset: 3px; }
.t2a-lg__sommaire a:hover { color: var(--teal); }

.t2a-lg__corps { margin-top: 40px; }
.t2a-lg__sec { margin-bottom: 40px; scroll-margin-top: 110px; }
.t2a-lg__sec h2 {
  font-size: 21px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.2;
  padding-top: 16px; border-top: 1px solid var(--trait);
}
@media (min-width: 1024px) { .t2a-lg__sec h2 { font-size: 25px; } }
.t2a-lg__sec p { margin-top: 14px; font-size: 15px; line-height: 1.75; color: var(--vert-700); max-width: 72ch; }
@media (min-width: 1024px) { .t2a-lg__sec p { font-size: 16px; } }
.t2a-lg__sec .t2a-sv-liste { margin-top: 16px; }
.t2a-lg__liste-titre { font-weight: 700; color: var(--vert-900); }

.t2a-lg__defs { display: grid; gap: 0; margin: 18px 0 0; }
.t2a-lg__defs > div { padding: 11px 0; border-top: 1px solid var(--trait); }
.t2a-lg__defs > div:first-child { border-top: 0; }
@media (min-width: 620px) {
  .t2a-lg__defs > div { display: grid; grid-template-columns: 230px 1fr; gap: 20px; align-items: baseline; }
}
.t2a-lg__defs dt {
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--texte-faible);
}
.t2a-lg__defs dd { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--vert-900); overflow-wrap: anywhere; }
@media (min-width: 620px) { .t2a-lg__defs dd { margin-top: 0; } }

/* Le tableau des traitements est le seul endroit du site où une grille de
   données est plus lisible qu'une prose. Il défile seul sur petit écran :
   c'est le conteneur qui glisse, jamais la page. */
.t2a-lg__defile { margin-top: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.t2a-lg__tableau { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 13.5px; }
.t2a-lg__tableau th, .t2a-lg__tableau td {
  padding: 11px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--trait); line-height: 1.5;
}
.t2a-lg__tableau thead th {
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--texte-faible); border-bottom: 1.5px solid var(--trait-fort); white-space: nowrap;
}
.t2a-lg__tableau tbody th { font-weight: 700; color: var(--vert-950); }
.t2a-lg__tableau td { color: var(--texte-doux); }
.t2a-lg__tableau tbody tr:nth-child(even) { background: var(--panneau); }

.t2a-lg__encadre {
  margin-top: 22px; padding: 18px 20px; background: var(--panneau);
  border-left: 3px solid var(--orange); max-width: 72ch;
}
.t2a-lg__encadre h3 { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }
.t2a-lg__encadre p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; }

.t2a-lg__renvoi { margin-top: 18px; font-weight: 700; }
.t2a-lg__renvoi a { color: var(--teal); }

.t2a-lg__pied {
  margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--trait);
  display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: baseline; justify-content: space-between;
}
.t2a-lg__pied p { font-size: 14px; line-height: 1.6; color: var(--texte-doux); }
.t2a-lg__autres { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13.5px; }

/* -------------------------------------------------------------------------
   Plan du site
   ------------------------------------------------------------------------- */
.t2a-plan { padding: 20px var(--marge) 48px; max-width: 1100px; margin-inline: auto; }
@media (min-width: 1024px) { .t2a-plan { padding: 36px var(--marge) 88px; } }
.t2a-plan__tete { max-width: 62ch; }
.t2a-plan__titre {
  margin-top: 12px; font-size: clamp(28px, 6.6vw, 34px); font-weight: 900;
  letter-spacing: -0.04em; line-height: 1.06;
}
@media (min-width: 1024px) { .t2a-plan__titre { font-size: clamp(36px, 3.4vw, 44px); } }
.t2a-plan__chapo { margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--texte-doux); }
.t2a-plan__chapo a { font-weight: 700; }

.t2a-plan__accueil {
  display: block; margin-top: 30px; padding: 18px 22px;
  background: var(--vert-950); color: var(--creme); border-radius: 6px;
  transition: background-color 160ms ease;
}
.t2a-plan__accueil:hover { background: var(--teal); color: var(--creme); }
.t2a-plan__accueil-nom { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.025em; }
.t2a-plan__accueil-nom::after { content: ' →'; }
.t2a-plan__accueil-txt { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.55; color: rgba(250, 248, 244, 0.72); }

.t2a-plan__bloc { margin-top: 40px; }
@media (min-width: 1024px) {
  .t2a-plan__bloc { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; align-items: start; margin-top: 48px; }
}
.t2a-plan__bloc-tete h2 {
  font-size: 20px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.2;
  padding-top: 16px; border-top: 1px solid var(--trait);
}
@media (min-width: 1024px) { .t2a-plan__bloc-tete h2 { font-size: 23px; } }
.t2a-plan__bloc-tete p { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--texte-doux); }
@media (min-width: 1024px) { .t2a-plan__bloc-tete { padding-bottom: 8px; } }

.t2a-plan__liens { display: grid; gap: 0; margin-top: 18px; }
@media (min-width: 1024px) { .t2a-plan__liens { margin-top: 16px; } }
.t2a-plan__liens li { padding: 13px 0; border-top: 1px solid var(--trait); }
.t2a-plan__liens li:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 1024px) { .t2a-plan__liens li:first-child { padding-top: 4px; } }
.t2a-plan__liens a { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--vert-950); }
.t2a-plan__liens a:hover { color: var(--teal); }
.t2a-plan__liens span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--texte-faible); }

.t2a-plan__xml {
  margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--trait);
  font-size: 13px; color: var(--texte-faible);
}

/* -------------------------------------------------------------------------
   Bandeau de consentement
   ------------------------------------------------------------------------- */
.t2a-bandeau {
  position: fixed; left: 0; right: 0; z-index: 70;
  bottom: calc(var(--barre-h) + env(safe-area-inset-bottom, 0px));
  background: var(--vert-950); color: var(--creme);
  box-shadow: 0 -18px 40px rgba(5, 46, 42, 0.28);
  border-top: 1px solid var(--trait-clair);
}
/* La barre d'appel collante disparaît à 1024 px : le bandeau redescend. */
@media (min-width: 1024px) { .t2a-bandeau { bottom: 0; } }
.t2a-bandeau[hidden] { display: none; }

.t2a-bandeau__corps {
  display: grid; gap: 16px; padding: 20px var(--marge) 22px;
  max-width: 1440px; margin-inline: auto;
}
@media (min-width: 900px) {
  .t2a-bandeau__corps {
    grid-template-columns: 1fr auto; gap: 32px; align-items: center;
    padding: 22px var(--marge);
  }
}
.t2a-bandeau__titre { font-size: 16px; font-weight: 900; letter-spacing: -0.025em; }
.t2a-bandeau__titre:focus-visible { outline: 2px solid var(--menthe); outline-offset: 4px; }
.t2a-bandeau__texte p {
  margin-top: 8px; font-size: 13.5px; line-height: 1.6;
  color: rgba(250, 248, 244, 0.74); max-width: 78ch;
}
.t2a-bandeau__texte a { color: var(--menthe); text-decoration: underline; text-underline-offset: 3px; }
.t2a-bandeau__texte a:hover { color: var(--creme); }

/* Refuser et Accepter au même niveau, même taille, même poids : c'est une
   exigence de la CNIL, et le seul dessin honnête. Seule la couleur distingue
   l'action attendue, jamais la facilité d'y accéder. */
.t2a-bandeau__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 900px) { .t2a-bandeau__actions { grid-template-columns: auto auto; gap: 12px; } }
.t2a-bandeau__btn {
  min-height: 46px; padding: 0 26px; border-radius: 999px; cursor: pointer;
  font-family: var(--police); font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  border: 1.5px solid transparent;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.t2a-bandeau__btn--non {
  background: transparent; color: var(--creme); border-color: rgba(250, 248, 244, 0.34);
}
.t2a-bandeau__btn--non:hover { border-color: var(--creme); background: rgba(250, 248, 244, 0.08); }
.t2a-bandeau__btn--oui { background: var(--orange-fonce); color: #fff; }
.t2a-bandeau__btn--oui:hover { background: var(--orange-tres-fonce); }

/* Le bandeau recouvre le bas de la page : on décale ce qui s'y trouve. */
body.a-bandeau { padding-bottom: calc(var(--barre-h) + 168px); }
@media (min-width: 900px) { body.a-bandeau { padding-bottom: calc(var(--barre-h) + 116px); } }
@media (min-width: 1024px) { body.a-bandeau { padding-bottom: 104px; } }

.t2a-lien-cookies {
  padding: 0; background: none; border: 0; cursor: pointer;
  font-family: var(--police); font-size: inherit; color: rgba(250, 248, 244, 0.62);
  text-align: left;
}
.t2a-lien-cookies:hover { color: rgba(250, 248, 244, 0.8); }

/* -------------------------------------------------------------------------
   Apparition au défilement
   ------------------------------------------------------------------------- */
.t2a-reveal { opacity: 0; transform: translateY(12px); transition: opacity 400ms ease, transform 400ms ease; }
.t2a-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .t2a-reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}