/* =========================================================================
   Rezo Enseigne — Design system
   Réseau national Enseigne · Signalétique · Publicité par l'objet
   ========================================================================= */

/* ---------- 1. Jetons ---------- */
:root {
  /* Encre */
  --ink-950: #16293F;
  --ink-900: #1E3854;
  --ink-850: #24425F;
  --ink-800: #2A4C6D;
  --ink-700: #33597D;
  --ink-600: #436C92;

  /* Papier */
  --paper: #FFFFFF;
  --paper-2: #F7F8FA;
  --paper-3: #EFF2F6;
  --paper-4: #E3E8EF;

  /* Signal (accent principal — évoque la haute visibilité) */
  --signal: #FF5A1F;
  --signal-600: #E8460C;
  --signal-100: #FFEDE5;
  /* Orange éclairci réservé aux fonds sombres : le --signal plein ne donne
     que 3,9:1 sur --ink-900, celui-ci monte à 5,2:1 et reste franchement
     orange. À n'employer que sur fond foncé — il passe mal sur blanc. */
  --signal-300: #FF8A4C;
  --amber: #FFB020;

  /* Pro (second accent, espace partenaires) */
  --pro: #0E9E90;
  --pro-600: #0A7D72;
  /* Variante foncée, réservée au texte posé SUR --pro-100. Le --pro-600 y
     tombe à 4,44:1 : suffisant sur blanc (5,01:1), en dessous du seuil de
     4,5:1 sur le fond teinté. Celui-ci y remonte à 5,21:1. */
  --pro-700: #087167;
  --pro-100: #E2F5F3;

  /* Texte */
  --tx: #0A1522;
  --tx-2: #3E4E63;
  --tx-3: #667791;
  --tx-inv: #FFFFFF;
  --tx-inv-2: rgba(255, 255, 255, .84);
  --tx-inv-3: rgba(255, 255, 255, .70);

  /* Lignes */
  --line: #DFE4EC;
  --line-2: #C9D1DD;
  --line-inv: rgba(255, 255, 255, .20);

  /* Formes */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Ombres */
  --sh-1: 0 1px 2px rgba(10, 21, 34, .06), 0 1px 3px rgba(10, 21, 34, .04);
  --sh-2: 0 4px 12px rgba(10, 21, 34, .07), 0 1px 3px rgba(10, 21, 34, .05);
  --sh-3: 0 12px 32px rgba(10, 21, 34, .11), 0 2px 8px rgba(10, 21, 34, .05);
  --sh-4: 0 28px 64px rgba(10, 21, 34, .17);

  /* Rythme */
  --wrap: 1200px;
  --wrap-narrow: 760px;
  --gut: clamp(16px, 4vw, 32px);
  --sec: clamp(52px, 8vw, 104px);

  /* Typo */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tx);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

/* L'attribut `hidden` doit primer sur toute règle d'affichage (.field, .card…) :
   sans cela les champs conditionnels des formulaires restent visibles. */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.12;
  letter-spacing: -.022em;
  font-weight: 800;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); letter-spacing: -.032em; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.6rem); letter-spacing: -.026em; }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.45rem); }
h4 { font-size: 1.02rem; letter-spacing: -.012em; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

strong { font-weight: 700; color: var(--tx); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sec) 0; }

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

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink-900); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--r) 0; font-weight: 600;
}
.skip:focus { left: 0; }

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

/* ---------- 3. Structure ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap-narrow { max-width: var(--wrap-narrow); }
.sec { padding-block: var(--sec); }
.sec-tight { padding-block: clamp(36px, 5vw, 64px); }
.bg-2 { background: var(--paper-2); }
.bg-3 { background: var(--paper-3); }

.dark {
  background: var(--ink-900);
  color: var(--tx-inv);
}
.dark h1, .dark h2, .dark h3, .dark h4 { color: #fff; }
.dark p, .dark li { color: var(--tx-inv-2); }
.dark strong { color: #fff; }

.grid { display: grid; gap: clamp(18px, 2.5vw, 30px); }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(min(224px, 100%), 1fr)); }
.g-halves { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); align-items: center; }

.stack > * + * { margin-top: 1.1em; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* ---------- 4. Titres de section ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: .78rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--signal); margin-bottom: 1em;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--signal); border-radius: 2px;
}
.dark .eyebrow { color: var(--amber); }
.dark .eyebrow::before { background: var(--amber); }

.lead {
  font-size: clamp(1.06rem, 1.6vw, 1.24rem);
  color: var(--tx-2);
  line-height: 1.62;
  max-width: 68ch;
}
.dark .lead { color: var(--tx-inv-2); }

.sec-head { max-width: 74ch; margin-bottom: clamp(30px, 4vw, 52px); }
.sec-head.center { margin-inline: auto; }

/* ---------- 5. Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 15px 26px;
  font: inherit; font-weight: 700; font-size: .97rem; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; border-radius: var(--r);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--signal); color: #fff; box-shadow: 0 6px 18px rgba(255, 90, 31, .3); }
.btn-primary:hover { background: var(--signal-600); box-shadow: 0 10px 26px rgba(255, 90, 31, .38); }

.btn-pro { background: var(--pro); color: #fff; box-shadow: 0 6px 18px rgba(14, 158, 144, .28); }
.btn-pro:hover { background: var(--pro-600); box-shadow: 0 10px 26px rgba(14, 158, 144, .36); }

.btn-dark { background: var(--ink-900); color: #fff; }
.btn-dark:hover { background: var(--ink-800); box-shadow: var(--sh-3); }

.btn-ghost { background: transparent; color: var(--tx); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink-900); background: var(--paper-2); }

.dark .btn-ghost,
.hero .btn-ghost,
.cta .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .34); }
.dark .btn-ghost:hover,
.hero .btn-ghost:hover,
.cta .btn-ghost:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .6); }

.btn-lg { padding: 18px 32px; font-size: 1.03rem; }
.btn-sm { padding: 10px 17px; font-size: .87rem; }
.btn-block { width: 100%; }

.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btns.center { justify-content: center; }

/* ---------- 6. En-tête ---------- */
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.hdr-in { display: flex; align-items: center; gap: 18px; height: 72px; }

.logo {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; font-weight: 800; letter-spacing: -.03em;
  font-size: 1.13rem; color: var(--tx); flex-shrink: 0;
}
.logo-mark {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(140deg, var(--signal) 0%, var(--signal-600) 55%, #B8350A 100%);
  display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(255, 90, 31, .34);
}
.logo-mark svg { width: 20px; height: 20px; }
.logo-txt { display: flex; flex-direction: column; line-height: 1.05; }
/* Baseline sous le logo. Elle était à .58rem, soit 9,3 px une fois rendue :
   sous 11 px, une ligne en capitales espacées cesse d'être lue et devient un
   motif décoratif. .69rem la ramène à 11 px — la taille minimale où elle
   reste une phrase, sans venir concurrencer le nom de marque au-dessus. */
.logo-txt small {
  font-size: .69rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tx-3);
}

.nav { display: flex; align-items: center; gap: 1px; margin-left: auto; }
.nav a {
  padding: 9px 11px; border-radius: var(--r-sm); text-decoration: none;
  font-size: .93rem; font-weight: 600; color: var(--tx-2);
  transition: color .14s, background .14s; white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--tx); background: var(--paper-3); }

.hdr-cta { display: flex; align-items: center; gap: 9px; margin-left: 10px; }

/* Menu déroulant */
.drop { position: relative; }
.drop > button {
  display: inline-flex; align-items: center; gap: .35em;
  padding: 9px 11px; border: 0; background: none; border-radius: var(--r-sm);
  font: inherit; font-size: .93rem; font-weight: 600; color: var(--tx-2); cursor: pointer;
  white-space: nowrap;
}
.drop > button:hover, .drop[data-open="true"] > button { color: var(--tx); background: var(--paper-3); }
.drop > button svg { width: 11px; height: 11px; transition: transform .2s; }
.drop[data-open="true"] > button svg { transform: rotate(180deg); }

/* Le panneau est centré sur son bouton, ce qui le fait sortir de l'écran dès
   que le bouton est près d'un bord : « Nos métiers » est le premier élément
   de la barre, et à 1 280 px — la largeur d'écran la plus répandue — sept de
   ses treize liens tombaient hors du cadre, à gauche. Deux garde-fous : une
   largeur qui ne peut pas dépasser la fenêtre, et un décalage `--nudge`
   calculé à l'ouverture par initNav() pour ramener le panneau à l'intérieur.
   Sans JavaScript, le panneau reste centré et simplement plus étroit. */
.drop-menu {
  position: absolute; top: calc(100% + 9px); left: 50%;
  transform: translateX(calc(-50% + var(--nudge, 0px))) translateY(-6px);
  min-width: 560px; max-width: calc(100vw - 24px); padding: 12px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-4);
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s;
}
.drop[data-open="true"] .drop-menu {
  opacity: 1; visibility: visible;
  transform: translateX(calc(-50% + var(--nudge, 0px))) translateY(0);
}

/* Pont invisible entre le bouton et le panneau. Les neuf pixels qui les
   séparent n'appartiennent ni à l'un ni à l'autre : la souris qui descend
   vers un lien les traverse, `mouseleave` se déclenche sur .drop, et le menu
   se referme avant d'avoir été atteint. Mesuré sur quatre trajectoires, il se
   fermait à chaque fois. Ce pseudo-élément rend l'espace solidaire du menu —
   il n'intercepte rien quand le menu est fermé, puisqu'il hérite alors de sa
   visibilité. */
