/* Site klicat.com : charte du logo Klicat, cacao #502d16 et orange chat #ff8600.
   Une seule famille, Bricolage Grotesque (variable : graisse, largeur, taille optique), Cairo pour l'arabe.
   Signature : le chat du logo (lib/cat.js) qui sort des bords de section et suit le pointeur des yeux.
   Mouvements : entrée du héros, mots qui s'allument (déclaration), défilé horizontal des plateformes, lignes
   d'expertise balayées au survol. Tout est coupé avec prefers-reduced-motion, et lisible sans JavaScript.
   Propriétés logiques partout (arabe, RTL). */

@font-face { font-family: "Bricolage"; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url(/fonts/bricolage-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage"; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url(/fonts/bricolage-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/cairo-arabic.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

:root {
  --cacao: #502d16;
  --night: #24140b;
  --orange: #ff8600;
  --orange-deep: #e57700;
  --fur: #ffe7c7;
  --fur-soft: #fff5e9;
  --paper: #ffffff;
  --ink: #3a2010;
  --muted: #7a5a45;
  --line: #ecd9c2;
  --ko: #c62828;
  --hdr: 76px;
  --font: "Bricolage", "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.2, 0.9, 0.2, 1);
  --spring: cubic-bezier(0.25, 1.35, 0.4, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hdr); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--font); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; overflow-x: clip; }
html[dir="rtl"] body { font-family: "Cairo", var(--font); }
img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--cacao); text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { color: var(--orange-deep); }
h1, h2, h3 { font-family: var(--font); line-height: 1.05; margin: 0 0 0.5em; color: var(--cacao); text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); font-weight: 800; font-stretch: 85%; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3.2rem); font-weight: 800; font-stretch: 88%; letter-spacing: -0.025em; }
h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
html[dir="rtl"] :is(h1, h2, h3) { letter-spacing: 0; line-height: 1.35; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--muted); max-width: 40rem; text-wrap: pretty; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 1.2em; height: 1.2em; flex: none; vertical-align: -0.2em; }
html[dir="rtl"] .flip-rtl { transform: scaleX(-1); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(1240px, 100% - 2 * clamp(16px, 4vw, 48px)); margin-inline: auto; }
.wrap.narrow { width: min(820px, 100% - 32px); }
.skip { position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 100; background: var(--orange); color: var(--cacao); padding: 0.6rem 1rem; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 1rem; }

