/* construction-maison-en-bois.fr */

:root {
  --ink: #14201b;
  --ink-soft: #4d5c54;
  --ink-mute: #75847b;
  --paper: #f4f6f2;
  --surface: #ffffff;
  --forest: #17513c;
  --forest-deep: #0d3325;
  --moss: #2f7d5b;
  --sand: #e6ddcd;
  --sand-deep: #c9b895;
  --amber: #a96b18;
  --line: #dde2da;
  --line-soft: #eceee9;
  --radius: 4px;
  --radius-lg: 10px;
  --shadow: 0 1px 2px rgba(20, 32, 27, .06), 0 8px 24px -12px rgba(20, 32, 27, .18);
  --shadow-lift: 0 2px 6px rgba(20, 32, 27, .07), 0 18px 40px -18px rgba(20, 32, 27, .26);
  --wrap: 1160px;
  --gut: 22px;
  --font-d: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-b: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
}

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

html {
  overflow-x: hidden;          /* clippe le menu off-canvas (body ne clippe pas un descendant fixed) */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.68 var(--font-b);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--forest); text-underline-offset: 3px; }
a:hover { color: var(--moss); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3, h4 { font-family: var(--font-d); font-weight: 700; line-height: 1.14; letter-spacing: -.018em; margin: 0 0 .5em; }
h1 { font-size: clamp(1.95rem, 1.35rem + 2.4vw, 3.05rem); }
h2 { font-size: clamp(1.42rem, 1.12rem + 1.2vw, 1.95rem); margin-top: 2.1em; }
h3 { font-size: clamp(1.12rem, 1rem + .5vw, 1.32rem); margin-top: 1.7em; }
p { margin: 0 0 1.05em; }

/* ---------- structure ---------- */
.tly-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.tly-band { padding-block: clamp(38px, 6vw, 72px); }
.tly-band--paper { background: var(--paper); }
.tly-band--white { background: var(--surface); }
.tly-band--forest { background: var(--forest-deep); color: #e8f0ea; }
.tly-band--forest h2, .tly-band--forest h3 { color: #fff; }
.tly-band--sand { background: linear-gradient(180deg, #f7f3ea 0%, #f1ece0 100%); }

.tly-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--forest); color: #fff; padding: 12px 18px;
}
.tly-skip:focus { left: 8px; top: 8px; }

/* ---------- en-tête ---------- */
.tly-top {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 60;
}
.tly-top__in { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.tly-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: 0 0 auto; }
.tly-logo__mark { width: 34px; height: 34px; flex: 0 0 34px; }
.tly-logo__txt { font-family: var(--font-d); font-weight: 700; font-size: 1.02rem; line-height: 1.08; letter-spacing: -.02em; }
.tly-logo__txt span { display: block; font-family: var(--font-b); font-weight: 400; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }

.tly-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.tly-nav a {
  text-decoration: none; color: var(--ink-soft); font-size: .93rem; font-weight: 500;
  padding: 9px 12px; border-radius: var(--radius); white-space: nowrap;
}
.tly-nav a:hover { color: var(--forest); background: var(--line-soft); }
.tly-nav .tly-nav__cta {
  background: var(--forest); color: #fff; padding: 10px 17px; margin-left: 8px; font-weight: 600;
}
.tly-nav .tly-nav__cta:hover { background: var(--moss); color: #fff; }

.tly-burger {
  display: none; margin-left: auto; width: 44px; height: 40px; padding: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.tly-burger span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px auto; }

/* ---------- accroche ---------- */
.tly-lede { padding-block: clamp(26px, 3.6vw, 44px) 8px; }
.tly-crumb { font-size: .82rem; color: var(--ink-mute); margin-bottom: 14px; }
.tly-crumb a { color: var(--ink-mute); text-decoration: none; }
.tly-crumb a:hover { color: var(--forest); text-decoration: underline; }
.tly-crumb span { padding: 0 6px; color: var(--sand-deep); }

.tly-answer {
  font-size: 1.06rem; color: var(--ink-soft); max-width: 66ch;
  border-left: 3px solid var(--sand-deep); padding-left: 18px; margin-bottom: 22px;
}
.tly-answer strong { color: var(--ink); font-weight: 600; }

.tly-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; padding: 0; list-style: none; }
.tly-chips li {
  font-size: .82rem; color: var(--forest); background: #eaf2ed;
  border: 1px solid #d3e4d9; border-radius: 999px; padding: 5px 13px;
}

/* ---------- grille contenu / formulaire ---------- */
/* L'ordre du DOM est head > lede > body > quote : le texte est lu avant le formulaire.
   Les zones de grille le repositionnent visuellement, sans dupliquer ni masquer quoi que ce soit.
   Sur mobile, le formulaire remonte juste sous le H1 pour rester au-dessus de la ligne de
   flottaison, l'accroche passant en dessous. */
.tly-shell {
  display: grid; gap: 30px 40px; align-items: start;
  grid-template-columns: minmax(0, 1fr) 384px;
  grid-template-areas: "head quote" "lede quote" "body quote";
  padding-bottom: clamp(38px, 6vw, 68px);
}
.tly-shell__head { grid-area: head; min-width: 0; }
.tly-shell__lede { grid-area: lede; min-width: 0; }
.tly-shell__body { grid-area: body; min-width: 0; }
.tly-shell__rail { grid-area: quote; min-width: 0; position: sticky; top: 88px; }
.tly-shell__head + .tly-shell__lede { margin-top: -14px; }

@media (max-width: 900px) {
  .tly-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "quote" "lede" "body";
    gap: 24px;
  }
  .tly-shell__rail { position: static; }
  .tly-shell__head + .tly-shell__lede { margin-top: 0; }
}

/* ---------- carte devis ---------- */
.tly-quote {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift); overflow: hidden;
}
.tly-quote__head { background: var(--forest-deep); color: #fff; padding: 18px 22px 16px; }
.tly-quote__head strong { display: block; font-family: var(--font-d); font-size: 1.14rem; letter-spacing: -.015em; }
.tly-quote__head span { display: block; font-size: .86rem; color: #b8d2c3; margin-top: 3px; }
/* Fond porté par le corps lui-même : sur le fond du seul `.tly-quote`, le blanc ne
   couvrait pas le bas de la carte et le texte légal se retrouvait sur la photo du hero. */
.tly-quote__body { padding: 20px 22px 24px; background: var(--surface); }

.tly-field { margin-bottom: 14px; }
.tly-field > label, .tly-legend {
  display: block; font-size: .82rem; font-weight: 600; color: var(--ink-soft);
  margin-bottom: 5px; letter-spacing: .01em;
}
.tly-input, .tly-select, .tly-textarea {
  width: 100%; font: inherit; font-size: .96rem; color: var(--ink);
  background: #fbfcfa; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 12px; -webkit-appearance: none; appearance: none;
}
.tly-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%234d5c54' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 11px; padding-right: 34px;
}
.tly-textarea { min-height: 84px; resize: vertical; }
.tly-input:focus, .tly-select:focus, .tly-textarea:focus { border-color: var(--moss); background: #fff; }
.tly-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.tly-consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 4px; font-size: .8rem; color: var(--ink-soft); line-height: 1.5; }
.tly-consent input { margin-top: 3px; flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--forest); }
.tly-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.tly-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-d); font-weight: 700; font-size: 1rem; letter-spacing: -.01em;
  background: var(--amber); color: #fff; border: 0; border-radius: var(--radius);
  padding: 14px 22px; cursor: pointer; text-decoration: none; width: 100%;
}
.tly-btn:hover { background: #8f5a12; color: #fff; }
.tly-btn--ghost { background: transparent; color: var(--forest); border: 1.5px solid var(--forest); width: auto; }
.tly-btn--ghost:hover { background: var(--forest); color: #fff; }
.tly-btn--forest { background: var(--forest); }
.tly-btn--forest:hover { background: var(--moss); }
.tly-btn--auto { width: auto; }

.tly-legal { font-size: .74rem; color: var(--ink-soft); line-height: 1.5; margin: 12px 0 0; }
.tly-submit { margin: 16px 0 0; }

}
.tly-err { background: #fdeeea; border: 1px solid #f0c5b8; color: #8a2c11; padding: 11px 13px; border-radius: var(--radius); font-size: .88rem; margin-bottom: 14px; }

/* ---------- contenu rédactionnel ---------- */
.tly-prose { max-width: 72ch; }
.tly-prose h2:first-child { margin-top: 0; }
.tly-prose ul, .tly-prose ol { padding-left: 1.15em; margin: 0 0 1.05em; }
.tly-prose li { margin-bottom: .4em; }
.tly-prose strong { font-weight: 600; }

.tly-table { overflow-x: auto; margin: 0 0 1.4em; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.tly-table table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 420px; }
.tly-table th, .tly-table td { text-align: left; padding: 11px 15px; border-bottom: 1px solid var(--line-soft); }
.tly-table thead th { background: #f2f5f0; font-family: var(--font-d); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.tly-table tbody tr:last-child td { border-bottom: 0; }
.tly-table td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

.tly-note {
  background: #f7f3ea; border: 1px solid var(--sand); border-left: 3px solid var(--sand-deep);
  border-radius: var(--radius); padding: 15px 18px; margin: 0 0 1.4em; font-size: .93rem; color: var(--ink-soft);
}
.tly-note strong { color: var(--ink); }

.tly-spin {
  border: 2px solid var(--moss); border-radius: var(--radius-lg); background: #f7f3ea;
  padding: 20px 18px; margin: 0 0 26px;
}
.tly-spin h2 { margin: 0 0 6px; font-size: 1.16rem; }
.tly-spin__lede { margin: 0 0 14px; font-size: .95rem; color: var(--ink-soft); line-height: 1.55; }
.tly-spin input, .tly-spin select, .tly-spin button { font: inherit; min-height: 44px; max-width: 100%; }

.tly-faq { margin: 0; }
.tly-faq dt { font-family: var(--font-d); font-weight: 700; font-size: 1.03rem; margin-top: 1.3em; color: var(--ink); }
.tly-faq dd { margin: .4em 0 0; color: var(--ink-soft); }

/* ---------- constructeurs ---------- */
.tly-firms { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); margin: 0 0 1.2em; padding: 0; list-style: none; }
.tly-firm { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 15px 17px; }
.tly-firm__name { font-family: var(--font-d); font-weight: 700; font-size: 1rem; line-height: 1.25; margin: 0 0 6px; }
.tly-firm__meta { font-size: .84rem; color: var(--ink-mute); line-height: 1.55; margin: 0; }
.tly-firm__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.tly-tag { font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; background: var(--line-soft); color: var(--ink-soft); }
.tly-tag--rge { background: #e6f1ea; color: var(--forest); }
.tly-firm__claim { display: inline-block; margin-top: 10px; font-size: .78rem; color: var(--ink-mute); }

/* ---------- outils interactifs ---------- */
.tly-tool { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; margin: 0 0 1.6em; }
.tly-tool__head { padding: 16px 20px 14px; border-bottom: 1px solid var(--line-soft); background: #f7f9f6; }
.tly-tool__head h3, .tly-tool__head h2 { margin: 0 0 3px; font-size: 1.12rem; }
.tly-tool__head p { margin: 0; font-size: .87rem; color: var(--ink-mute); }
.tly-tool__body { padding: 18px 20px 20px; }
.tly-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 13px; }

.tly-out { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.tly-out__big { font-family: var(--font-d); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); color: var(--forest); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tly-out__sub { font-size: .87rem; color: var(--ink-mute); margin-top: 4px; }
.tly-bars { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.tly-bars li { display: grid; grid-template-columns: minmax(96px, 34%) 1fr auto; gap: 11px; align-items: center; font-size: .88rem; }
.tly-bars b { font-weight: 500; color: var(--ink-soft); }
.tly-bars i { display: block; height: 9px; border-radius: 999px; background: var(--moss); font-style: normal; min-width: 3px; }
.tly-bars li:nth-child(2) i { background: var(--sand-deep); }
.tly-bars li:nth-child(3) i { background: var(--amber); }
.tly-bars li:nth-child(4) i { background: #7ea892; }
.tly-bars em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

/* ---------- blocs de page ---------- */
.tly-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
.tly-steps li { counter-increment: s; }
.tly-steps li::before {
  content: counter(s); display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; background: var(--forest); color: #fff;
  font-family: var(--font-d); font-weight: 700; font-size: 1.02rem; margin-bottom: 12px;
}
.tly-steps h3 { margin: 0 0 5px; font-size: 1.02rem; }
.tly-steps p { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.tly-band--forest .tly-steps li::before { background: var(--sand); color: var(--forest-deep); }
.tly-band--forest .tly-steps p { color: #bcd3c4; }

.tly-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.tly-stats b { display: block; font-family: var(--font-d); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem); color: var(--forest); line-height: 1.05; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.tly-stats span { display: block; font-size: .87rem; color: var(--ink-soft); margin-top: 4px; }
.tly-band--forest .tly-stats b { color: var(--sand); }
.tly-band--forest .tly-stats span { color: #bcd3c4; }

.tly-split2 { display: grid; gap: clamp(22px, 4vw, 46px); grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); align-items: center; }
.tly-split2 img { border-radius: var(--radius-lg); width: 100%; object-fit: cover; }
.tly-split2--rev > *:first-child { order: 2; }
@media (max-width: 700px) { .tly-split2--rev > *:first-child { order: 0; } }

.tly-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.tly-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.tly-card img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.tly-card__in { padding: 16px 18px 18px; flex: 1; }
.tly-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.tly-card p { margin: 0 0 10px; font-size: .9rem; color: var(--ink-soft); }
.tly-card__price { font-size: .86rem; color: var(--forest); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Le hero de l'accueil porte le formulaire : sans lui, la carte de devis tombe sous la ligne
   de flottaison sur un portable 1366x768. Deux colonnes sur grand écran, empilées ensuite. */
.tly-hero {
  position: relative; overflow: hidden;
  background:
    linear-gradient(rgba(13, 51, 37, .58), rgba(13, 51, 37, .58)),
    image-set(url("/assets/img/hero-maison-ossature-bois.webp") type("image/webp"),
              url("/assets/img/hero-maison-ossature-bois.jpg") type("image/jpeg"))
      center 42% / cover no-repeat,
    var(--forest-deep);
}
/* La photo est un FOND CSS, pas un <img>.
   En <img> translucide (`opacity`), le navigateur la composait dans sa propre couche et la
   repeignait par-dessus la carte de devis, qui perdait son fond blanc et rendait le texte
   légal illisible. Un background ne peut jamais passer devant un descendant. */
.tly-hero__in {
  /* z-index explicite : l'image du hero est en `opacity`, donc composée dans sa propre couche.
     Sans contexte d'empilement ici, le fond blanc de la carte de devis n'était pas peint
     sur toute sa hauteur et le texte légal se retrouvait sur la photo. */
  position: relative; z-index: 1; color: #fff;
  padding-block: clamp(16px, 2vw, 26px);
  display: grid;
  column-gap: clamp(22px, 3vw, 44px); row-gap: 14px;
  grid-template-columns: minmax(0, 1fr) 384px;
  grid-template-areas: "title rail" "pitch rail";
  /* La carte de devis s'étend sur les deux lignes : sans hauteurs explicites, sa hauteur se
     répartit entre elles et creuse un vide sous le titre. */
  grid-template-rows: auto 1fr;
  align-items: start;
}
.tly-hero__title { grid-area: title; min-width: 0; }
.tly-hero__pitch { grid-area: pitch; min-width: 0; }
.tly-hero__rail  { grid-area: rail;  min-width: 0; }
.tly-hero h1 { color: #fff; max-width: 21ch; font-size: clamp(1.65rem, 1.05rem + 1.6vw, 2.4rem); margin-bottom: .3em; }
/* Cibler `.tly-hero p` faisait fuir la couleur claire du hero dans les <p> de la carte de
   devis (texte légal illisible sur fond blanc). On reste sur le bloc d'accroche. */
.tly-hero__pitch p { color: #dbe8df; max-width: 48ch; font-size: 1.02rem; margin-bottom: 16px; }
.tly-hero .tly-chips li {
  background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .26); color: #e9f2ec;
}
.tly-hero .tly-quote { box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6); }

/* Accueil : le formulaire vit dans le hero, le corps de page passe en pleine largeur. */
.tly-shell--solo {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "lede" "body";
}

@media (max-width: 980px) {
  /* Le formulaire remonte entre le H1 et l'argumentaire : sur mobile, l'accroche et les
     pastilles de réassurance le repoussaient sous la ligne de flottaison. */
  .tly-hero__in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "rail" "pitch";
    grid-template-rows: auto auto auto;
    row-gap: 18px;
  }
  .tly-hero h1 { max-width: none; }
  .tly-hero__pitch { margin-top: 2px; }
}

/* ---------- maillage ---------- */
.tly-mesh { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 34px; }
.tly-mesh h2 { font-size: 1.06rem; margin: 0 0 11px; }
.tly-mesh + .tly-mesh { border-top: 0; padding-top: 0; margin-top: 26px; }
.tly-links { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 0 0 6px; list-style: none; }
.tly-links a {
  display: inline-block; font-size: .85rem; text-decoration: none; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
}
.tly-links a:hover { border-color: var(--moss); color: var(--forest); background: #f0f6f2; }
.tly-cols { columns: 3 190px; column-gap: 26px; }
.tly-cols a { display: block; font-size: .9rem; padding: 3px 0; text-decoration: none; color: var(--ink-soft); break-inside: avoid; }
.tly-cols a:hover { color: var(--forest); text-decoration: underline; }

/* ---------- pied ---------- */
.tly-foot { background: var(--forest-deep); color: #a9c4b4; padding-block: 44px 30px; margin-top: 8px; font-size: .9rem; }
.tly-foot__grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tly-foot h3 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 12px; font-family: var(--font-b); font-weight: 600; }
.tly-foot a { color: #a9c4b4; text-decoration: none; display: block; padding: 3px 0; }
.tly-foot a:hover { color: #fff; text-decoration: underline; }
.tly-foot__end { border-top: 1px solid rgba(255, 255, 255, .13); margin-top: 30px; padding-top: 18px; font-size: .82rem; color: #86a394; }

/* ---------- barre mobile ---------- */
.tly-sticky {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  background: var(--surface); border-top: 1px solid var(--line);
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 20px -10px rgba(20, 32, 27, .3);
}
.tly-sticky .tly-btn { padding: 12px 18px; font-size: .97rem; }

/* ---------- responsive ---------- */
/* La barre de navigation horizontale mesure ~960 px avec le logo : en dessous, elle
   débordait de la fenêtre sans qu'aucun hamburger ne prenne le relais. */
@media (max-width: 1040px) {
  .tly-burger { display: block; }
  .tly-nav {
    position: fixed; inset: 0 0 0 auto; width: min(300px, 84vw);
    background: var(--surface); border-left: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 78px 18px 24px; transform: translateX(100%);
    transition: transform .22s ease; z-index: 70; overflow-y: auto;
  }
  .tly-nav.is-open { transform: translateX(0); }
  .tly-nav a { padding: 13px 12px; font-size: 1rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .tly-nav .tly-nav__cta { margin: 14px 0 0; border-radius: var(--radius); text-align: center; border-bottom: 0; }
  .tly-scrim { position: fixed; inset: 0; background: rgba(13, 51, 37, .42); z-index: 65; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
  .tly-scrim.is-open { opacity: 1; pointer-events: auto; }
}

@media (max-width: 860px) {
  .tly-sticky { display: block; }
  body.tly-haspin { padding-bottom: 74px; }
  .tly-cols { columns: 2 150px; }
}

@media (max-width: 520px) {
  body { font-size: 16.5px; }
  .tly-duo { grid-template-columns: 1fr; }
  .tly-cols { columns: 1; }
  .tly-bars li { grid-template-columns: minmax(84px, 42%) 1fr auto; font-size: .84rem; }
  .tly-quote__body { padding: 18px 16px 20px; }
  .tly-quote__head { padding: 16px 16px 14px; }
}

@media print {
  .tly-top, .tly-sticky, .tly-quote, .tly-mesh, .tly-foot { display: none; }
}

/* <picture> ne doit pas casser les mises en page qui ciblent l'<img> */
.tly-card picture { display: block; }
.tly-split2 picture { display: block; }