.drop-menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.drop-menu a {
  display: block; padding: 11px 13px; border-radius: var(--r); text-decoration: none;
}
.drop-menu a:hover { background: var(--paper-2); }
.drop-menu strong { display: block; font-size: .92rem; font-weight: 700; margin-bottom: 1px; }
.drop-menu span { display: block; font-size: .8rem; color: var(--tx-3); line-height: 1.45; }

/* Burger */
.burger {
  display: none; width: 42px; height: 42px; margin-left: auto;
  border: 1px solid var(--line-2); border-radius: var(--r); background: #fff;
  cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.burger span { display: block; width: 17px; height: 2px; background: var(--tx); border-radius: 2px; transition: .22s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mnav {
  display: none; border-top: 1px solid var(--line); background: #fff;
  max-height: calc(100dvh - 72px); overflow-y: auto; padding: 12px var(--gut) 28px;
}
.mnav.open { display: block; }
.mnav a {
  display: block; padding: 13px 4px; text-decoration: none; font-weight: 600;
  border-bottom: 1px solid var(--paper-3); color: var(--tx-2);
}
.mnav a:hover { color: var(--signal); }
.mnav .mnav-h {
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tx-3); padding: 18px 4px 6px; border: 0;
}
.mnav .btns { margin-top: 18px; }
.mnav .btns .btn { flex: 1; }

@media (max-width: 1080px) {
  .nav, .hdr-cta { display: none; }
  .burger { display: flex; }
}

/* ---------- 7. Héros ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink-900); color: #fff;
  padding-block: clamp(64px, 9vw, 128px);
  isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(255, 106, 45, .26) 0%, transparent 58%),
    linear-gradient(178deg, rgba(22, 41, 63, .42) 0%, rgba(22, 41, 63, .74) 60%, rgba(22, 41, 63, .92) 100%);
}
.hero h1 { color: #fff; max-width: 17ch; }
.hero .lead { color: var(--tx-inv-2); max-width: 60ch; }
.hero-in { max-width: 780px; }
.hero .btns { margin-top: 34px; }

.hero-badge {
  display: inline-flex; align-items: center; gap: .6em;
  padding: 8px 15px 8px 10px; margin-bottom: 26px;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .17);
  border-radius: var(--r-pill); font-size: .84rem; font-weight: 600; color: #fff;
  backdrop-filter: blur(8px);
}
.hero-badge b {
  display: inline-block; padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--signal); font-size: .72rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
}

.hero-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 2px; margin-top: 52px;
  border-top: 1px solid var(--line-inv); padding-top: 30px;
}
.hero-stats div { padding-right: 18px; }
.hero-stats b {
  display: block; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800;
  letter-spacing: -.03em; color: #fff; line-height: 1.1;
}
.hero-stats span { font-size: .86rem; color: var(--tx-inv-3); }

/* Héros interne (pages secondaires) */
.hero-in-page { padding-block: clamp(52px, 7vw, 90px); }
.hero-in-page h1 { max-width: 22ch; font-size: clamp(1.95rem, 4.4vw, 3.3rem); }

/* ---------- 8. Fil d'Ariane ---------- */
.crumbs { font-size: .82rem; color: var(--tx-inv-3); margin-bottom: 20px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45em; }
.crumbs li { margin: 0; display: flex; align-items: center; gap: .45em; }
.crumbs li::after { content: "›"; opacity: .5; }
.crumbs li:last-child::after { display: none; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current] { color: var(--tx-inv-2); }

/* ---------- 9. Cartes ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex; flex-direction: column;
}
.card-link { text-decoration: none; color: inherit; }
.card-link:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--line-2); }

.card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-3); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.card-link:hover .card-media img { transform: scale(1.055); }
.card-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6, 12, 21, .55) 0%, transparent 55%);
}
.card-tag {
  position: absolute; left: 13px; bottom: 12px; z-index: 2;
  padding: 5px 11px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .95); color: var(--ink-900);
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.card-body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { margin-bottom: .35em; }
.card-body p { font-size: .93rem; color: var(--tx-2); margin-bottom: 0; }
.card-more {
  margin-top: auto; padding-top: 16px; font-size: .87rem; font-weight: 700; color: var(--signal);
  display: inline-flex; align-items: center; gap: .4em;
}
.card-link:hover .card-more { gap: .75em; }
.card-more::after { content: "→"; transition: transform .2s; }

.card-list { list-style: none; padding: 0; margin: 14px 0 0; }
.card-list li {
  font-size: .87rem; color: var(--tx-3); padding-left: 18px; position: relative; margin-bottom: .28em;
}
.card-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--signal); opacity: .55;
}

/* Carte compacte (icône) */
.tile {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 24px; transition: transform .2s, box-shadow .2s;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.tile-ico {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 18px;
  display: grid; place-items: center;
  background: var(--signal-100); color: var(--signal-600);
}
.tile-ico svg { width: 23px; height: 23px; }
.tile h3 { font-size: 1.08rem; }
.tile p { font-size: .92rem; color: var(--tx-2); margin: 0; }

.dark .tile { background: rgba(255, 255, 255, .075); border-color: var(--line-inv); }
.dark .tile-ico { background: rgba(255, 90, 31, .17); color: var(--amber); }

/* Numérotées */
.steps { counter-reset: s; }
.step { position: relative; padding-left: 66px; }
.step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: -4px;
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.04em;
  color: var(--signal); font-variant-numeric: tabular-nums;
}
.step::after {
  content: ""; position: absolute; left: 44px; top: 6px; bottom: -18px; width: 1px;
  background: linear-gradient(var(--line), transparent);
}
.step:last-child::after { display: none; }
.step h3 { font-size: 1.12rem; margin-bottom: .3em; }
.step p { font-size: .94rem; color: var(--tx-2); margin: 0; }
.dark .step::after { background: linear-gradient(var(--line-inv), transparent); }
.dark .step::before { color: var(--amber); }

/* ---------- 10. Bandeau de confiance ---------- */
.trust {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.trust > div { background: #fff; padding: 24px 22px; }
.trust b { display: block; font-size: 1rem; font-weight: 700; margin-bottom: 3px; }
.trust span { font-size: .86rem; color: var(--tx-3); line-height: 1.5; display: block; }
.trust svg { width: 22px; height: 22px; color: var(--signal); margin-bottom: 12px; }

/* ---------- 11. Contenu long ---------- */
.prose { max-width: 74ch; }
.prose h2 { margin-top: 1.9em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.7em; font-size: 1.22rem; }
.prose p, .prose li { color: var(--tx-2); }
.prose li { margin-bottom: .55em; }
.prose a { color: var(--signal-600); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.prose a:hover { color: var(--signal); }
.prose > img, .prose figure { border-radius: var(--r-lg); margin: 2em 0; overflow: hidden; }
.prose figure { border: 1px solid var(--line); }
.prose figcaption {
  padding: 12px 18px; font-size: .84rem; color: var(--tx-3);
  background: var(--paper-2); border-top: 1px solid var(--line);
}

.checks { list-style: none; padding: 0; }
.checks li { position: relative; padding-left: 30px; margin-bottom: .6em; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .35em;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--signal-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8460C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.dark .checks li::before { background-color: rgba(255, 176, 32, .2); }

.note {
  border-left: 3px solid var(--signal); background: var(--signal-100);
  padding: 20px 24px; border-radius: 0 var(--r) var(--r) 0; margin: 1.8em 0;
}
.note p { color: var(--tx-2); margin: 0; font-size: .95rem; }
.note strong { color: var(--ink-900); }

/* Sommaire */
.toc {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px 26px; margin-bottom: 2.4em;
}
.toc h2 { font-size: .78rem !important; letter-spacing: .13em; text-transform: uppercase; color: var(--tx-3); margin: 0 0 14px !important; }
.toc ol { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 32px; }
.toc li { font-size: .91rem; margin-bottom: .42em; break-inside: avoid; }
.toc a { color: var(--tx-2); text-decoration: none; }
.toc a:hover { color: var(--signal-600); text-decoration: underline; }
@media (max-width: 620px) { .toc ol { columns: 1; } }

/* ---------- 12. Mise en page à colonnes ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(32px, 5vw, 68px); align-items: start; }
@media (max-width: 980px) { .split { grid-template-columns: minmax(0, 1fr); } }

.aside-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 24px; box-shadow: var(--sh-2);
}
.aside-sticky { position: sticky; top: 92px; }
.aside-card h3 { font-size: 1.08rem; }
.aside-card p { font-size: .9rem; color: var(--tx-2); }
.aside-card .btn { margin-top: 6px; }

.link-list { list-style: none; padding: 0; margin: 0; }
.link-list li { margin: 0; border-bottom: 1px solid var(--paper-3); }
.link-list li:last-child { border: 0; }
.link-list a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 11px 0; font-size: .91rem; font-weight: 600; color: var(--tx-2); text-decoration: none;
}
.link-list a:hover { color: var(--signal-600); }
.link-list a::after { content: "→"; color: var(--line-2); font-weight: 400; }
.link-list a:hover::after { color: var(--signal); }

/* ---------- 13. Accordéon (FAQ) ---------- */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-weight: 700; font-size: 1.03rem; letter-spacing: -.012em;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 13px; height: 13px;
  margin-top: -6px; transition: transform .25s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1522' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.acc details[open] summary::after { transform: rotate(135deg); }
.acc summary:hover { color: var(--signal-600); }
.acc-body { padding: 0 44px 24px 0; }
.acc-body p, .acc-body li { color: var(--tx-2); font-size: .96rem; }
.acc-body p:last-child { margin-bottom: 0; }

/* ---------- 14. Formulaires ---------- */
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 7px; }
.field > label, .fieldset-legend {
  font-size: .89rem; font-weight: 700; color: var(--tx); letter-spacing: -.008em;
}
.field .hint { font-size: .82rem; color: var(--tx-3); font-weight: 400; }
.req { color: var(--signal); }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], select, textarea {
  width: 100%; padding: 13px 15px; font: inherit; font-size: .96rem; color: var(--tx);
  background: #fff; border: 1.5px solid var(--line-2); border-radius: var(--r);
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667791' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 15px;
  padding-right: 40px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(255, 90, 31, .14);
}
input::placeholder, textarea::placeholder { color: #9AA7B8; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: #D92D20; box-shadow: 0 0 0 3px rgba(217, 45, 32, .11);
}
.err { font-size: .82rem; color: #D92D20; font-weight: 600; display: none; }
.err.show { display: block; }

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 620px) { .row-2 { grid-template-columns: 1fr; } }

fieldset { border: 0; padding: 0; margin: 0; }
.fieldset-legend { display: block; margin-bottom: 12px; }

/* Cases / options en grille */
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr)); gap: 10px; }
.opt {
  position: relative; display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 16px; background: #fff; border: 1.5px solid var(--line-2);
  border-radius: var(--r); cursor: pointer; transition: border-color .15s, background .15s;
}
.opt:hover { border-color: var(--tx-3); }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt-box {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid var(--line-2); border-radius: 5px; background: #fff;
  transition: .15s; display: grid; place-items: center;
}
.opt input[type="radio"] ~ .opt-box { border-radius: 50%; }
.opt-box::after {
  content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform .15s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.opt input:checked ~ .opt-box { background: var(--signal); border-color: var(--signal); }
.opt input:checked ~ .opt-box::after { transform: scale(1); }
.opt input:focus-visible ~ .opt-box { box-shadow: 0 0 0 3px rgba(255, 90, 31, .25); }
.opt:has(input:checked) { border-color: var(--signal); background: var(--signal-100); }
.opt-txt { font-size: .92rem; font-weight: 600; line-height: 1.4; }
.opt-txt small { display: block; font-weight: 400; font-size: .82rem; color: var(--tx-3); margin-top: 2px; }

.form-pro .opt input:checked ~ .opt-box { background: var(--pro); border-color: var(--pro); }
.form-pro .opt:has(input:checked) { border-color: var(--pro); background: var(--pro-100); }
.form-pro input:focus, .form-pro select:focus, .form-pro textarea:focus {
  border-color: var(--pro); box-shadow: 0 0 0 3px rgba(14, 158, 144, .14);
}

/* Niveau de capacité (radio en ligne) */
.levels { display: flex; flex-wrap: wrap; gap: 8px; }
.level { position: relative; }
.level input { position: absolute; opacity: 0; }
.level span {
  display: block; padding: 8px 15px; border: 1.5px solid var(--line-2); border-radius: var(--r-pill);
  font-size: .85rem; font-weight: 600; cursor: pointer; transition: .15s; background: #fff;
}
.level input:checked + span { background: var(--pro); border-color: var(--pro); color: #fff; }
.level input:focus-visible + span { box-shadow: 0 0 0 3px rgba(14, 158, 144, .25); }

/* Étapes */
.stepper { display: flex; gap: 4px; margin-bottom: 30px; }
.stepper div { flex: 1; }
.stepper i {
  display: block; height: 4px; border-radius: 2px; background: var(--paper-4);
  transition: background .3s;
}
.stepper div.done i, .stepper div.now i { background: var(--signal); }
.stepper span {
  display: block; font-size: .76rem; font-weight: 700; color: var(--tx-3);
  margin-top: 9px; letter-spacing: .02em;
}
.stepper div.now span { color: var(--signal-600); }
.form-pro .stepper div.done i, .form-pro .stepper div.now i { background: var(--pro); }
.form-pro .stepper div.now span { color: var(--pro-600); }
@media (max-width: 620px) { .stepper span { font-size: .68rem; } }

.fstep { display: none; }
.fstep.active { display: grid; gap: 20px; animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.form-nav { display: flex; gap: 12px; justify-content: space-between; margin-top: 8px; }

.form-panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(24px, 4vw, 44px); box-shadow: var(--sh-3);
}

.form-status {
  display: none; padding: 16px 20px; border-radius: var(--r); font-size: .93rem; font-weight: 600;
}
.form-status.show { display: block; }
.form-status.ok { background: #E7F6EC; color: #08663A; border: 1px solid #A7E0BF; }
.form-status.ko { background: #FEECEB; color: #A11C13; border: 1px solid #F7C8C4; }

.consent { display: flex; gap: 11px; align-items: flex-start; font-size: .85rem; color: var(--tx-3); line-height: 1.5; }
.consent input { margin-top: 3px; flex-shrink: 0; width: 17px; height: 17px; accent-color: var(--signal); }
.consent a { color: var(--tx-2); }

/* ---------- 15. Villes ---------- */
.city-search { position: relative; max-width: 520px; }
.city-search input { padding-left: 44px; }
.city-search svg {
  position: absolute; left: 15px; top: 50%; margin-top: -9px;
  width: 18px; height: 18px; color: var(--tx-3); pointer-events: none;
}

.city-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 9px;
  margin-top: 26px;
}
.city-chip {
  display: flex; align-items: baseline; gap: 7px; padding: 12px 15px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  text-decoration: none; font-size: .92rem; font-weight: 600; color: var(--tx);
  transition: .15s;
}
.city-chip:hover { border-color: var(--signal); color: var(--signal-600); transform: translateY(-2px); box-shadow: var(--sh-2); }
.city-chip small { font-size: .76rem; color: var(--tx-3); font-weight: 500; margin-left: auto; }
.city-chip[hidden] { display: none; }
.city-empty { display: none; padding: 30px 0; color: var(--tx-3); }
.city-empty.show { display: block; }

/* ---------- 16. Galerie ---------- */
.gal { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px; }
.gal figure { margin: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-3); }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.gal figure:hover img { transform: scale(1.06); }

.showcase { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.showcase figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-3); }
.showcase img { width: 100%; height: 100%; object-fit: cover; }
.showcase .s-a { grid-column: span 7; aspect-ratio: 16 / 11; }
.showcase .s-b { grid-column: span 5; aspect-ratio: 4 / 3.4; }
.showcase .s-c { grid-column: span 4; aspect-ratio: 4 / 3; }
@media (max-width: 780px) {
  .showcase { grid-template-columns: repeat(2, 1fr); }
  .showcase .s-a, .showcase .s-b, .showcase .s-c { grid-column: span 1; aspect-ratio: 4 / 3; }
}

/* ---------- 17. Appel à l'action ---------- */
.cta {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--ink-900); color: #fff;
  border-radius: var(--r-xl); padding: clamp(36px, 5.5vw, 68px);
}
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 130% at 100% 0%, rgba(255, 106, 45, .30) 0%, transparent 62%);
}
.cta h2 { color: #fff; max-width: 20ch; }
.cta p { color: var(--tx-inv-2); max-width: 58ch; }
.cta .btns { margin-top: 30px; }

.cta-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; }
.cta-card {
  border-radius: var(--r-xl); padding: clamp(28px, 4vw, 46px); position: relative;
  overflow: hidden; isolation: isolate;
}
.cta-card.client { background: var(--ink-900); color: #fff; }
.cta-card.client::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(85% 120% at 95% 5%, rgba(255, 106, 45, .32) 0%, transparent 60%);
}
.cta-card.pro { background: var(--pro-600); color: #fff; }
.cta-card.pro::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(85% 120% at 95% 5%, rgba(255, 255, 255, .22) 0%, transparent 60%);
}
.cta-card h3 { color: #fff; font-size: clamp(1.35rem, 2.3vw, 1.85rem); letter-spacing: -.025em; }
.cta-card p { color: rgba(255, 255, 255, .8); font-size: .96rem; }
.cta-card .btn { margin-top: 20px; }
.cta-card .btn-white { background: #fff; color: var(--ink-900); }
.cta-card .btn-white:hover { background: var(--paper-2); box-shadow: var(--sh-3); }

/* ---------- 18. Pied de page ---------- */
.ftr { background: var(--ink-950); color: rgba(255, 255, 255, .76); padding-top: clamp(52px, 7vw, 84px); }
.ftr-top { display: grid; grid-template-columns: 1.6fr repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: clamp(28px, 4vw, 52px); }
.ftr h4 {
  color: #fff; font-size: .77rem; letter-spacing: .13em; text-transform: uppercase;
  margin-bottom: 16px; font-weight: 800;
}
.ftr ul { list-style: none; padding: 0; margin: 0; }
.ftr li { margin-bottom: .5em; }
.ftr a { color: rgba(255, 255, 255, .78); text-decoration: none; font-size: .89rem; transition: color .14s; }
.ftr a:hover { color: #fff; }
.ftr .logo { color: #fff; margin-bottom: 16px; }
.ftr-about { font-size: .89rem; line-height: 1.65; max-width: 38ch; }
.ftr-bot {
  margin-top: clamp(40px, 5vw, 64px); padding-block: 26px;
  border-top: 1px solid var(--line-inv);
  display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: space-between;
  font-size: .82rem;
}
.ftr-bot nav { display: flex; flex-wrap: wrap; gap: 18px; }

.ftr-cities { margin-top: clamp(36px, 4vw, 52px); padding-top: 30px; border-top: 1px solid var(--line-inv); }
.ftr-cities p { font-size: .82rem; line-height: 2; margin: 0; color: rgba(255, 255, 255, .7); }
.ftr-cities a { font-size: .82rem; }
.ftr-cities a::after { content: " ·"; color: rgba(255,255,255,.2); }
.ftr-cities a:last-child::after { display: none; }

/* ---------- 19. Barre mobile ---------- */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none;
  gap: 9px; padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.mobile-bar .btn { flex: 1; padding: 13px 12px; font-size: .9rem; }
@media (max-width: 780px) {
  .mobile-bar { display: flex; }
  body { padding-bottom: 74px; }
}

/* ---------- 20. Divers ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tag {
  display: inline-block; padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--paper-3); color: var(--tx-2); font-size: .82rem; font-weight: 600;
  text-decoration: none; transition: .15s;
}
a.tag:hover { background: var(--ink-900); color: #fff; }
.dark .tag { background: rgba(255, 255, 255, .08); color: var(--tx-inv-2); }
.dark a.tag:hover { background: var(--signal); color: #fff; }

.kw-block { font-size: .88rem; color: var(--tx-3); line-height: 1.9; }
.kw-block b { color: var(--tx-2); }

.table-wrap { overflow-x: auto; margin: 1.8em 0; border: 1px solid var(--line); border-radius: var(--r-lg); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 520px; }
th, td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line); }
th { background: var(--paper-2); font-weight: 700; font-size: .85rem; letter-spacing: .02em; }
tr:last-child td { border-bottom: 0; }
td { color: var(--tx-2); }

.quote {
  border-left: 3px solid var(--line-2); padding-left: 24px; margin: 2em 0;
  font-size: 1.06rem; line-height: 1.6; color: var(--tx-2); font-style: italic;
}
.quote cite { display: block; margin-top: 12px; font-size: .87rem; font-style: normal; color: var(--tx-3); font-weight: 600; }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pill {
  padding: 7px 14px; border: 1px solid var(--line-inv); border-radius: var(--r-pill);
  font-size: .83rem; font-weight: 600; color: var(--tx-inv-2);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
  .btn:hover, .card-link:hover, .tile:hover, .city-chip:hover { transform: none; }
}

@media print {
  .hdr, .ftr, .mobile-bar, .btns, .cta { display: none !important; }
  body { font-size: 12pt; }
}

/* ---------- 21. Formules d'abonnement ---------- */
.plans {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 20px; align-items: start;
}
.plan {
  position: relative; background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--r-xl); padding: 32px 28px 30px;
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.plan-featured {
  border-color: var(--pro); box-shadow: 0 14px 40px rgba(14, 158, 144, .16);
}
.plan-badge {
  position: absolute; top: -13px; left: 28px;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--pro); color: #fff;
  font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.plan h3 { font-size: 1.3rem; margin-bottom: .3em; }
.plan-pitch { font-size: .92rem; color: var(--tx-2); margin-bottom: 22px; min-height: 3.2em; }

.plan-price { display: flex; align-items: baseline; gap: .3em; flex-wrap: wrap; }
.plan-price b {
  font-size: 2.7rem; font-weight: 800; letter-spacing: -.04em; line-height: 1;
  color: var(--ink-900); font-variant-numeric: tabular-nums;
}
.plan-price span { font-size: 1.05rem; font-weight: 700; color: var(--ink-900); }
/* --tx-3 tombe à 4,28:1 sur le fond gris des cartes tarifaires ; la durée
   de l'abonnement fait partie du prix, elle doit se lire. */
.plan-price em { font-style: normal; font-size: .92rem; color: var(--tx-2); font-weight: 600; }
.plan-note { font-size: .84rem; color: var(--pro-600); font-weight: 600; margin: 6px 0 18px; }
.plan-audience { font-size: .85rem; color: var(--tx-3); margin-bottom: 20px; }
.plan-audience strong { color: var(--tx-2); }

.plan-list { list-style: none; padding: 0; margin: 0 0 26px; flex: 1; }
.plan-list li {
  position: relative; padding-left: 28px; margin-bottom: .58em;
  font-size: .9rem; color: var(--tx-2); line-height: 1.5;
}
.plan-list li::before {
  content: ""; position: absolute; left: 0; top: .28em;
  width: 18px; height: 18px; border-radius: 50%;
}
.plan-list li.yes::before {
  background: var(--pro-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A7D72' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.plan-list li.no {
  color: var(--tx-3); text-decoration: line-through; text-decoration-color: var(--line-2);
}
.plan-list li.no::before {
  background: var(--paper-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA7B8' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 10px no-repeat;
}

@media (max-width: 620px) {
  .plan { padding: 28px 22px 26px; }
  .plan-price b { font-size: 2.3rem; }
  .plan-pitch { min-height: 0; }
}

/* ---------- 22. Bandeau d'offre de lancement ---------- */
.launch {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(112deg, var(--pro-600) 0%, var(--pro) 55%, #14B8A6 100%);
  color: #fff; border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px);
}
.launch::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 140% at 92% 8%, rgba(255, 255, 255, .26) 0%, transparent 60%);
}
.launch-tag {
  display: inline-block; padding: 6px 14px; margin-bottom: 16px;
  background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .34);
  border-radius: var(--r-pill); font-size: .74rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
}
.launch h2, .launch h3 { color: #fff; margin-bottom: .35em; }
.launch h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.launch p { color: rgba(255, 255, 255, .9); max-width: 62ch; }
.launch ul { list-style: none; padding: 0; margin: 20px 0 0; }
.launch li {
  position: relative; padding-left: 28px; margin-bottom: .5em;
  font-size: .92rem; color: rgba(255, 255, 255, .92);
}
.launch li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 18px; height: 18px;
  border-radius: 50%; background: rgba(255, 255, 255, .24)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.launch .btns { margin-top: 26px; }
.launch .btn-white { background: #fff; color: var(--pro-600); }
.launch .btn-white:hover { background: var(--paper-2); box-shadow: var(--sh-3); }

/* Bandeau compact, en haut de page */
.launch-strip {
  background: var(--pro-600); color: #fff; text-align: center;
  padding: 11px var(--gut); font-size: .92rem; font-weight: 600;
}
.launch-strip a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.launch-strip b {
  display: inline-block; padding: 2px 9px; margin-right: 8px;
  /* Pastille assombrie plutôt qu'éclaircie : un voile blanc à 22 % sur le
     vert du bandeau ramenait le libellé blanc à 3,36:1, sous le seuil pour
     du 11,8 px. Un voile noir à 18 % le remonte à 6,76:1 et détache mieux
     la pastille du reste de la ligne. */
  background: rgba(0, 0, 0, .18); border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}

/* Pastille sur les cartes de formules */
.plan-launch {
  display: inline-block; margin: -8px 0 14px;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--pro-100); color: var(--pro-600);
  font-size: .78rem; font-weight: 800;
}

/* ---------- 23. Réalisations ---------- */
.proj-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.proj-filters button {
  padding: 9px 16px; border: 1.5px solid var(--line-2); background: #fff;
  border-radius: var(--r-pill); font: inherit; font-size: .87rem; font-weight: 600;
  color: var(--tx-2); cursor: pointer; transition: .15s;
}
.proj-filters button:hover { border-color: var(--tx-3); }
.proj-filters button[aria-pressed="true"] {
  background: var(--ink-900); border-color: var(--ink-900); color: #fff;
}
.proj-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 0;
  font-size: .82rem; color: var(--tx-3);
}
.proj-meta span { display: inline-flex; align-items: center; gap: .35em; }
.proj-empty { display: none; padding: 40px 0; color: var(--tx-3); }
.proj-empty.show { display: block; }

.proj-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; margin: 1.8em 0;
}
.proj-facts > div { background: #fff; padding: 18px 20px; }
.proj-facts dt {
  font-size: .74rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx-3); margin-bottom: 5px;
}
.proj-facts dd { margin: 0; font-size: .96rem; font-weight: 600; color: var(--tx); }

.illus-note {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--paper-3); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px 18px; margin: 1.6em 0;
  font-size: .86rem; color: var(--tx-2); line-height: 1.55;
}
.illus-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--tx-3); }