/* ——— Boutons : pilule, pas d'ombre ——— */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.85em 1.5em; border-radius: 999px; font: 700 1rem/1.2 var(--font); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--spring); white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-orange { background: var(--orange); color: var(--cacao); }
.btn-orange:hover { background: var(--fur); color: var(--cacao); }
.btn-ghost { border-color: rgb(255 231 199 / 45%); color: var(--fur); }
.btn-ghost:hover { border-color: var(--fur); color: var(--fur); }
.btn-cacao { background: var(--cacao); color: var(--fur); }
.btn-cacao:hover { background: var(--night); color: var(--orange); }
.btn-accent { background: #fff; color: var(--bg); }
.btn-accent:hover { background: var(--accent); color: var(--bg); }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* ——— En-tête cacao ——— */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--cacao); color: var(--fur); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--hdr); }
.brand { flex: none; display: block; }
.brand img { height: 40px; width: auto; display: block; }
.menu { display: flex; justify-content: flex-end; flex: 1; }
.menu-toggle { display: none; border: 0; background: transparent; color: var(--fur); }
.main-nav { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem; }
.nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 0.25rem; }
.nav-links a { display: block; padding: 0.5rem 0.8rem; color: var(--fur); text-decoration: none; font-weight: 600; font-size: 1rem; border-radius: 999px; transition: background 0.2s; }
.nav-links a:hover { background: rgb(255 231 199 / 10%); color: #fff; }
.nav-links a[aria-current="page"] { background: var(--fur); color: var(--cacao); }
.nav-actions { display: flex; align-items: center; gap: 0.5rem; }
.nav-actions .btn { padding: 0.6em 1.15em; }
.langs { position: relative; }
.langs > summary { list-style: none; display: flex; align-items: center; gap: 0.35rem; cursor: pointer; padding: 0.5rem 0.7rem; border-radius: 999px; font-weight: 700; font-size: 0.9rem; color: var(--fur); }
.langs > summary::-webkit-details-marker { display: none; }
.langs > summary:hover { background: rgb(255 231 199 / 10%); }
.langs ul { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); list-style: none; margin: 0; padding: 0.4rem; background: var(--fur-soft); border-radius: 14px; box-shadow: 0 20px 40px -18px rgb(36 20 11 / 55%); min-width: 11rem; z-index: 70; }
.langs ul a { display: block; padding: 0.45rem 0.75rem; border-radius: 8px; color: var(--ink); text-decoration: none; }
.langs ul a:hover { background: var(--fur); }
.langs ul a[aria-current="true"] { font-weight: 700; color: var(--orange-deep); }
@media (max-width: 900px) {
  .js .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; }
  .menu-toggle .ico { width: 26px; height: 26px; }
  .js .menu:not(.open) .main-nav { display: none; }
  .main-nav { position: absolute; inset-inline: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 1rem; padding: 1rem clamp(16px, 4vw, 48px) 1.75rem; background: var(--cacao); border-top: 1px solid rgb(255 231 199 / 15%); }
  .nav-links { flex-direction: column; }
  .nav-links a { font-size: 1.5rem; font-weight: 700; font-stretch: 88%; padding: 0.6rem 0.4rem; border-radius: 10px; }
  .nav-actions { justify-content: space-between; }
  .langs ul { inset-inline-end: auto; inset-inline-start: 0; bottom: calc(100% + 8px); top: auto; }
}

/* ——— Le chat ——— */
.cat { display: block; width: 100%; height: auto; overflow: visible; }
.cat-eye { transform-box: fill-box; transform-origin: center; transition: transform 90ms ease-in; }
.cat.blink .cat-eye { transform: scaleY(0.08); }
[data-pupil] { transform-box: fill-box; transform-origin: center; transition: transform 0.18s var(--ease-out); }
.cat-ear { transform-box: view-box; transform-origin: 370px 160px; }
.cat.twitch .cat-ear { animation: twitch 0.55s var(--ease-out); }
@keyframes twitch { 30% { transform: rotate(-9deg); } 60% { transform: rotate(4deg); } }

/* ——— Héros : cacao, le titre se déploie, le chat monte depuis le bas et se fond dans la bande orange ——— */
.hero { position: relative; overflow: hidden; background: var(--cacao); color: var(--fur); min-height: min(calc(100svh - var(--hdr)), 920px); display: flex; align-items: center; padding-block: clamp(3rem, 8vh, 6rem) clamp(4rem, 10vh, 7rem); }
.hero-grid { position: relative; z-index: 2; }
.hero-text { max-width: min(54%, 46rem); }
.hero-title { color: var(--fur); font-size: clamp(3rem, 7.6vw, 7.4rem); line-height: 0.92; font-stretch: 82%; letter-spacing: -0.035em; margin-bottom: 0.4em; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero-title .line > span { display: inline-block; animation: rise 1s var(--ease-out) both; animation-delay: calc(var(--i) * 0.14s + 0.1s); }
.hero-title .line:last-child > span { color: var(--orange); }
@keyframes rise { from { transform: translateY(108%); font-stretch: 75%; } to { transform: none; } }
.hero .lead { color: rgb(255 231 199 / 82%); max-width: 32rem; animation: fadeUp 0.8s var(--ease-out) 0.5s both; }
.hero .cta-row { animation: fadeUp 0.8s var(--ease-out) 0.65s both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } }
.hero-cat { position: absolute; z-index: 1; bottom: 0; inset-inline-end: clamp(16px, 6vw, 110px); width: clamp(240px, 36vw, 540px); }
.cat-hero { margin-bottom: -2px; animation: catRise 1.15s var(--spring) 0.4s both; }
.cat-hero .cat-eye { animation: eyesOpen 0.3s ease-out 1.4s backwards; }
@keyframes catRise { from { transform: translateY(75%); } }
@keyframes eyesOpen { from { transform: scaleY(0.08); } }
@media (max-width: 860px) {
  .hero { display: block; min-height: 0; padding-bottom: 0; }
  .hero-text { max-width: none; }
  .hero-cat { position: relative; inset: auto; width: min(72vw, 360px); margin: 2.5rem 0 0 auto; }
  html[dir="rtl"] .hero-cat { margin: 2.5rem auto 0 0; }
}