/* ---------- 24. Lisibilité des composants clairs en section sombre ----------
   `.tile p`, `.step p` et `.card-body p` fixent une couleur de texte foncée et
   sont déclarés APRÈS `.dark p` : à spécificité égale, c'est la dernière règle
   qui l'emporte, et le texte devenait gris foncé sur fond bleu nuit — illisible.
   On rétablit ici explicitement les couleurs inversées.                      */
.dark .tile p,
.dark .tile li,
.dark .step p,
.dark .card-body p,
.dark .plan-pitch,
.dark .plan-audience,
.dark .proj-meta { color: var(--tx-inv-2); }

.dark .tile h3,
.dark .step h3,
.dark .card-body h3 { color: #fff; }

.dark .card-list li,
.dark .tile small { color: var(--tx-inv-3); }

.dark .link-list a { color: var(--tx-inv-2); }
.dark .link-list a:hover { color: #fff; }
.dark .link-list li { border-bottom-color: var(--line-inv); }


/* ---------- 25. Anti-débordement horizontal sur mobile ----------
   Un enfant de grille vaut `minmax(auto, 1fr)` par défaut : sa largeur minimale
   est celle de son contenu. Un tableau large (min-width 520px) empêchait donc
   la colonne de rétrécir, et la page débordait de près de 180 px sur un écran
   de 360 px. `min-width: 0` autorise la colonne à passer sous cette largeur, et
   le conteneur `.table-wrap` reprend son rôle de zone défilante.            */
.grid > *,
.split > *,
.g-halves > *,
.plans > *,
.prose,
.card-body,
.tile { min-width: 0; }

.prose img,
.prose figure,
.prose pre { max-width: 100%; }

/* Les mots très longs (URL, références techniques) ne doivent pas élargir la page */
.prose p, .prose li, .acc-body p, .card-body p, .tile p { overflow-wrap: break-word; }

@media (max-width: 620px) {
  /* Les tableaux de prix restent lisibles en défilant dans leur cadre */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .proj-facts { grid-template-columns: 1fr 1fr; }
  .stepper span { display: none; }
  .hero-stats { gap: 18px 2px; }
}


/* ---------- 26. Mise en valeur sur fond sombre ----------
   `strong { color: var(--tx) }` applique l'encre foncée partout, y compris
   dans les héros et les blocs d'appel à l'action, qui sont bleu nuit. Les
   mots mis en avant y devenaient donc quasi invisibles — 1,53:1 de contraste,
   soit du texte foncé sur fond foncé. C'est d'autant plus dommageable que ce
   sont précisément les arguments que l'on cherche à faire ressortir :
   « abonnement fixe », « sans aucune commission », « 25 ans de métier ».

   On les passe en orange de marque plutôt qu'en blanc : sur un fond sombre où
   tout le texte est déjà clair, le blanc ne se distingue plus du reste, alors
   que l'orange isole l'argument au premier coup d'œil.                       */
.hero strong,
.hero b,
.cta strong,
.cta b,
.dark strong,
.dark b { color: var(--signal-300); }

/* Sauf là où le gras est déjà porté par un fond coloré ou une pastille :
   l'orange sur orange, ou sur le vert de l'espace partenaires, serait illisible. */
.hero-badge b,
.launch-strip b,
.plan-badge b,
.tag b,
.btn strong,
.btn b { color: inherit; }

/* Exception dans l'exception : la pastille du bandeau héros. Du blanc sur
   l'orange de marque ne donne que 3,12:1, en dessous du seuil pour un texte
   de 11,5 px. L'encre foncée sur ce même orange monte à 4,73:1 — la couleur
   de marque est intacte, c'est le texte qui change. */
.hero-badge b { color: var(--ink-950); }


/* ---------- 27. Formule d'essai à 0 € ----------
   La formule Découverte n'est pas un abonnement moins cher, c'est une porte
   d'entrée gratuite : elle doit se distinguer des deux abonnements sans pour
   autant leur voler la vedette. D'où l'orange de lancement sur son bandeau,
   alors que le vert « partenaires » reste réservé à la formule recommandée. */
.plan-free { border-color: var(--signal); background: linear-gradient(180deg, var(--signal-100) 0%, #fff 190px); }
.plan-free .plan-badge { background: var(--signal); }
.plan-free .plan-price b { color: var(--signal-600); }
.plan-free .btn-pro { background: var(--signal); box-shadow: 0 6px 18px rgba(255, 90, 31, .3); }
.plan-free .btn-pro:hover { background: var(--signal-600); box-shadow: 0 10px 26px rgba(255, 90, 31, .38); }


/* ---------- 28. Bloc d'amortissement ----------
   Le seuil chiffré doit se lire avant le tableau, y compris par quelqu'un qui
   survole : d'où la colonne latérale collante sur grand écran, qui reste en
   vue pendant que l'œil parcourt les lignes. Sur mobile elle repasse
   simplement au-dessus du tableau.                                          */
.amort { display: grid; gap: clamp(20px, 3vw, 34px); grid-template-columns: minmax(min(280px, 100%), .8fr) 2fr; align-items: start; }
.amort-main { min-width: 0; }

.amort-seuil {
  position: sticky; top: 96px;
  background: var(--ink-900); color: #fff;
  border-radius: var(--r-lg); padding: 26px 24px;
}
.amort-seuil span { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--amber); }
.amort-seuil b { display: block; margin: 6px 0 12px; font-size: clamp(2.4rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.amort-seuil p { margin: 0; font-size: .92rem; color: var(--tx-inv-2); }

.t-amort th[scope="row"] { font-weight: 600; }

/* Les trois façons d'acheter un chantier, mises côte à côte sous le tableau */
.amort-compare {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.amort-compare li {
  margin: 0; min-width: 0; padding: 20px 22px;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg);
}
.amort-compare li:first-child { border-color: var(--pro); }
.amort-compare b { display: block; font-size: .98rem; }
.amort-compare em { display: block; margin: 4px 0 8px; font-style: normal; font-weight: 800; color: var(--pro-600); }
.amort-compare li:not(:first-child) em { color: var(--tx-2); }
.amort-compare span { font-size: .89rem; color: var(--tx-2); line-height: 1.55; }

@media (max-width: 880px) {
  .amort { grid-template-columns: 1fr; }
  .amort-seuil { position: static; }
}


/* ---------- 29. Séparation des deux publics ----------
   Le site s'adresse aux entreprises qui cherchent à se rendre visibles. Le
   recrutement de prestataires est un second métier : il ne doit plus se
   présenter au même niveau, sans quoi un commerçant venu chercher une
   enseigne hésite entre deux propositions qui ne le concernent pas toutes. */

/* Bandeau d'entrée de l'espace professionnels — uniquement sur les 3 pages
   de la rubrique. Il annonce le changement de public dès la première ligne. */
.pro-bar {
  background: var(--pro-100); border-bottom: 1px solid rgba(14, 158, 144, .28);
  padding: 13px var(--gut);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  justify-content: center; text-align: center;
}
.pro-bar-tag {
  padding: 3px 11px; border-radius: var(--r-pill);
  background: var(--pro-600); color: #fff;
  font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
.pro-bar p { margin: 0; font-size: .92rem; color: var(--ink-900); max-width: 82ch; }
.pro-bar b { color: var(--pro-700); }
.pro-bar a { color: var(--pro-700); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Invitation en bas des pages client : présente, mais visiblement secondaire
   par rapport au bloc de demande de devis qui la précède. */
.pro-invite {
  margin-top: 18px; padding: 22px 26px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  justify-content: space-between;
  background: var(--paper-2); border: 1.5px solid var(--line); border-radius: var(--r-lg);
}
.pro-invite > div { min-width: 0; flex: 1 1 320px; }
.pro-invite b { display: block; font-size: 1rem; color: var(--tx); }
.pro-invite span { display: block; margin-top: 4px; font-size: .9rem; color: var(--tx-2); line-height: 1.55; }
.pro-invite .btn { flex: 0 0 auto; }

/* Une seule carte : elle ne doit pas s'étirer sur toute la largeur d'écran. */
.cta-solo { grid-template-columns: 1fr; }

/* Tuiles « à qui s'adresse ce service » : sobres, sans pictogramme, pour
   rester une liste de lecture et non une seconde grille de services. */
.tile-plain { padding: 22px 24px; }
.tile-plain h3 { font-size: 1.02rem; margin-bottom: .35em; }
.tile-plain p { font-size: .91rem; margin: 0; }
.tile-plain a { color: var(--signal-600); font-weight: 600; }


/* ---------- 30. Ergonomie tactile et lisibilité sur mobile ----------
   Aucune page ne déborde horizontalement, mais deux défauts subsistaient au
   doigt : des libellés descendus sous 11 px, et des liens de navigation hauts
   de 16 px seulement. Sur un écran tactile, une cible de moins de 24 px se
   rate régulièrement — et les deux liens les plus précieux du site, le
   téléphone et l'e-mail, étaient précisément dans ce cas.

   Les corrections sont volontairement cantonnées aux écrans tactiles : sur
   un grand écran, la souris est précise et la densité actuelle est justifiée.
   Les liens en pleine phrase (« … à Rivesaltes, Le Soler … ») restent tels
   quels : les agrandir déformerait l'interligne du paragraphe, et la norme
   d'accessibilité les exempte justement pour cette raison.               */
@media (max-width: 900px) {

  /* Libellés : rien en dessous de 11 px, seuil sous lequel un texte devient
     pénible à lire sur un écran tenu à bout de bras. */
  .logo-txt small { font-size: .72rem; letter-spacing: .07em; }
  .stepper span { font-size: .82rem; }

  /* Listes de liens du pied de page : navigation à part entière, donc
     cible confortable plutôt qu'une ligne de texte de 16 px. */
  .ftr li { margin-bottom: 0; }
  .ftr li > a {
    display: block; padding-block: 9px; font-size: .93rem;
  }

  /* Téléphone et e-mail : les deux liens qui déclenchent réellement un
     contact. Ils méritent la cible la plus généreuse du site. */
  .ftr-about a,
  .aside-card a[href^="tel:"],
  .aside-card a[href^="mailto:"],
  .ftr-about a[href^="tel:"],
  .ftr-about a[href^="mailto:"] {
    display: inline-block; padding-block: 6px; font-weight: 600;
  }

  /* Fil d'Ariane : petit, mais c'est un chemin de retour qu'on utilise. */
  .crumbs li { min-height: 26px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 26px; }

  /* Nuage de mots-clés et listes de villes : beaucoup de liens serrés, dont
     les soixante villes du pied de page — la porte d'entrée du maillage local. */
  .kw-block a,
  .link-list a,
  .ftr-cities a { display: inline-block; padding-block: 5px; }

  /* Mentions légales et plan du site : peu cliqués, mais un visiteur qui les
     cherche a une raison de le faire — souvent vérifier à qui il a affaire. */
  .ftr-bot nav a { display: inline-block; padding-block: 6px; }
}


/* ---------- 31. Tarif de lancement ----------
   Pas de prix barré : le montant affiché est celui qu'on paie réellement.
   Ce qu'on met en valeur, c'est la hausse annoncée — un fait vérifiable et
   daté, là où un prix barré jamais pratiqué serait une réduction fictive. */
.disc-banner {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  justify-content: center; text-align: center;
  max-width: 900px; margin: 0 auto 26px; padding: 16px 22px;
  background: var(--signal-100); border: 1.5px solid var(--signal);
  border-radius: var(--r-lg);
}
.disc-banner b { font-size: 1.06rem; color: var(--signal-600); }
.disc-banner span { font-size: .93rem; color: var(--tx-2); }
.disc-banner strong { color: var(--tx); }

/* Mention du tarif de lancement et de la hausse datée, sous le prix. */
.plan-note-launch b { color: var(--signal-600); }


/* ---------- 32. Zone d'intervention du partenaire ----------
   Les cases des départements limitrophes se désactivent une fois la limite
   de la formule atteinte. Un choix grisé se comprend immédiatement, là où un
   message d'erreur après validation oblige à revenir en arrière. */
.opt.opt-off { opacity: .45; cursor: not-allowed; }
.opt.opt-off .opt-txt { text-decoration: line-through; }
#dept-voisins-list { margin-top: 4px; }
#dept-count { font-weight: 600; color: var(--pro-600); }


/* ---------- 33. Label de niveau de partenariat ----------
   Le label est ce que le partenaire affichera sur sa devanture : il mérite
   d'être identifiable sur la carte tarifaire, sans venir concurrencer le nom
   de la formule ni le prix. */
.plan-tier {
  display: inline-block; margin-bottom: 10px;
  padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--paper-3); border: 1px solid var(--line-2);
  font-size: .74rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tx-2);
}
.plan-featured .plan-tier { background: var(--pro-100); border-color: var(--pro); color: var(--pro-600); }
.plan-free .plan-tier { background: var(--signal-100); border-color: var(--signal); color: var(--signal-600); }


/* ---------- 34. Fabrication locale ----------
   Trois registres dans un même bloc, et il faut qu'ils se distinguent au
   premier coup d'œil : le tableau du transport évité (ce qu'on gagne),
   l'effet d'échelle multi-sites (pourquoi c'est décisif en national) et
   l'arbitrage honnête (quand la centralisation reste meilleure). Ce dernier
   est volontairement traité en gris neutre plutôt qu'en couleur d'accent :
   c'est un contrepoint, pas un argument de vente. */
.local-table { margin-top: clamp(30px, 4vw, 46px); }
.local-table h3 { font-size: clamp(1.05rem, 2vw, 1.3rem); margin: 0 0 16px; }
.local-note { margin: 12px 0 0; font-size: .86rem; color: var(--tx-3); line-height: 1.6; }

.local-scale {
  margin-top: clamp(30px, 4vw, 46px);
  padding: clamp(24px, 3.4vw, 38px);
  border-radius: var(--r-lg);
  background: var(--ink-900); color: var(--tx-inv);
}
.local-scale h3 { margin: 0 0 12px; font-size: clamp(1.1rem, 2.2vw, 1.42rem); color: #fff; }
.local-scale p { margin: 0 0 18px; color: var(--tx-inv-2); }
.local-scale .checks { margin: 0; }
.local-scale .checks li { color: var(--tx-inv-2); }

.local-fair {
  margin-top: clamp(30px, 4vw, 46px);
  padding: clamp(24px, 3.4vw, 34px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper-2);
}
.local-fair h3 { margin: 0 0 12px; font-size: clamp(1.02rem, 2vw, 1.24rem); }
.local-fair p { margin: 0 0 20px; color: var(--tx-2); font-size: .95rem; }

.local-arb { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.local-arb li {
  display: grid; grid-template-columns: minmax(min(260px, 100%), 1fr) minmax(min(220px, 100%), .9fr);
  gap: 6px 22px; margin: 0; padding: 13px 18px; background: #fff;
}
.local-arb b { font-size: .93rem; font-weight: 600; }
.local-arb span { font-size: .89rem; color: var(--tx-2); }
@media (max-width: 700px) { .local-arb li { grid-template-columns: 1fr; } }

/* Version courte, posée dans le fil d'une page déjà dense. */
.local-short {
  margin: 1.9em 0; padding: 20px 24px;
  border-left: 3px solid var(--pro); border-radius: 0 var(--r) var(--r) 0;
  background: var(--pro-100);
}
.local-short b { display: block; margin-bottom: 6px; font-size: 1rem; color: var(--pro-700); }
.local-short p { margin: 0; font-size: .93rem; color: var(--tx-2); line-height: 1.65; }


/* ---------- 35. Console d'orientation (page interne) ----------
   Outil, pas document : on privilégie la densité et la lecture en diagonale
   à l'aération éditoriale du reste du site. Deux colonnes qui se replient à
   une, des blocs qui se lisent comme des fiches, et le résultat le plus
   pertinent visuellement détaché du reste — c'est celui qu'on va cliquer
   neuf fois sur dix. */
.c-head { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-end; justify-content: space-between; }
.c-stats { display: flex; gap: 28px; }
.c-stats div { text-align: right; }
.c-stats b { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--pro-700); font-variant-numeric: tabular-nums; }
.c-stats span { font-size: .78rem; color: var(--tx-3); }

.c-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 30px); align-items: start; }
@media (max-width: 900px) { .c-grid { grid-template-columns: 1fr; } }

.c-panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(18px, 2.4vw, 28px);
}
.c-panel h2 { font-size: 1.12rem; margin: 0 0 18px; }
.c-panel hr { margin: 24px 0; }

.c-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 2px 14px; }
.c-cases label { display: flex; align-items: center; gap: 7px; font-size: .88rem; padding: 4px 0; cursor: pointer; }
.c-cases input { accent-color: var(--pro-600); width: 15px; height: 15px; }

.c-zone { font-weight: 700; margin: 0 0 10px; }
.c-compte { font-size: .85rem; color: var(--tx-3); margin: 0 0 14px; }
.c-vide, .c-vide2 { font-size: .92rem; color: var(--tx-2); line-height: 1.6; }
.c-vide { background: var(--signal-100); border-left: 3px solid var(--signal); padding: 16px 18px; border-radius: 0 var(--r) var(--r) 0; }
.c-vide b { display: block; margin-bottom: 4px; color: var(--tx); }
.c-alerte { background: var(--flag-bg, var(--signal-100)); border-left: 3px solid var(--signal); padding: 12px 16px; border-radius: 0 var(--r) var(--r) 0; font-size: .88rem; margin-bottom: 14px; }
.c-msg { font-size: .86rem; color: var(--pro-700); margin-left: 12px; }

/* Une proposition de partenaire */
.res { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px; }
.res-top { border-color: var(--pro); box-shadow: inset 3px 0 0 var(--pro); }
.res-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.res-h b { font-size: 1rem; }
.res-tag {
  font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  background: var(--paper-3); color: var(--tx-2); padding: 3px 9px; border-radius: var(--r-pill);
}
.res-top .res-tag { background: var(--pro-100); color: var(--pro-700); }
.res-tour { background: transparent; border: 1px solid var(--line-2); }
.res-meta { font-size: .86rem; color: var(--tx-2); margin: 6px 0 0; }
.res-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Fiche du fichier partenaires */
.c-fiche {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--rule-soft, var(--paper-3));
}
.c-fiche small { color: var(--tx-3); }
.c-fiche.off { opacity: .5; }


/* ---------- 36. Confort tactile : cibles trop petites au doigt ----------
   Relevé sur 36 pages × 13 largeurs : trois familles d'éléments passaient
   sous les 24 px de haut recommandés par le critère WCAG 2.5.8. Les liens
   en ligne dans une phrase en sont explicitement exemptés — on ne touche
   donc pas au corps de texte, seulement à ce qui se comporte comme un
   bouton ou un élément de navigation. */

/* Sommaire d'article : une liste de navigation, pas de la prose. Ses liens
   se pointent au doigt, ils doivent donc respirer verticalement. */
.toc a { display: inline-block; padding: 5px 0; }

/* Lien du bandeau de lancement : formellement en ligne dans une phrase,
   donc exempté — mais c'est un appel à l'action, et 16 px de haut sur un
   téléphone se rate une fois sur trois. */
.launch-strip a { display: inline-block; padding: 4px 0; }

/* Cases à cocher de la console. Le libellé est cliquable et constitue la
   vraie cible, mais 15 px de case sur un écran tenu à une main est
   inconfortable même quand le doigt tombe à côté et que ça fonctionne. */
.c-cases label { min-height: 28px; }
.c-cases input { width: 18px; height: 18px; flex: 0 0 auto; }

/* Lien seul dans son paragraphe : il n'est pas « dans une phrase », il se
   comporte comme un bouton discret en fin de section. L'exemption ne
   s'applique donc pas, et six pixels suffisent à le rendre confortable. */
.prose p > a:only-child { display: inline-block; padding: 3px 0; }

/* Liens en cellule de tableau — crédits photographiques surtout, qui en
   aligne près de huit cents vers les auteurs et les licences. Ce sont des
   liens de référence, cliqués au doigt comme les autres. La règle vise
   toutes les cellules : sur les grilles tarifaires, qui n'en contiennent
   pas, elle n'a aucun effet. Le `min-width` couvre les pseudonymes de deux
   caractères, qui satisfaisaient la hauteur mais pas la largeur. */
td > a { display: inline-block; padding: 4px 0; min-width: 24px; }

/* =========================================================================
   37 · Argumentaire d'adhésion et maillage de la matrice
   -------------------------------------------------------------------------
   Deux familles arrivées ensemble : les blocs de la page « Pourquoi
   adhérer » et les listes de maillage qui relient les pages de tête à la
   matrice métier x ville.
   ========================================================================= */

/* Les deux sens du réseau. La carte « latéral » est teintée pro parce que
   c'est l'espace partenaire ; la carte « descendant » reste signal, comme
   tout ce qui concerne le client final. */
.sens-card { border-top: 3px solid var(--signal); }
.sens-card:nth-child(2) { border-top-color: var(--pro); }
.sens-fleche {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; margin-bottom: 14px;
  background: var(--signal-100); color: var(--signal-600);
  font-size: 1.35rem; line-height: 1; font-weight: 700;
}
.sens-card:nth-child(2) .sens-fleche { background: var(--pro-100); color: var(--pro-700); }
.sens-contre {
  margin-top: 1em !important; padding-top: .9em;
  border-top: 1px dashed var(--line);
  font-size: .88rem !important; color: var(--tx-3) !important; font-style: italic;
}

/* Une note qui porte la conclusion du bloc, donc plus appuyée que .note. */
.note-fort {
  border-left-width: 4px; background: var(--paper-2);
  border-left-color: var(--ink-900, var(--tx));
}
.note-fort p { color: var(--tx); font-size: 1.02rem; font-weight: 500; }

/* Tableau de calcul : deux colonnes, la dernière ligne conclut. */
.table-calcul { width: 100%; }
.table-calcul th { text-align: left; font-weight: 400; color: var(--tx-2); }
.table-calcul td { text-align: right; font-weight: 600; white-space: nowrap; }
.table-calcul .ligne-fin th,
.table-calcul .ligne-fin td {
  border-top: 2px solid var(--tx); color: var(--signal-600); font-weight: 700;
}

/* La colonne du réseau dans le comparatif : elle doit se distinguer sans
   crier, le tableau devant rester lisible comme un tableau. */
.col-nous { background: var(--pro-100); color: var(--pro-700); font-weight: 600; }

/* Étapes numérotées. */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.etapes li { display: flex; gap: 18px; align-items: flex-start; }
.etapes h3 { font-size: 1.05rem; margin: 0 0 .3em; }
.etapes p { color: var(--tx-2); font-size: .95rem; margin: 0; }
.etape-n {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pro); color: #fff; font-weight: 700; font-size: 1.05rem;
}

/* Variante compacte des listes à coches, pour les encarts latéraux. */
.checks-sm li { font-size: .88rem; margin-bottom: .45em; }

/* Maillage : les villes d'un métier, groupées par région. Colonnes typo
   plutôt que grille, pour que des listes de longueurs très inégales ne
   laissent pas de trous. */
.ville-cols { columns: 4; column-gap: 34px; }
.ville-col { break-inside: avoid; margin-bottom: 26px; display: inline-block; width: 100%; }
.ville-col h3 {
  font-size: .78rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--tx-3); margin: 0 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.ville-col ul { list-style: none; margin: 0; padding: 0; }
.ville-col li { font-size: .9rem; margin-bottom: .1em; }
.ville-col a { color: var(--tx-2); text-decoration: none; display: inline-block; padding: 4px 0; }
.ville-col a:hover { color: var(--signal-600); text-decoration: underline; }
.ville-dept { color: var(--tx-3); font-size: .8rem; }

@media (max-width: 1080px) { .ville-cols { columns: 3; } }
@media (max-width: 780px)  { .ville-cols { columns: 2; column-gap: 22px; } }
@media (max-width: 480px)  { .ville-cols { columns: 1; } }

/* =========================================================================
   38 · Hero de l'accueil en deux colonnes
   -------------------------------------------------------------------------
   Le hero tenait dans une colonne de 780 px avec un `max-width: 17ch` sur le
   titre : à 1440 px, le H1 tombait sur cinq lignes très courtes et la moitié
   droite de l'écran restait vide. En mobile, la conséquence était pire —
   titre sur six lignes, chapeau sur neuf, et le bouton principal repoussé
   sous la barre d'action fixe.

   Deux colonnes au-dessus de 1024 px : l'argument à gauche, le déroulé à
   droite. En dessous, la carte passe sous le texte et le hero redevient une
   colonne unique.
   ========================================================================= */