/* ——— Déclaration : bande orange, les mots s'allument au défilement ——— */
.statement { background: var(--orange); color: var(--cacao); padding-block: clamp(4rem, 14vh, 9rem); }
.statement p { font-size: clamp(1.7rem, 3.9vw, 3.4rem); line-height: 1.12; font-weight: 700; font-stretch: 88%; letter-spacing: -0.02em; max-width: 30ch; margin: 0; }
html[dir="rtl"] .statement p { line-height: 1.5; letter-spacing: 0; }
.js .statement .w { opacity: 0.22; transition: opacity 0.35s; }
.js .statement .w.on { opacity: 1; }

/* ——— Défilé des plateformes : empilé par défaut, horizontal épinglé quand site.js active .reel-on ——— */
.reel { background: var(--night); color: var(--fur); }
.reel-intro { padding: clamp(4rem, 10vh, 7rem) clamp(16px, 6vw, 96px) 3rem; }
.reel-intro h2 { color: var(--fur); font-size: clamp(2.2rem, 4.6vw, 4.2rem); max-width: 14ch; }
.reel-intro .lead { color: rgb(255 231 199 / 72%); }
.reel-hint { display: none; color: var(--orange); font-weight: 600; margin-top: 2rem; }
.reel-progress { display: none; }
.panel, .band { position: relative; overflow: hidden; background: var(--bg); color: #fff; padding: clamp(3rem, 8vw, 6rem) clamp(20px, 6vw, 96px); display: flex; align-items: center; min-height: 34rem; isolation: isolate; }
.panel-body { position: relative; z-index: 2; max-width: 36rem; }
.panel-logo { height: 64px; width: auto; display: block; margin-bottom: 2rem; }
.panel h3, .band h2 { color: var(--accent); font-size: 1.15rem; font-weight: 700; font-stretch: 100%; letter-spacing: 0; margin-bottom: 0.6rem; }
.panel-line { font-size: clamp(1.45rem, 2.5vw, 2.3rem); line-height: 1.15; font-weight: 650; font-stretch: 90%; letter-spacing: -0.015em; margin-bottom: 1.5rem; text-wrap: pretty; }
html[dir="rtl"] .panel-line { line-height: 1.5; letter-spacing: 0; }
.panel-points { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 0.45rem; color: rgb(255 255 255 / 85%); }
.panel-points li { display: flex; gap: 0.75rem; align-items: baseline; }
.panel-points li::before { content: ""; flex: none; width: 0.6rem; height: 0.6rem; background: var(--accent); border-radius: 2px; transform: translateY(-0.1em); }
.panel-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin: 0; }
.by { font-size: 0.92rem; color: rgb(255 255 255 / 68%); }
.panel-deco { position: absolute; z-index: 1; top: 50%; inset-inline-end: -12%; width: min(62vh, 640px, 70vw); aspect-ratio: 1; transform: translate3d(var(--shift, 0px), -50%, 0); pointer-events: none; }
.disc { position: absolute; inset: 0; border-radius: 50%; background: var(--accent); }
.panel-deco .giant { position: absolute; inset: 24%; width: 52%; height: 52%; color: var(--bg); stroke-width: 1.6; opacity: 0.9; }
@media (max-width: 860px) {
  .panel, .band { flex-direction: column; align-items: stretch; min-height: 0; padding-top: 0; }
  .panel-deco { position: relative; top: auto; inset: auto; width: 62vw; margin: 0 -14vw 2rem auto; transform: translate3d(0, -30%, 0); }
  html[dir="rtl"] .panel-deco { margin: 0 auto 2rem -14vw; }
}
html.reel-on .reel { height: calc(var(--n) * 78vh); }
html.reel-on .reel-sticky { position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); overflow: hidden; }
html.reel-on .reel-track { display: flex; height: 100%; width: max-content; will-change: transform; }
html.reel-on .reel-intro { flex: none; width: min(46vw, 640px); display: flex; flex-direction: column; justify-content: center; padding-block: 2rem; }
html.reel-on .reel-hint { display: flex; align-items: center; gap: 0.5rem; }
html.reel-on .reel-hint .ico { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(5px); } }
html.reel-on .panel { flex: none; width: min(80vw, 1180px); height: 100%; min-height: 0; border-inline-start: 1px solid rgb(255 255 255 / 8%); }
html.reel-on .reel-progress { display: block; position: absolute; inset-inline: clamp(16px, 6vw, 96px); bottom: 1.5rem; height: 3px; background: rgb(255 231 199 / 14%); border-radius: 3px; z-index: 5; }
html.reel-on .reel-progress span { display: block; height: 100%; width: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; border-radius: 3px; }
html[dir="rtl"].reel-on .reel-progress span { transform-origin: right; }