.hero-home .hero-in { max-width: none; }
.hero-split {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 4vw, 60px); align-items: start;
}
.hero-home h1 { max-width: 20ch; }
.hero-home .lead { max-width: 54ch; }

.hero-card {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-lg); padding: 26px 28px 24px; backdrop-filter: blur(10px);
}
.hero-card h2 {
  font-size: .78rem !important; letter-spacing: .13em; text-transform: uppercase;
  color: var(--tx-inv-3); margin: 0 0 18px !important;
}
.hero-steps { list-style: none; margin: 0; padding: 0; counter-reset: hs; }
.hero-steps li {
  position: relative; padding-left: 38px; margin-bottom: 16px; counter-increment: hs;
}
.hero-steps li::before {
  content: counter(hs); position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--signal); color: #fff; font-size: .82rem; font-weight: 800;
}
.hero-steps b { display: block; color: #fff; font-size: .98rem; }
.hero-steps span { display: block; color: var(--tx-inv-3); font-size: .88rem; line-height: 1.55; }
.hero-card-note {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .85rem; line-height: 1.6; color: var(--tx-inv-3);
}

@media (max-width: 1024px) {
  .hero-split { grid-template-columns: 1fr; gap: 30px; }
  .hero-home h1 { max-width: 24ch; }
}
/* En mobile, le déroulé en trois temps ferait reculer d'autant le bouton
   principal, déjà juste au-dessus de la barre d'action fixe. Il est repris
   plus bas dans la page, où il a la place de se lire. */
@media (max-width: 680px) { .hero-card { display: none; } }

/* Sur les écrans les plus étroits (320 px), le bouton principal du hero
   arrivait exactement au ras de la barre d'action fixe : il n'était pas
   recouvert, mais il la touchait, ce qui se lit comme un défaut. On récupère
   la vingtaine de pixels manquants sur les marges du hero, qui sont
   surdimensionnées à cette largeur. */
@media (max-width: 360px) {
  .hero { padding-block: 42px 56px; }
  .hero-badge { margin-bottom: 18px; }
  .hero .btns { margin-top: 26px; }
}

/* =========================================================================
   39 · Secteur approfondi : couches réglementaires et lexique
   -------------------------------------------------------------------------
   Une couche réglementaire se lit en trois temps : la règle, sa
   conséquence pratique, la source. La hiérarchie typographique doit rendre
   ces trois temps distincts sans que le bloc devienne un formulaire.
   ========================================================================= */
.couches { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.couche {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 28px 22px;
  border-top: 3px solid var(--signal);
}
.couche h3 { font-size: 1.06rem; margin: 0 0 .7em; line-height: 1.35; }
.couche p { color: var(--tx-2); font-size: .94rem; line-height: 1.65; margin: 0 0 1em; }
.couche strong { color: var(--tx); }

/* La conséquence pratique — c'est elle qui déclenche l'appel, donc elle
   se détache du corps de la règle. */
.couche-cle {
  background: var(--paper-2); border-left: 3px solid var(--amber);
  padding: 14px 16px; border-radius: 0 var(--r) var(--r) 0;
  margin-bottom: 1em !important;
}

.couche-src { font-size: .82rem !important; color: var(--tx-3) !important; margin: 0 !important; }
.couche-src a { color: var(--tx-3); }
.couche-src a:hover { color: var(--signal-600); }

/* Lexique en deux colonnes : terme à gauche, définition à droite. */
.lexique { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr)); margin: 0; }
.lexique > div {
  display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 18px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.lexique dt { font-weight: 700; color: var(--tx); font-size: .94rem; }
.lexique dd { margin: 0; color: var(--tx-2); font-size: .91rem; line-height: 1.6; }

@media (max-width: 560px) {
  .lexique > div { grid-template-columns: 1fr; gap: 4px; }
  .couche { padding: 22px 20px 18px; }
}

/* Liens légaux du pied de page : ils mesuraient 23 px de haut, soit un
   pixel sous le seuil de 24 px du critère 2.5.8. Défaut ancien, relevé en
   auditant les pages secteur — la correction vaut pour tout le site. */
.ftr-bot nav a { display: inline-block; padding-block: 4px; }

/* Galerie documentaire des pages secteur : la légende porte l'information,
   la photographie n'est que la preuve. Elle doit donc se lire comme du
   texte courant, pas comme une vignette de portfolio. */
.gal-doc {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.gal-doc figure { margin: 0; }
.gal-doc img {
  width: 100%; height: 230px; object-fit: cover;
  border-radius: var(--r-lg); background: var(--paper-3); display: block;
}
.gal-doc figcaption {
  margin-top: 12px; font-size: .89rem; line-height: 1.6; color: var(--tx-2);
}
.gal-doc figcaption strong { color: var(--tx); }
@media (max-width: 560px) { .gal-doc img { height: 200px; } }

/* =========================================================================
   40 · Routage réglementaire par famille d'obligation
   -------------------------------------------------------------------------
   Le regroupement par nature d'obligation est le contenu, pas la mise en
   page : un lecteur qui voit son métier sous « l'affichage extérieur des
   prix est obligatoire » a appris quelque chose avant d'avoir cliqué. Le
   titre de famille doit donc se lire comme une affirmation, pas comme une
   étiquette de rangement.
   ========================================================================= */
.fam { margin-bottom: 40px; }
.fam:last-of-type { margin-bottom: 0; }
.fam > h3 {
  font-size: 1.02rem; margin: 0 0 16px; padding-bottom: 10px;
  border-bottom: 2px solid var(--signal); display: inline-block;
}
.fam-card h4 { font-size: 1rem; margin: 0 0 .4em; }
.fam-card p { font-size: .9rem; color: var(--tx-2); margin: 0; line-height: 1.6; }

/* =========================================================================
   41 · Glossaire : index alphabétique et renvois de contexte
   -------------------------------------------------------------------------
   À cent trente-quatre termes, la liste continue n'est plus consultable.
   L'index de lettres est la navigation attendue d'un ouvrage de référence ;
   il doit rester atteignable au pouce, d'où des cibles largement au-dessus
   du seuil de 24 px.
   ========================================================================= */
.glo-index {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 36px;
  padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.glo-index a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); color: var(--tx-2);
  font-weight: 700; font-size: .9rem; text-decoration: none; transition: .15s;
}
.glo-index a:hover { background: var(--ink-900, var(--tx)); color: #fff; border-color: transparent; }

.glo-groupe { margin-bottom: 34px; scroll-margin-top: 90px; }
.glo-groupe > h2 {
  font-size: 1.5rem !important; color: var(--signal-600);
  margin: 0 0 14px !important; padding-bottom: 8px;
  border-bottom: 2px solid var(--signal-100);
}

/* Renvoi vers le ou les secteurs où le terme prend son sens. */
.glo-sec {
  margin: .9em 0 0 !important; padding-top: .8em;
  border-top: 1px dashed var(--line);
  font-size: .85rem !important; color: var(--tx-3) !important;
}
.glo-sec a { color: var(--tx-2); }
.glo-sec a:hover { color: var(--signal-600); }

/* Renvoi du lexique de secteur vers le glossaire complet : la boucle se
   referme dans les deux sens, chaque entrée du glossaire renvoyant déjà
   vers le secteur où le terme prend son sens. */
.lexique-plus {
  margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: .92rem; color: var(--tx-2);
}

/* Sommaire de la page tarifs : deux entrées, par technique et par secteur,
   parce que le lecteur arrive avec l'une ou l'autre en tête. */
.toc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 22px; }
.toc-cols h3 {
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tx-3); margin: 0 0 8px;
}
.toc-cols ul { list-style: none; margin: 0; padding: 0; columns: 1; }
.toc-cols li { font-size: .9rem; margin-bottom: .1em; }
.budget-lien { font-size: .88rem; margin: -.8em 0 2em; }

/* =========================================================================
   42 · Le droit applicable par commune (pages villes)
   -------------------------------------------------------------------------
   Trois colonnes : le dispositif, le verdict, le texte. Le verdict est la
   seule information que le lecteur cherche vraiment, d'où la pastille.
   Contrastes vérifiés : #B3261E sur #FDECEA = 5,72:1 ; #087167 sur
   #E2F5F3 = 5,21:1. Tous deux au-dessus de 4,5:1.
   ========================================================================= */
.table-droit { width: 100%; border-collapse: collapse; }
.table-droit th[scope="row"] { width: 26%; min-width: 190px; }
.table-droit th:nth-child(2),
.table-droit td:nth-child(2) { width: 15%; min-width: 132px; }
.table-droit td:nth-child(2) { white-space: nowrap; }
.table-droit td:last-child { font-size: .93rem; line-height: 1.62; }

.verdict {
  display: inline-block; padding: 4px 12px; border-radius: var(--r-pill);
  font-size: .8rem; font-weight: 700; letter-spacing: .02em;
}
.verdict-interdite { background: #FDECEA; color: #B3261E; }
.verdict-autorisee { background: var(--pro-100); color: var(--pro-700); }

.src {
  display: block; margin-top: 6px;
  font-size: .78rem; line-height: 1.5; color: var(--tx-3);
}
.note .src { margin-top: 10px; }

.note.warn { border-left: 3px solid #B3261E; background: #FDECEA; }
.note.warn p { color: #6E1610; }

/* Sur mobile, ce tableau se lit mal en défilement latéral : la colonne
   utile — le texte de loi — sort de l'écran. On l'empile donc en fiches,
   une par dispositif, avec le verdict en tête. */
@media (max-width: 720px) {
  .table-wrap:has(.table-droit) { overflow-x: visible; border: 0; border-radius: 0; }
  .table-droit,
  .table-droit tbody,
  .table-droit tr,
  .table-droit th,
  .table-droit td { display: block; width: auto; min-width: 0; }
  .table-droit thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-droit tr {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 18px 18px 16px; margin-bottom: 14px; box-shadow: var(--sh-1);
  }
  .table-droit tr:last-child { margin-bottom: 0; }
  .table-droit th[scope="row"] {
    background: none; padding: 0; border: 0;
    font-size: 1rem; line-height: 1.35; letter-spacing: 0;
  }
  .table-droit td { padding: 0; border: 0; }
  .table-droit td:nth-child(2) { margin: 10px 0 12px; }
  .table-droit td:last-child { font-size: .9rem; }
}

/* Rappel de strate + réserves, sous le tableau du droit applicable. */
.split-droit { margin-top: 34px; }
.split-droit .prose h3 { margin-top: 0; }
.split-droit .aside-card p { font-size: .92rem; line-height: 1.6; }
.split-droit .aside-card p + p { margin-top: .8em; }

/* Verdict intermédiaire : ni permis ni interdit, mais soumis à autorisation. */
.verdict-attention { background: var(--amber-100, #FFF4DC); color: #7A4E00; }

/* =========================================================================
   43 · Rubrique « Poser » — fiches de geste métier
   -------------------------------------------------------------------------
   Deux registres de liste cohabitent sur ces pages et ne doivent pas se
   confondre : les erreurs (ambre, on peut encore corriger) et la sécurité
   (rouge, on ne négocie pas). La couleur porte l'information.
   Contrastes vérifiés : #7A4E00 sur #FFF4DC = 6,59:1 ; #8F1D16 sur
   #FDECEA = 7,80:1.
   ========================================================================= */
.pose-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tag-plein { background: var(--ink-900); color: var(--tx-inv); border-color: transparent; }

.pose-bloc { margin-bottom: 40px; }
.pose-bloc > h2 {
  font-size: 1.35rem; margin: 0 0 14px;
  padding-bottom: 10px; border-bottom: 2px solid var(--line);
}
.pose-bloc:last-child { margin-bottom: 0; }

.pose-video { margin: 0 0 36px; }
.pose-video video { width: 100%; height: auto; border-radius: var(--r-lg); display: block; }
.pose-video-vide {
  background: var(--paper-2); border: 1px dashed var(--line-2);
  border-radius: var(--r-lg); padding: 22px 24px;
}
.pose-video-vide p { margin: 0; color: var(--tx-2); font-size: .95rem; }

.checks-warn li::marker, .checks-danger li::marker { content: ""; }
.checks-warn li, .checks-danger li {
  position: relative; padding-left: 30px; list-style: none; margin-bottom: .6em;
}
.checks-warn li::before, .checks-danger li::before {
  position: absolute; left: 0; top: 0; font-weight: 700; font-size: .95rem;
}
.checks-warn { padding-left: 0; }
.checks-warn li::before { content: "✕"; color: #7A4E00; }
.checks-danger { padding-left: 0; }
.checks-danger li::before { content: "!"; color: #8F1D16; }

.pose-secu { background: #FDECEA; border-radius: var(--r-lg); padding: 24px 26px; }
.pose-secu > h2 { color: #8F1D16; border-bottom-color: rgba(143, 29, 22, .25); }
.pose-secu .note.warn { margin-bottom: 0; background: #fff; }

.pose-meta { font-size: .82rem; color: var(--tx-3); margin: 10px 0 0; }
.pose-ok { color: var(--pro-700); font-weight: 600; }
.pose-att { color: #7A4E00; font-weight: 600; }
.pose-card .card-body h3 { font-size: 1.02rem; line-height: 1.3; }
.pose-dispo { border-left: 3px solid var(--pro); }

@media (max-width: 720px) {
  .pose-secu { padding: 20px; }
  .pose-bloc > h2 { font-size: 1.2rem; }
}

/* =========================================================================
   44 · Retours du lecteur sur une fiche de pose
   -------------------------------------------------------------------------
   Volontairement discret : ce bloc arrive après la FAQ, il ne doit pas
   concurrencer le contenu. Aucun compteur n'est affiché — c'est un choix,
   pas un oubli : sur un site jeune, « 2 personnes intéressées » dessert.
   ========================================================================= */
.pose-retour {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 28px;
}
.pose-retour h2 { border: 0; padding: 0; font-size: 1.15rem; margin-bottom: 8px; }
.pose-retour p { font-size: .95rem; color: var(--tx-2); }
.retour-video > .btn { margin-top: 14px; }

.retour-merci {
  margin: 12px 0 0;
  color: var(--pro-700);
  font-weight: 600;
  font-size: .93rem;
}

.retour-corr { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 20px; }
.retour-corr > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .97rem;
  color: var(--tx);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
}
.retour-corr > summary::-webkit-details-marker { display: none; }
.retour-corr > summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px; flex: none;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-weight: 700;
  color: var(--tx-3);
}
.retour-corr[open] > summary::before { content: "−"; }
.retour-corr > summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.retour-corr form { margin-top: 16px; display: grid; gap: 6px; max-width: 100%; }
.retour-corr label { font-size: .88rem; font-weight: 600; color: var(--tx-2); margin-top: 8px; }
/* « retour-opt » et non « opt » : cette dernière existe déjà sur le site
   pour les cartes d'option des formulaires partenaires, et elle rendait
   le mot « facultatif » sous forme de boîte encadrée. */
.retour-corr label .retour-opt { font-weight: 400; color: var(--tx-3); }
.retour-corr textarea,
.retour-corr input[type="text"] {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: #fff;
  color: var(--tx);
}
.retour-corr textarea { resize: vertical; min-height: 96px; }
.retour-corr textarea:focus,
.retour-corr input[type="text"]:focus {
  outline: 2px solid var(--signal);
  outline-offset: 1px;
  border-color: transparent;
}
.retour-corr .btn { margin-top: 14px; justify-self: start; }

/* Piège à robots : hors écran, mais jamais display:none — certains
   remplisseurs automatiques ignorent les champs masqués de cette façon. */
.piege {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}

@media (max-width: 720px) {
  .pose-retour { padding: 22px 20px; }
  .retour-corr .btn { justify-self: stretch; text-align: center; }
}