/* Fiche Kapplive : bande sombre de la plateforme avec les écrans de l'app actuelle. */
.screens { background: var(--bg); color: rgb(255 255 255 / 80%); padding-block: clamp(4rem, 9vw, 7rem); }
.screens h2 { color: #fff; }
.screens .lead { color: rgb(255 255 255 / 72%); }
.screens-logo { height: 56px; width: auto; display: block; margin-bottom: 2rem; }
/* Texte long par parties (fiche Kapplive) : titre à gauche, paragraphe à droite, filet cacao entre les parties. */
.longform { list-style: none; margin: 0; padding: 0; }
.longform li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem clamp(2rem, 5vw, 5rem); padding-block: clamp(2rem, 4vw, 3rem); border-top: 2px solid var(--cacao); }
.longform li:last-child { border-bottom: 2px solid var(--cacao); }
.longform h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin: 0; }
.longform p { margin: 0; font-size: 1.12rem; line-height: 1.7; max-width: 40rem; }
@media (max-width: 800px) { .longform li { grid-template-columns: 1fr; } }
.final p + p { margin-top: -0.4rem; }
/* Encart vers une plateforme sœur, aux couleurs de celle-ci (--bg / --accent posés par la page). */
.sibling { display: flex; gap: 1.5rem; align-items: flex-start; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 24px; background: var(--bg); color: rgb(255 255 255 / 85%); }
.sibling h2 { color: #fff; font-size: 1.5rem; }
.sibling p { margin: 0 0 1.25rem; }
.sibling-ico { flex: none; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--accent); color: var(--bg); }
.sibling-ico .ico { width: 1.6rem; height: 1.6rem; }
@media (max-width: 560px) { .sibling { flex-direction: column; } }
.app-shot { display: block; width: 100%; height: auto; margin-top: clamp(2rem, 4vw, 3rem); border-radius: 20px; box-shadow: 0 30px 60px -30px rgb(0 0 0 / 70%); }
.panel-points.inside { color: var(--ink); gap: 0.7rem; font-size: 1.08rem; }

/* Bandes de la page Plateformes : alternance du côté du disque. */
.bands .band { min-height: min(86vh, 760px); }
.bands .band:nth-child(even) .panel-deco { inset-inline: -12% auto; }
.bands .band:nth-child(even) .panel-body { margin-inline-start: auto; }
@media (max-width: 860px) {
  .bands .band:nth-child(even) .panel-deco { inset: auto; margin: 0 -14vw 2rem auto; }
  .bands .band:nth-child(even) .panel-body { margin-inline-start: 0; }
}

/* ——— Sections ——— */
.section { padding-block: clamp(4rem, 10vw, 8rem); }
.section.tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section.fur { background: var(--fur-soft); }
.section.night { background: var(--night); color: rgb(255 231 199 / 80%); }
.section.night h2, .section.night h3 { color: var(--fur); }
.section.night .lead { color: rgb(255 231 199 / 70%); }
.split-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem 4rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.split-head h2 { margin: 0; }
.split-head .lead { margin: 0; }
@media (max-width: 860px) { .split-head { grid-template-columns: 1fr; } }

/* Lignes d'expertise : très grand texte, balayage orange au survol ou au focus. */
.rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--cacao); }
.rows li { border-bottom: 2px solid var(--cacao); }
.row { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; align-items: center; gap: 1rem 3rem; padding: clamp(1.5rem, 3vw, 2.4rem) 0; text-decoration: none; color: var(--cacao); isolation: isolate; transition: padding 0.45s var(--ease-out); }
.row::before { content: ""; position: absolute; inset: 0 -100vmax; z-index: -1; background: var(--orange); transform: scaleY(0); transform-origin: bottom; transition: transform 0.45s var(--ease-out); }
.row-name { font-size: clamp(2.1rem, 5.4vw, 4.8rem); font-weight: 800; font-stretch: 78%; line-height: 0.95; letter-spacing: -0.035em; transition: font-stretch 0.45s var(--ease-out); }
html[dir="rtl"] .row-name { letter-spacing: 0; line-height: 1.3; }
.row-line { color: var(--muted); max-width: 30ch; transition: color 0.3s; }
.row-ico { width: clamp(2rem, 3.4vw, 3rem); height: auto; stroke-width: 1.75; transition: transform 0.45s var(--spring); }
.row:hover, .row:focus-visible { color: var(--cacao); padding-inline: clamp(0.5rem, 2vw, 1.5rem); outline: none; }
.row:hover::before, .row:focus-visible::before { transform: scaleY(1); }
.row:hover .row-name, .row:focus-visible .row-name { font-stretch: 92%; }
.row:hover .row-line, .row:focus-visible .row-line { color: var(--cacao); }
.row:hover .row-ico, .row:focus-visible .row-ico { transform: rotate(45deg); }
html[dir="rtl"] .row:hover .row-ico, html[dir="rtl"] .row:focus-visible .row-ico { transform: scaleX(-1) rotate(45deg); }
.rows { overflow: clip; }
@media (max-width: 760px) { .row { grid-template-columns: 1fr auto; } .row-line { grid-column: 1 / -1; grid-row: 2; } }

/* Socle commun et prestations : listes sur filets, sans boîtes. */
.facts, .offers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 4vw, 3.5rem); }
.facts li { border-top: 1px solid rgb(255 231 199 / 20%); padding-top: 1.5rem; }
.offers li { border-top: 2px solid var(--cacao); padding-top: 1.5rem; }
.facts p, .offers p { margin: 0; }
.fact-ico { display: inline-flex; color: var(--orange); margin-bottom: 1rem; }
.fact-ico .ico { width: 2rem; height: 2rem; stroke-width: 1.75; }
.offers .fact-ico { color: var(--orange-deep); }
@media (max-width: 900px) { .facts, .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .facts, .offers { grid-template-columns: 1fr; } }

/* Démarche : une vraie suite d'étapes, numérotée. */
.timeline { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem 1.5rem; }
.timeline li { counter-increment: step; position: relative; padding-top: 4.2rem; }
.timeline li::before { content: counter(step); position: absolute; top: 0; inset-inline-start: 0; width: 3rem; height: 3rem; border-radius: 50%; background: var(--orange); color: var(--cacao); display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; z-index: 1; }
.timeline li::after { content: ""; position: absolute; top: 1.45rem; inset-inline: 3rem -1.5rem; height: 2px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline p { color: var(--muted); margin: 0; }

/* FAQ */
.faq details { border-bottom: 2px solid var(--cacao); }
.faq details:first-child { border-top: 2px solid var(--cacao); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.3rem 0; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: 1.25rem; }
.faq summary .ico { width: 1.6rem; height: 1.6rem; color: var(--orange-deep); transition: transform 0.35s var(--spring); }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq details p { color: var(--muted); max-width: 60ch; padding-bottom: 1.3rem; margin: 0; }

/* Appel final : bande poil clair, le chat du pied de page dépasse dessus. */
.final { background: var(--fur); padding-block: clamp(4.5rem, 11vw, 8.5rem) clamp(5.5rem, 12vw, 9.5rem); }
.final h2 { font-size: clamp(2.2rem, 5.4vw, 4.6rem); font-stretch: 82%; max-width: 16ch; line-height: 0.98; letter-spacing: -0.035em; }
html[dir="rtl"] .final h2 { line-height: 1.35; letter-spacing: 0; }
.final p { font-size: 1.2rem; color: var(--muted); max-width: 36rem; }
.final .btn { margin-top: 1rem; }

/* ——— En-tête des pages intérieures ——— */
.page-head { position: relative; overflow: hidden; background: var(--cacao); color: var(--fur); padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6rem); }
.page-head .wrap { position: relative; z-index: 2; }
.page-head h1 { color: var(--fur); max-width: 15ch; }
.page-head .lead { color: rgb(255 231 199 / 80%); }
.page-head .wrap > * { max-width: min(62%, 46rem); }
.kinetic { animation: stretchIn 0.9s var(--ease-out) both; }
@keyframes stretchIn { from { opacity: 0; transform: translateY(0.25em); font-stretch: 75%; } }
.head-cat { position: absolute; z-index: 1; bottom: 0; inset-inline-end: clamp(16px, 7vw, 120px); width: clamp(120px, 17vw, 250px); }
.head-cat .cat { margin-bottom: -2px; animation: catRise 1s var(--spring) 0.25s both; }
.head-cat .cat-eye { animation: eyesOpen 0.3s ease-out 1.1s backwards; }
@media (max-width: 760px) {
  .page-head { padding-bottom: 150px; }
  .page-head .wrap > * { max-width: none; }
  .head-cat { width: 130px; }
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 1.5rem; padding: 0; font-size: 0.92rem; color: rgb(255 231 199 / 65%); }
.crumbs li + li::before { content: "/"; margin-inline-end: 0.3rem; opacity: 0.6; }
.crumbs a { color: rgb(255 231 199 / 80%); text-decoration: none; }
.crumbs a:hover { color: var(--orange); }
.notice { display: flex; gap: 0.6rem; align-items: center; color: rgb(255 231 199 / 75%); font-size: 0.95rem; }

/* ——— La société ——— */
.story { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 3rem clamp(2rem, 6vw, 6rem); align-items: start; }
.story p { font-size: 1.15rem; max-width: 38rem; }
.why-cat { background: var(--orange); color: var(--cacao); border-radius: 28px; padding: 0 clamp(1.5rem, 3vw, 2.5rem) 2rem; overflow: hidden; }
.why-cat-art { width: 62%; margin: 0 auto 1.5rem; }
.why-cat-art .cat-head { fill: var(--cacao); }
.why-cat p { margin: 0; font-size: 1.1rem; }
@media (max-width: 860px) { .story { grid-template-columns: 1fr; } }
.reqs { margin: 0; display: grid; gap: 0; }
.reqs > div { display: grid; grid-template-columns: 14rem 1fr; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.reqs dt { font-weight: 700; color: var(--cacao); }
.reqs dd { margin: 0; }
@media (max-width: 560px) { .reqs > div { grid-template-columns: 1fr; gap: 0.2rem; } }
.prose h2 { font-size: 1.5rem; margin-top: 2.2rem; font-stretch: 95%; }

/* ——— Contact ——— */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 600px) { .grid2 { grid-template-columns: 1fr; } }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.4rem; color: var(--cacao); }
.field input, .field select, .field textarea { width: 100%; font: inherit; color: var(--ink); background: var(--fur-soft); border: 2px solid transparent; border-bottom-color: var(--cacao); border-radius: 10px 10px 4px 4px; padding: 0.75rem 0.9rem; transition: border-color 0.2s, background 0.2s; }
.field textarea { resize: vertical; min-height: 9rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); background: #fff; }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: var(--ko); }
.field.check { display: flex; gap: 0.7rem; align-items: flex-start; }
.field.check input { width: 1.3rem; height: 1.3rem; margin-top: 0.2rem; flex: none; accent-color: var(--orange-deep); }
.field.check label { font-weight: 400; }
.field.check.invalid label { color: var(--ko); }
.req { color: var(--ko); font-weight: 700; }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { background: #fdecea; color: var(--ko); padding: 0.8rem 1rem; border-radius: 10px; font-weight: 600; }
.contact-form .btn[disabled] { opacity: 0.6; cursor: wait; }
.reach { margin: 0 0 2.5rem; }
.reach > div { padding: 1rem 0; border-bottom: 2px solid var(--cacao); }
.reach > div:first-child { border-top: 2px solid var(--cacao); }
.reach dt { font-size: 0.92rem; color: var(--muted); }
.reach dd { margin: 0.2rem 0 0; font-size: 1.2rem; font-weight: 700; color: var(--cacao); overflow-wrap: anywhere; }
.reach dd a { text-decoration: none; }
.reach dd a:hover { text-decoration: underline; }
.aside-products h2 { font-size: 1.35rem; font-stretch: 95%; }
.aside-products p { color: var(--muted); }
.aside-products ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.aside-products a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem; border-radius: 999px; background: var(--fur-soft); text-decoration: none; font-weight: 600; }
.aside-products a::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent); }
.aside-products a:hover { background: var(--fur); }

/* ——— Pied de page nuit, le chat passe les oreilles par-dessus le bord ——— */
.site-footer { position: relative; background: var(--night); color: rgb(255 231 199 / 72%); padding-block: 4.5rem 2rem; font-size: 0.98rem; }
/* Le dessin « peek » fait 0,75 × sa largeur de haut ; la fenêtre en montre 0,7 : oreilles et yeux, le reste
   est caché derrière le bord du pied de page. */
.peek { position: absolute; bottom: 100%; inset-inline-end: clamp(24px, 10vw, 180px); width: clamp(110px, 12vw, 160px); height: calc(clamp(110px, 12vw, 160px) * 0.7); overflow: hidden; pointer-events: none; }
.cat-peek { transform: translateY(100%); transition: transform 0.9s var(--spring); }
.peek.seen .cat-peek { transform: none; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { height: 40px; width: auto; margin-bottom: 1.2rem; }
.footer-brand p { max-width: 24rem; }
.site-footer h2 { font-size: 1rem; font-stretch: 100%; letter-spacing: 0; color: var(--fur); margin-bottom: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.site-footer a { color: rgb(255 231 199 / 78%); text-decoration: none; }
.site-footer a:hover { color: var(--orange); }
.footer-contact a { color: var(--fur); font-weight: 600; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 231 199 / 14%); font-size: 0.9rem; }
.footer-bottom p { margin: 0; }

/* ——— Moins d'animations demandées : tout est posé d'emblée ——— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cat-peek { transform: none; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }