/* ============================================================
   ACCUEIL, bloc ADDITIF au systeme /seo-geo/assets/landing.css
   Aucune regle de landing.css n'est modifiee. Classes prefixees hp-.
   Jetons repris tels quels : couleurs, 3 polices, echelle
   64/36/24/18/16/13, trame de 8.

   v3 (05-09-2026), apres retours de David :
   - etoiles Google reelles dans les avis, et bloc avis redessine
   - logo BLANC dans le pied de page sombre (logo-timekraft-white.png)
   - disponibilite remise dans la barre du bas, avec l'horloge du site
   - le quadrillé revient, en texture, a quatre endroits
   - un dispositif de mise en page DIFFERENT par section
   - profondeur (ombres etagees) et mouvement (revelation, comptage)
   ============================================================ */

/* ---------- Texture de quadrillage, reutilisable -------------- */
.hp-texture{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(#eee9f4 1px,transparent 1px),linear-gradient(90deg,#eee9f4 1px,transparent 1px);
  background-size:28px 28px}
.hp-texture--fade-b{mask-image:linear-gradient(to bottom,black 0%,transparent 78%)}
.hp-texture--fade-t{mask-image:linear-gradient(to top,black 0%,transparent 78%)}
.hp-texture--soft{mask-image:radial-gradient(120% 90% at 70% 20%,black 0%,transparent 72%)}
.hp-texture--dark{background-image:linear-gradient(#221836 1px,transparent 1px),linear-gradient(90deg,#221836 1px,transparent 1px)}
.hp-rel{position:relative;overflow:hidden}
.hp-rel>.wrap{position:relative}

/* ---------- Navigation --------------------------------------- */
.hp-nav{position:sticky;top:0;z-index:50;background:rgba(251,250,253,.94);border-bottom:1px solid var(--line)}
.hp-nav .wrap{display:flex;align-items:center;gap:24px;height:80px}
.hp-brand img{height:32px;width:auto;display:block}
.hp-menu{margin-left:auto;display:flex;align-items:center;gap:24px;padding:0;margin-bottom:0;margin-top:0}
.hp-menu>li{position:relative;list-style:none}
.hp-menu a{font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap}
.hp-menu a:hover,.hp-menu a:focus-visible{color:var(--violet)}
.hp-has-sub>a:after{content:'';display:inline-block;width:5px;height:5px;margin-left:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.hp-sub{position:absolute;top:100%;left:-16px;min-width:250px;background:var(--card);border:1px solid var(--line);border-radius:9px;
  box-shadow:0 4px 10px rgba(37,17,74,.06),0 18px 38px rgba(37,17,74,.13);padding:8px;margin:0;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s}
.hp-menu>li:hover>.hp-sub,.hp-menu>li:focus-within>.hp-sub{opacity:1;visibility:visible;transform:none}
.hp-sub li{list-style:none}
.hp-sub a{display:block;padding:8px;border-radius:5px;color:var(--text);font-weight:500}
.hp-sub a:hover{background:var(--surface);color:var(--violet)}
.hp-sub-title{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.085em;color:var(--light);padding:16px 8px 4px;margin:0}
.hp-nav-cta{background:var(--ink);color:#fff;padding:8px 16px;border-radius:7px;font-weight:700;transition:background .2s,transform .2s}
.hp-nav-cta:hover{background:var(--violet);color:#fff;transform:translateY(-1px)}
.hp-burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:7px;padding:8px 16px;font-family:var(--ui);font-size:13px;font-weight:700;color:var(--ink);cursor:pointer}

/* ---------- 1. Hero ------------------------------------------ */
.hp-stage{position:relative;min-height:440px;display:flex;align-items:center}
.hp-screen{position:relative;width:100%;background:#fff;border:1px solid #e4deed;border-radius:13px;
  box-shadow:0 2px 4px rgba(36,18,76,.04),0 12px 24px rgba(36,18,76,.07),0 32px 64px rgba(36,18,76,.12);
  overflow:hidden;transform:rotateY(-5deg) rotateX(2deg)}
.hp-screen-top{height:38px;padding:0 16px;background:#f6f4f8;border-bottom:1px solid #e9e5ee;display:flex;align-items:center;font-family:var(--mono);font-size:13px;color:var(--muted)}
.hp-screen-top small{margin-left:auto;font-size:13px;color:#16845e}
.hp-screen-top small i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#15a16d;margin-right:4px}
.hp-screen-body{padding:24px}
.hp-figure{display:flex;align-items:baseline;gap:8px;margin:8px 0 16px}
.hp-figure strong{font-family:var(--mono);font-size:48px;line-height:1;color:var(--violet)}
.hp-figure span{font-size:13px;color:var(--muted)}
.hp-bar{height:6px;border-radius:6px;background:var(--surface);overflow:hidden;margin-bottom:24px}
.hp-bar i{display:block;height:100%;background:var(--violet);width:0;transition:width 1.1s cubic-bezier(.22,.8,.3,1) .25s}
.hp-bar.is-on i{width:78%}
.hp-rows{border-top:1px solid var(--line)}
.hp-rows div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line)}
.hp-rows b{font-size:13px;font-weight:600;color:var(--ink)}
.hp-rows span{font-family:var(--mono);font-size:13px;color:#16845e}
.hp-rows span.hp-wait{color:#b06a00}
.hp-float{position:absolute;background:#fff;border:1px solid #e4deed;border-radius:8px;padding:16px;
  box-shadow:0 2px 4px rgba(37,21,71,.05),0 16px 30px rgba(37,21,71,.14)}
.hp-float span{display:block;font-family:var(--mono);font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.085em}
.hp-float strong{font-family:var(--mono);font-size:24px;color:var(--violet);display:block;margin:4px 0}
.hp-float small{font-size:13px;color:var(--light)}
.hp-float-left{left:-24px;bottom:-16px}

/* ---------- 2. Bande de chiffres, sur encre ------------------- */
.hp-figures{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.hp-figures div{border-top:1px solid #3a2b50;padding-top:16px}
.hp-figures strong{display:block;font-family:var(--mono);font-size:36px;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.hp-figures p{margin:8px 0 0;font-size:13px;line-height:1.6;color:#c7bfd2}

/* ---------- 3. Le constat : colonne de titre + rangees --------- */
.hp-constat{display:grid;grid-template-columns:38% 1fr;gap:64px;align-items:start}
.hp-rowlist{border-top:1px solid var(--line)}
.hp-rowlist>div{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid var(--line)}
.hp-rowlist .num{font-family:var(--mono);font-size:13px;color:var(--violet);padding-top:4px}
.hp-rowlist p{margin:0;font-size:16px;line-height:1.6;color:var(--text)}
.hp-rowlist>div:first-child p{font-family:var(--serif);font-size:24px;line-height:1.45;color:var(--ink)}
.hp-rowlist cite{display:block;margin-top:8px;font-style:normal;font-family:var(--mono);font-size:13px;color:var(--light)}

/* ---------- 4. Metiers : rail de famille + liste a deux colonnes */
.hp-family{display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:start;margin-top:64px}
.hp-family-label{position:sticky;top:104px}
.hp-family-label .mini{color:var(--light);margin:0 0 8px}
.hp-family-label p{margin:0;font-size:16px;line-height:1.45;color:var(--ink);font-weight:700}
.hp-family-label b{display:block;margin-top:16px;font-family:var(--mono);font-size:24px;color:var(--violet)}
.hp-entries{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;border-top:1px solid var(--line)}
.hp-entries article{padding:24px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column}
.hp-entries h3{font-size:18px;line-height:1.35;color:var(--ink);margin:0 0 8px;font-weight:700}
.hp-entries p{margin:0 0 16px;font-size:13px;line-height:1.6;color:var(--muted);flex:1}
.hp-entries .under-link{margin-top:auto;align-self:flex-start}
.hp-note{margin-top:48px;font-size:13px;color:var(--muted)}
.hp-note a{color:var(--violet);font-weight:600}

/* ---------- 5. Trois etapes : chronologie horizontale ---------- */
.hp-timeline{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:64px;padding-top:40px}
.hp-timeline:before{content:'';position:absolute;top:11px;left:0;right:0;height:1px;background:var(--line)}
.hp-timeline article{position:relative}
.hp-timeline article:before{content:'';position:absolute;top:-40px;left:0;width:22px;height:22px;border-radius:50%;
  background:var(--paper);border:2px solid var(--violet);box-shadow:0 0 0 6px var(--paper)}
.hp-timeline article:after{content:'';position:absolute;top:-33px;left:7px;width:8px;height:8px;border-radius:50%;background:var(--violet)}
.hp-timeline .num{display:block;margin-bottom:8px}
.hp-timeline h3{font-size:24px;color:var(--ink);margin:0 0 8px;font-weight:800}
.hp-timeline p{margin:0;font-size:16px;line-height:1.6;color:var(--muted)}

/* ---------- 6. Formules, sur encre ---------------------------- */
.hp-offers{position:relative;overflow:hidden;background:var(--ink);padding:96px 0;color:#fff}
.hp-offers .eyebrow{color:#c9a6ff}
.hp-offers .eyebrow i{background:#c9a6ff}
.hp-offers h2{font-size:36px;line-height:1.05;margin:16px 0 0;color:#fff;font-weight:800}
.hp-offers h2 em{font-family:var(--serif);font-weight:400;color:#d8bdff}
.hp-offers-intro{max-width:710px}
.hp-offers-intro>p{font-size:16px;line-height:1.6;color:#c3bacf;margin:24px 0 0}
.hp-offers-intro a{color:#d8bdff}
.hp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;align-items:stretch}
.hp-offer{position:relative;background:#1b112b;border:1px solid #443657;border-radius:8px;padding:24px;display:flex;flex-direction:column;
  transition:transform .25s,box-shadow .25s,border-color .25s}
.hp-offer:hover{transform:translateY(-4px);border-color:#5d4a7d;box-shadow:0 20px 40px rgba(0,0,0,.35)}
.hp-offer .mini{color:#c9a6ff}
.hp-offer h3{font-size:24px;margin:0 0 8px;color:#fff}
.hp-terms{font-family:var(--mono);font-size:13px;color:#bdb2cb;margin:0 0 24px}
.hp-offer ul{list-style:none;padding:0;margin:0 0 24px;border-top:1px solid #403152;flex:1}
.hp-offer li{position:relative;padding:8px 0 8px 16px;border-bottom:1px solid #403152;font-size:13px;line-height:1.6;color:#ded7e6}
.hp-offer li:before{content:'+';position:absolute;left:0;color:#c9a6ff;font-family:var(--mono)}
.hp-offer .button{background:#38254e;width:100%}
.hp-offer .button:hover{background:#4d336c}
.hp-more{display:block;margin-top:16px;text-align:center;font-size:13px;color:#bdb2cb;text-decoration:none}
.hp-more:hover{color:#fff}
.hp-offer.hp-featured{background:var(--violet);border-color:#a866ff;box-shadow:0 19px 42px rgba(106,0,255,.3)}
.hp-offer.hp-featured:hover{box-shadow:0 26px 54px rgba(106,0,255,.42)}
.hp-offer.hp-featured .mini,.hp-offer.hp-featured .hp-terms{color:#e8d8ff}
.hp-offer.hp-featured ul,.hp-offer.hp-featured li{border-color:rgba(255,255,255,.25)}
.hp-offer.hp-featured li:before{color:#fff}
.hp-offer.hp-featured .button{background:#fff;color:var(--ink)}
.hp-offer.hp-featured .button:hover{background:#e9ddff}
.hp-badge{position:absolute;top:-12px;right:20px;background:#fff;color:var(--violet);font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.04em;padding:4px 8px;border-radius:4px;margin:0}
.hp-offers-foot{font-size:13px;color:#bdb2cb;margin:32px 0 0}
.hp-offers-foot a{color:#d8bdff}

/* ---------- 7. Confiance : portrait + liste ------------------- */
.hp-trust{display:grid;grid-template-columns:340px 1fr;gap:64px;align-items:start;margin-top:64px}
.hp-portrait{position:relative}
.hp-portrait img{width:100%;height:auto;display:block;border-radius:9px;border:1px solid var(--line);
  box-shadow:0 4px 8px rgba(37,17,74,.05),0 24px 48px rgba(37,17,74,.13)}
.hp-portrait figcaption{margin:16px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}
.hp-portrait figcaption b{display:block;font-family:var(--mono);font-size:13px;color:var(--ink);margin-bottom:4px}
.hp-portrait figcaption a{color:var(--violet);font-weight:600}
.hp-trustlist{border-top:1px solid var(--line)}
.hp-trustlist>div{display:grid;grid-template-columns:240px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--line);align-items:baseline}
.hp-trustlist h3{font-size:18px;color:var(--ink);margin:0;font-weight:700}
.hp-trustlist p{margin:0;font-size:16px;line-height:1.6;color:var(--muted)}
.hp-trustlist a{color:var(--violet)}

/* ---------- 8. Donnees : texte + panneau ---------------------- */
.hp-data-layout{display:grid;grid-template-columns:44% 1fr;gap:64px;align-items:center}
.hp-panel{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;
  box-shadow:0 2px 4px rgba(36,18,76,.04),0 14px 28px rgba(36,18,76,.08),0 36px 64px rgba(36,18,76,.1)}
.hp-panel-top{height:38px;padding:0 16px;background:#f6f4f8;border-bottom:1px solid #e9e5ee;display:flex;align-items:center;font-family:var(--mono);font-size:13px;color:var(--muted)}
.hp-panel-top small{margin-left:auto;color:var(--violet)}
.hp-panel section{padding:24px;border-bottom:1px solid var(--line)}
.hp-panel section:last-child{border-bottom:0}
.hp-panel h3{font-size:18px;color:var(--ink);margin:0 0 8px;font-weight:700}
.hp-panel p{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
.hp-panel a{color:var(--violet)}

/* ---------- 9. Avis Google ------------------------------------ */
.hp-avis-head{display:flex;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-top:32px;
  border-bottom:1px solid var(--line);padding-bottom:24px}
.hp-score{display:flex;align-items:baseline;gap:8px}
.hp-score strong{font-family:var(--mono);font-size:48px;line-height:1;color:var(--ink)}
.hp-score span{font-family:var(--mono);font-size:13px;color:var(--muted)}
.hp-stars{display:inline-flex;gap:4px;align-items:center}
.hp-stars svg{display:block}
.hp-avis-head .under-link{margin-left:auto}
.hp-lead{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:24px;margin-top:32px;align-items:stretch}
.hp-avis{background:#fff;border:1px solid var(--line);border-radius:9px;padding:24px;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(37,17,74,.04),0 10px 24px rgba(37,17,74,.06);transition:transform .25s,box-shadow .25s}
.hp-avis:hover{transform:translateY(-4px);box-shadow:0 4px 8px rgba(37,17,74,.06),0 22px 44px rgba(37,17,74,.1)}
.hp-avis .hp-stars{margin-bottom:16px}
.hp-avis p{margin:0 0 24px;font-size:16px;line-height:1.6;color:var(--text);flex:1}
.hp-avis--lead p{font-family:var(--serif);font-size:24px;line-height:1.45;color:var(--ink)}
.hp-who{display:flex;align-items:center;gap:8px;margin-top:auto}
.hp-av{width:32px;height:32px;border-radius:50%;background:var(--surface);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;color:var(--violet);flex:0 0 auto}
.hp-who b{font-size:13px;color:var(--ink);font-weight:700}
.hp-who span{display:block;font-family:var(--mono);font-size:13px;color:var(--light)}
.hp-avis-more{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:24px}

/* ---------- 10. FAQ : depliants ------------------------------- */
.hp-faq{margin-top:48px;border-top:1px solid var(--line)}
.hp-faq details{border-bottom:1px solid var(--line)}
.hp-faq summary{list-style:none;cursor:pointer;padding:24px 40px 24px 0;position:relative;
  font-size:24px;font-weight:700;color:var(--ink);line-height:1.35}
.hp-faq summary::-webkit-details-marker{display:none}
.hp-faq summary:after{content:'';position:absolute;right:8px;top:34px;width:10px;height:10px;
  border-right:2px solid var(--violet);border-bottom:2px solid var(--violet);transform:rotate(45deg);transition:transform .25s}
.hp-faq details[open] summary:after{transform:rotate(-135deg)}
.hp-faq summary:hover{color:var(--violet)}
.hp-faq .hp-answer{overflow:hidden}
.hp-faq .hp-answer p{margin:0;padding:0 64px 24px 0;font-size:16px;line-height:1.6;color:var(--muted);
  animation:hp-open .3s ease}
@keyframes hp-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 11. Appel final ----------------------------------- */
.hp-closing-actions{display:flex;flex-direction:column;gap:16px}
.hp-ghost{background:transparent;border:1px solid #4c3b66;color:#fff}
.hp-ghost:hover{background:#241634;border-color:#6e5890}

/* ---------- 12. Expertises : deux piliers + cinq rangees ------ */
.hp-pillars{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.hp-pillar{position:relative;background:#fff;border:1px solid var(--line);border-radius:9px;padding:32px;overflow:hidden;
  box-shadow:0 1px 2px rgba(37,17,74,.04),0 14px 30px rgba(37,17,74,.07);transition:transform .25s,box-shadow .25s}
.hp-pillar:hover{transform:translateY(-5px);box-shadow:0 6px 12px rgba(37,17,74,.07),0 26px 50px rgba(37,17,74,.11)}
.hp-pillar:after{content:'';position:absolute;right:0;top:0;width:5px;height:100%;background:var(--violet);opacity:0;transition:opacity .25s}
.hp-pillar:hover:after{opacity:1}
.hp-pillar h3{font-size:24px;color:var(--ink);margin:16px 0 8px;font-weight:800}
.hp-pillar p{margin:0 0 24px;font-size:16px;line-height:1.6;color:var(--muted)}
.hp-minor{margin-top:24px;border-top:1px solid var(--line)}
.hp-minor>div{display:grid;grid-template-columns:56px 300px 1fr auto;gap:24px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line);transition:background .2s}
.hp-minor>div:hover{background:rgba(240,238,245,.55)}
.hp-minor .num{font-family:var(--mono);font-size:13px;color:var(--violet)}
.hp-minor h3{font-size:18px;color:var(--ink);margin:0;font-weight:700}
.hp-minor p{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}

/* ---------- WhatsApp ----------------------------------------- */
.hp-wa{position:fixed;right:24px;bottom:24px;z-index:60;width:56px;height:56px;border-radius:50%;background:#25d366;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.22);transition:transform .2s}
.hp-wa:hover{transform:scale(1.06)}
.hp-wa svg{width:30px;height:30px;fill:#fff}

/* ---------- Mouvement ---------------------------------------- */
.hp-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.hp-reveal.is-visible{opacity:1;transform:none}
.hp-d1{transition-delay:.08s}.hp-d2{transition-delay:.16s}.hp-d3{transition-delay:.24s}.hp-d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  .hp-reveal{opacity:1;transform:none;transition:none}
  .hp-bar i{transition:none;width:78%}
  .hp-offer,.hp-avis,.hp-pillar,.hp-nav-cta,.hp-wa{transition:none}
  .hp-faq .hp-answer p{animation:none}
}

/* ---------- Adaptations --------------------------------------- */
@media(max-width:1100px){
  .hp-footer-grid{grid-template-columns:1fr 1fr}
  .hp-trust{grid-template-columns:260px 1fr;gap:48px}
  .hp-minor>div{grid-template-columns:48px 1fr;gap:8px 16px}
  .hp-minor p{grid-column:2}
  .hp-minor .under-link{grid-column:2;justify-self:start;margin-top:8px}
  .hp-lead{grid-template-columns:1fr 1fr}
  .hp-avis-more{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .hp-menu{display:none}
  .hp-burger{display:block}
  .hp-figures{grid-template-columns:repeat(2,1fr);gap:24px}
  .hp-constat,.hp-family,.hp-trust,.hp-data-layout{grid-template-columns:1fr;gap:32px}
  .hp-family-label{position:static}
  .hp-entries{grid-template-columns:1fr;gap:0}
  .hp-timeline{grid-template-columns:1fr;gap:0;padding-top:0}
  .hp-timeline:before{display:none}
  .hp-timeline article{padding:24px 0 24px 40px;border-bottom:1px solid var(--line)}
  .hp-timeline article:before{top:26px;left:0}
  .hp-timeline article:after{top:33px;left:7px}
  .hp-grid,.hp-pillars{grid-template-columns:1fr}
  .hp-stage{min-height:0;margin-top:32px}
  .hp-screen{transform:none}
  .hp-trustlist>div{grid-template-columns:1fr;gap:8px}
  .hp-portrait{max-width:340px}
}
@media(max-width:600px){
  .hp-footer-grid{grid-template-columns:1fr}
  .hp-figures{grid-template-columns:1fr}
  .hp-offers{padding:64px 0}
  .hp-lead,.hp-avis-more{grid-template-columns:1fr}
  .hp-float-left{position:static;transform:none;margin-top:16px;box-shadow:none}
  .hp-footer-bottom nav{margin-left:0}
  .hp-avis-head .under-link{margin-left:0}
  .hp-faq summary{font-size:18px;padding-right:32px}
  .hp-faq summary:after{top:28px}
  .hp-rowlist>div{grid-template-columns:40px 1fr;gap:8px}
  .hp-rowlist>div:first-child p{font-size:18px}
}

/* ---------- Expertises : deux blocs pleine largeur ------------ */
/* 01 et 07 sont les deux offres de fond, et les seules dont le texte
   source est long. Elles encadrent la liste des cinq autres, ce qui
   preserve l'ordre 01 a 07 tout en creant une hierarchie. */
.hp-feature{position:relative;display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:9px;padding:32px;overflow:hidden;
  box-shadow:0 1px 2px rgba(37,17,74,.04),0 14px 30px rgba(37,17,74,.07);transition:transform .25s,box-shadow .25s}
.hp-feature:hover{transform:translateY(-4px);box-shadow:0 6px 12px rgba(37,17,74,.07),0 26px 50px rgba(37,17,74,.11)}
.hp-feature:after{content:'';position:absolute;right:0;top:0;width:5px;height:100%;background:var(--violet);opacity:0;transition:opacity .25s}
.hp-feature:hover:after{opacity:1}
.hp-feature h3{font-size:24px;color:var(--ink);margin:8px 0 0;font-weight:800;line-height:1.15}
.hp-feature p{margin:0 0 24px;font-size:16px;line-height:1.6;color:var(--muted)}
.hp-feature-first{margin-top:48px}
.hp-feature-last{margin-top:24px}
@media(max-width:900px){.hp-feature{grid-template-columns:1fr;gap:16px;padding:24px}}

/* ============================================================
   COUCHE MOTION DESIGN
   Applique point par point la liste de feedback_site_design_vision.md :
   reveal en stagger, reveal directionnel, barres accent qui s'etendent,
   elements flottants a rythmes differents, orbes, grain, profondeur,
   underline qui s'etend au survol, barre d'accent a gauche des cartes.
   Tout est neutralise par prefers-reduced-motion, en bas de ce bloc.
   ============================================================ */

/* --- Grain : texture fine sur toute la page, sous le contenu ---- */
.hp-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23g)' opacity='.16'/></svg>")}

/* --- Orbes : deux masses violettes qui respirent a des rythmes differents */
.hp-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(60px);opacity:.5}
.hp-orb--a{width:420px;height:420px;background:radial-gradient(circle,rgba(106,0,255,.20),transparent 70%);
  top:-120px;right:-80px;animation:hp-flotte-a 17s ease-in-out infinite}
.hp-orb--b{width:300px;height:300px;background:radial-gradient(circle,rgba(220,1,255,.14),transparent 70%);
  bottom:-90px;left:8%;animation:hp-flotte-b 23s ease-in-out infinite}
@keyframes hp-flotte-a{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-26px,32px,0) scale(1.07)}}
@keyframes hp-flotte-b{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(30px,-24px,0) scale(.94)}}

/* --- Parallaxe douce du quadrillage, pilotee au defilement -------- */
.hp-texture{will-change:transform;transform:translate3d(0,var(--par,0px),0)}

/* --- Reveal : montant, depuis la gauche, depuis la droite --------- */
.hp-reveal{opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .75s cubic-bezier(.22,.7,.25,1),transform .75s cubic-bezier(.22,.7,.25,1)}
.hp-from-l{transform:translate3d(-38px,0,0)}
.hp-from-r{transform:translate3d(38px,0,0)}
.hp-reveal.is-visible{opacity:1;transform:none}
.hp-d1{transition-delay:.09s}.hp-d2{transition-delay:.18s}.hp-d3{transition-delay:.27s}
.hp-d4{transition-delay:.36s}.hp-d5{transition-delay:.45s}.hp-d6{transition-delay:.54s}

/* --- Barres accent qui s'etendent : le trait des surtitres -------- */
.eyebrow i{transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.22,.7,.25,1) .1s}
.is-visible .eyebrow i,.eyebrow.is-visible i{transform:scaleX(1)}

/* --- L'ecran du hero arrive en pivotant -------------------------- */
.hp-screen{opacity:0;transform:perspective(1600px) rotateY(-14deg) rotateX(6deg) translate3d(46px,26px,0) scale(.96);
  transition:opacity .9s cubic-bezier(.2,.7,.25,1) .15s,transform 1.05s cubic-bezier(.2,.7,.25,1) .15s}
.hp-screen.is-visible{opacity:1;transform:perspective(1600px) rotateY(-5deg) rotateX(2deg) translate3d(0,0,0) scale(1)}
/* et il flotte ensuite, tres lentement */
.hp-screen.is-visible{animation:hp-respire 9s ease-in-out 1.4s infinite}
@keyframes hp-respire{0%,100%{margin-top:0}50%{margin-top:-8px}}

/* --- La vignette flottante a son propre rythme ------------------- */
.hp-float-left.is-visible{animation:hp-respire-2 7.5s ease-in-out 1.9s infinite}
@keyframes hp-respire-2{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,10px,0)}}

/* --- Les lignes de l'ecran se remplissent l'une apres l'autre ----- */
.hp-rows div{opacity:0;transform:translate3d(0,8px,0);transition:opacity .5s ease,transform .5s ease}
.hp-screen.is-visible .hp-rows div:nth-child(1){opacity:1;transform:none;transition-delay:.75s}
.hp-screen.is-visible .hp-rows div:nth-child(2){opacity:1;transform:none;transition-delay:.92s}
.hp-screen.is-visible .hp-rows div:nth-child(3){opacity:1;transform:none;transition-delay:1.09s}

/* --- Le trait de la chronologie se dessine au defilement ---------- */
.hp-timeline:before{transform:scaleX(var(--trace,0));transform-origin:left;transition:transform .2s linear}
.hp-timeline article:before{transform:scale(0);transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.hp-timeline article:after{opacity:0;transition:opacity .3s ease}
.hp-timeline article.is-visible:before{transform:scale(1)}
.hp-timeline article.is-visible:after{opacity:1;transition-delay:.25s}

/* --- Underline qui s'etend au survol ----------------------------- */
.under-link{position:relative;border-bottom-color:transparent!important}
.under-link:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#c8c1d1;
  transform:scaleX(1);transform-origin:right;transition:transform .35s cubic-bezier(.22,.7,.25,1),background .2s}
.under-link:hover:after,.under-link:focus-visible:after{background:var(--violet);transform-origin:left}
.under-link b{display:inline-block;transition:transform .3s cubic-bezier(.22,.7,.25,1)}
.under-link:hover b,.button:hover b{transform:translateX(5px)}

/* --- Barre d'accent a gauche des cartes, signature TimeKraft ------
   Le systeme 2026 est sans degrade : la barre est en aplat violet. */
.hp-avis,.hp-offer,.hp-feature,.hp-panel{position:relative}
.hp-avis:before,.hp-feature:before{content:'';position:absolute;left:0;top:0;width:4px;height:100%;
  background:var(--violet);transform:scaleY(0);transform-origin:bottom;transition:transform .35s cubic-bezier(.22,.7,.25,1);
  border-radius:9px 0 0 9px}
.hp-avis:hover:before,.hp-feature:hover:before{transform:scaleY(1);transform-origin:top}

/* --- Les etoiles des avis apparaissent en cascade ----------------- */
.hp-stars svg{opacity:0;transform:scale(.5) rotate(-25deg);transition:opacity .3s ease,transform .45s cubic-bezier(.3,1.5,.5,1)}
.is-visible .hp-stars svg,.hp-stars.is-visible svg{opacity:1;transform:none}
.hp-stars svg:nth-child(1){transition-delay:.05s}
.hp-stars svg:nth-child(2){transition-delay:.11s}
.hp-stars svg:nth-child(3){transition-delay:.17s}
.hp-stars svg:nth-child(4){transition-delay:.23s}
.hp-stars svg:nth-child(5){transition-delay:.29s}

/* --- La pastille de disponibilite pulse -------------------------- */
.hp-status i{animation:hp-pulse 2.6s ease-out infinite}
@keyframes hp-pulse{0%{box-shadow:0 0 0 0 rgba(21,161,109,.5)}70%{box-shadow:0 0 0 8px rgba(21,161,109,0)}100%{box-shadow:0 0 0 0 rgba(21,161,109,0)}}

/* --- Les rangees d'expertise glissent au survol ------------------- */
.hp-minor>div{position:relative}
.hp-minor>div:before{content:'';position:absolute;left:-16px;top:0;bottom:0;width:3px;background:var(--violet);
  transform:scaleY(0);transition:transform .3s cubic-bezier(.22,.7,.25,1)}
.hp-minor>div:hover:before{transform:scaleY(1)}
.hp-minor>div:hover .num{color:var(--magenta)}
.hp-minor .num{transition:color .25s}

/* --- Respect de la preference systeme ---------------------------- */
@media(prefers-reduced-motion:reduce){
  .hp-orb,.hp-status i,.hp-screen.is-visible,.hp-float-left.is-visible{animation:none!important}
  .hp-reveal,.hp-screen,.hp-rows div,.hp-stars svg,.eyebrow i,
  .hp-timeline:before,.hp-timeline article:before,.hp-timeline article:after,
  .under-link:after,.hp-avis:before,.hp-feature:before,.hp-minor>div:before{
    transition:none!important;transform:none!important;opacity:1!important}
  .hp-texture{transform:none!important}
  .hp-timeline:before{transform:scaleX(1)!important}
  .hp-bar i{transition:none;width:78%}
  .hp-grain{display:none}
}

/* --- Corrections finales (05-09-2026) -------------------------
   1. La colonne de titre du constat suit la lecture des trois
      rangees au lieu de laisser un grand vide a gauche.
   2. Le rail de famille des metiers n'a plus de libelle ajoute :
      il ne porte que le nom de la famille, qui vient de la page. */
.hp-constat>div:first-child{position:sticky;top:112px}
.hp-constat-title{font-size:36px}
.hp-family-label p{margin:0}
@media(max-width:900px){.hp-constat>div:first-child{position:static}}

/* --- Conformite a l'echelle 64/48/36/24/18/16/13 et a la trame de 8 ---
   Deux ecarts mesures au navigateur le 05-09-2026 :
   1. <small> heritait de la taille par defaut du navigateur (0.8em),
      soit 10,4 px, sous le plancher de lisibilite fixe a 13.
   2. .hp-note gardait la marge basse par defaut d'un <p> (1em = 13 px),
      hors trame. */
.hp-panel-top small,.hp-screen-top small,.hp-float small,small{font-size:13px}
.hp-note{margin-bottom:0}


/* ============================================================
   AVIS, correction du 05-09-2026 apres retour de David
   1. Une seule taille de texte pour les sept avis. La version
      precedente mettait le premier avis en 24px serif et les six
      autres en 16px : deux tailles dans le meme bloc, c'est faux.
   2. Les cartes ne s'etirent plus a la hauteur de la rangee. Elles
      coulent en colonnes et prennent la hauteur de leur texte, donc
      plus aucun vide sous les avis courts.
   3. Les photos des sept personnes existent dans /avis-google/ et
      sont celles du composant du site. Elles remplacent les initiales.
   ============================================================ */
.hp-lead,.hp-avis-more{display:none}
.hp-reviews{columns:3;column-gap:24px;margin-top:32px;display:block;border-top:0}
.hp-avis{display:block;break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  width:100%;margin:0 0 24px;padding:24px;background:#fff;border:1px solid var(--line);border-radius:9px;
  box-shadow:0 1px 2px rgba(37,17,74,.04),0 10px 24px rgba(37,17,74,.06)}
.hp-avis p{font-family:var(--ui);font-size:16px;line-height:1.6;color:var(--text);margin:16px 0 24px}
.hp-avis--lead p{font-family:var(--ui);font-size:16px;line-height:1.6;color:var(--text)}
.hp-avis .hp-stars{margin:0}
.hp-who{display:flex;align-items:center;gap:16px;margin:0}
img.hp-av{width:48px;height:48px;border-radius:50%;flex:0 0 48px;object-fit:cover;
  border:2px solid var(--line);background:var(--surface);display:block}
.hp-who b{font-size:16px;color:var(--ink);font-weight:700}
@media(max-width:1100px){.hp-reviews{columns:2}}
@media(max-width:600px){.hp-reviews{columns:1}}

/* ============================================================
   FINITIONS mesurees le 05-09-2026
   ============================================================ */

/* 1. LONGUEUR DE LIGNE. Mesure : les reponses de la FAQ tenaient
   148 caracteres par ligne, les rangees d'expertises 98 a 103, les
   blocs 01 et 07 96, l'intro des formules 89. Le confort de lecture
   se situe sous 80. Bornes posees a 640px pour le texte de 16px et
   520px pour celui de 13px, ce qui donne 80 caracteres dans les deux
   cas. Valeurs sur la trame de 8. */
.hp-faq .hp-answer p{max-width:640px}
.hp-feature p{max-width:640px}
.hp-offers-intro>p{max-width:640px}
.hp-minor p{max-width:520px}
.hp-note,.hp-offers-foot{max-width:640px}

/* 2. LE TRAIT DE LA CHRONOLOGIE se dessinait en #E9E4F0 sur fond
   quasi blanc : l'effet existait mais ne se voyait pas. Le rail reste
   discret, et le trace qui suit le defilement passe en violet. */
.hp-timeline:before{background:#ddd7e6;transform:none}
.hp-timeline:after{content:'';position:absolute;top:11px;left:0;right:0;height:2px;
  background:var(--violet);transform:scaleX(var(--trace,0));transform-origin:left;
  transition:transform .25s linear}

/* 3. FOCUS CLAVIER. Le navigateur posait son contour bleu par defaut,
   etranger a la DA. Anneau violet, visible sur clair comme sur encre. */
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:3px}
.hp-offers :focus-visible,.closing :focus-visible,.shift :focus-visible,
.hp-footer :focus-visible{outline-color:#c9a6ff}

@media(prefers-reduced-motion:reduce){
  .hp-timeline:after{transform:scaleX(1)!important;transition:none}
}
@media(max-width:900px){
  .hp-timeline:after{display:none}
}

/* Reprise : quatre blocs restaient au-dessus de 80 caracteres apres la
   premiere passe. 520px pour le texte de 13px, 640px pour celui de 16px. */
.hp-note,.hp-offers-foot{max-width:520px}
.hp-panel p{max-width:520px}
.section-title>p:not(.eyebrow){max-width:640px}

/* Le nav et le pied de page maison ont ete remplaces par les partials du site
   (05-09-2026) pour que sync-nav.py, sync-mobile.py et sync-footer.py les
   maintiennent. Les quelques regles hp-nav / hp-footer encore presentes plus
   haut ne s'appliquent plus a rien : elles sont conservees pour l'historique,
   sans effet, et seront nettoyees a la migration des 107 pages. */

/* La pastille TK de l'ecran du hero, reprise de la page d'accueil. */
.hp-tk{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;background:var(--violet);color:#fff;font-family:var(--ui);font-size:13px;
  font-weight:700;margin-right:8px;flex:0 0 24px}
.hp-screen-top{gap:0}

/* Les listes des formules se centrent verticalement : sur les cartes qui ont
   trois puces au lieu de quatre, le vide se repartissait tout entier sous la
   liste. Il est maintenant partage au-dessus et en dessous. */
.hp-offer ul{display:flex;flex-direction:column;justify-content:center}
.hp-offer li{flex:0 0 auto}

/* ============================================================
   LONGUEUR DE LIGNE, toutes largeurs
   Mesure a 768px : les descriptions de metiers montaient a 111
   caracteres par ligne, les etapes a 85, les preuves a 90. Les bornes
   posees plus haut ne couvraient que le bureau. Elles sont maintenant
   portees par le texte lui-meme, donc valables a toutes les largeurs.
   Reference : 80 caracteres, soit 640px a 16px et 520px a 13px.
   ============================================================ */
.hero-copy>p:not(.eyebrow),
.hp-rowlist p,
.hp-timeline p,
.hp-trustlist p,
.hp-data-layout>div>p,
.hp-offers-intro>p,
.hp-feature p,
.hp-avis p,
.hp-faq .hp-answer p,
.section-title>p:not(.eyebrow){max-width:640px}
.hp-entries p,
.hp-minor p,
.hp-panel p,
.hp-note,
.hp-offers-foot,
.hp-figures p,
.hp-portrait figcaption{max-width:520px}

/* ============================================================
   PIED DE PAGE SOMBRE 2026, retabli le 05-09-2026 a la demande de David
   Fond encre, quadrillage qui s'efface vers le haut, logo blanc, barre
   de disponibilite avec l'horloge, bandeau d'avis Google colle en bas.
   Ce bloc est ecrit pour devenir _partials/footer.html : il ne depend
   que des jetons de landing.css.
   ⚠ landing.css porte `footer:not(.tk-footer){height:108px;display:flex}`,
   pense pour le petit pied de page de la landing SEO. Les regles
   `footer.hp-footer` ci-dessous, de meme specificite mais chargees apres,
   le neutralisent. Sans elles, le pied de page s'ecrase sur 108px.
   ============================================================ */
.hp-footer{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:64px 0 0}
footer.hp-footer{height:auto;display:block;align-items:initial;gap:0}
footer.hp-footer a{margin-left:0}
footer.hp-footer span{font-size:13px}
.hp-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
footer.hp-footer .hp-footer-logo{height:26px;width:auto;display:block;margin-bottom:24px}
.hp-baseline{font-family:var(--serif);font-size:24px;color:#fff;margin:0 0 8px;line-height:1.35}
.hp-footer p{font-size:13px;line-height:1.6;color:#bdb2cb;margin:0 0 8px;max-width:520px}
.hp-footer h4{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.085em;
  color:#c9a6ff;font-weight:600;margin:0 0 16px}
.hp-footer ul{list-style:none;padding:0;margin:0}
.hp-footer li{margin-bottom:8px}
.hp-footer a{font-size:13px;color:#ded7e6;text-decoration:none;transition:color .2s}
.hp-footer a:hover{color:#fff}
.hp-social{display:flex;gap:8px;margin-top:16px}
.hp-social a{width:40px;height:40px;border-radius:8px;border:1px solid #3a2b50;display:flex;
  align-items:center;justify-content:center;transition:border-color .2s,background .2s,transform .2s}
.hp-social a:hover{background:#1b112b;border-color:#5d4a7d;transform:translateY(-2px)}
.hp-social svg{width:16px;height:16px;fill:#ded7e6}
.hp-footer-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:48px;
  padding:24px 0;border-top:1px solid #3a2b50;font-size:13px;color:#9d94ab}
.hp-footer-bottom nav{margin-left:auto;display:flex;gap:16px;height:auto;background:none;border:0;position:static}
.hp-status{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;color:#c7bfd2}
.hp-status i{width:6px;height:6px;border-radius:50%;background:#15a16d;animation:hp-pulse 2.6s ease-out infinite}
.hp-status em{font-style:normal;color:#5b4c73}
@media(max-width:1100px){.hp-footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.hp-footer-grid{grid-template-columns:1fr;gap:32px}.hp-footer-bottom nav{margin-left:0}}
@media(prefers-reduced-motion:reduce){.hp-status i{animation:none}}

/* ============================================================
   DERNIERS ECARTS D'ECHELLE, mesures aux 5 largeurs
   1. Le titre d'ouverture etait en clamp(40px,4.6vw,64px) : entre les
      deux bornes il prend n'importe quelle valeur, 40px a 768 et 47px
      a 1024, donc hors des 8 paliers declares. Il passe en paliers
      discrets, verifiables a toute largeur.
   2. Les liens de la navigation viennent du partial du site et sont a
      15px. Cet ajustement disparaitra quand le partial passera lui-meme
      a la DA 2026, avec les 107 pages.
   ============================================================ */
.hero h1{font-size:36px}
@media(min-width:600px){.hero h1{font-size:48px}}
@media(min-width:1120px){.hero h1{font-size:64px}}
/* ⛔ NE PAS RAMENER LA NAVIGATION A 16px.
   Essaye le 05-09-2026 : les liens du partial sont a 15px en style en ligne,
   les passer a 16px avec !important a fait passer le nav de 76 a 100px de haut,
   sur TROIS lignes, a toutes les largeurs au-dessus de 1120px. Mesure a l'appui.
   Le nav a besoin de plus de place qu'il n'en a : c'est le meme piege que le
   seuil de bascule a 1120px. Le 15px de la navigation et du menu mobile reste
   donc hors echelle, et il le restera jusqu'a la refonte du partial lui-meme,
   qui devra retirer les largeurs et les tailles en ligne avant tout changement
   de corps. */

/* ============================================================
   PIED DE PAGE, ajustements demandes par David le 05-09-2026
   1. Les titres de colonne passent en blanc, comme le reste du
      pied de page. Le violet clair les mettait en retrait.
   2. Le logo passe de 26 a 32px, toujours sur la trame de 8.
   3. La barre du bas devient une grille de trois zones :
      copyright a gauche, disponibilite CENTREE, mentions a droite.
      Le centrage tient quelle que soit la longueur des trois blocs.
   ============================================================ */
.hp-footer h4{color:#fff}
footer.hp-footer .hp-footer-logo{height:32px}
.hp-footer-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.hp-footer-bottom>span:first-child{justify-self:start}
.hp-footer-bottom .hp-status{justify-self:center}
.hp-footer-bottom nav{justify-self:end;margin-left:0}
@media(max-width:900px){
  .hp-footer-bottom{grid-template-columns:1fr;justify-items:center;text-align:center;gap:16px}
  .hp-footer-bottom>span:first-child,.hp-footer-bottom nav{justify-self:center}
}

/* ============================================================
   COLONNE CONTACT du pied de page (05-09-2026)
   La colonne ne portait que deux liens et creusait un vide a droite.
   Elle recoit l'adresse, le courriel et le telephone, tels qu'ils sont
   publies dans les mentions legales, puis les deux icones sociales qui
   etaient sous le logo. « Studio podcast » rejoint la colonne Naviguer.
   ============================================================ */
.hp-coord{list-style:none;padding:0;margin:0 0 24px}
.hp-coord li{display:flex;align-items:flex-start;gap:8px;margin-bottom:16px;
  font-size:13px;line-height:1.6;color:#bdb2cb}
.hp-coord svg{width:16px;height:16px;fill:#c9a6ff;flex:0 0 16px;margin-top:2px}
.hp-coord a{font-size:13px;color:#ded7e6;text-decoration:none;transition:color .2s}
.hp-coord a:hover{color:#fff}
.hp-footer li svg{width:16px;height:16px;fill:#c9a6ff;vertical-align:-3px;margin-right:4px}
.hp-footer .hp-social{margin-top:0}

/* ============================================================
   SURVOL DES LIENS DU PIED DE PAGE (05-09-2026)
   landing.css porte `footer:not(.tk-footer) a:hover{color:var(--violet)}`,
   pense pour un pied de page CLAIR. Sur fond encre, le violet devient
   illisible. Cette regle a la meme specificite (0,2,2) et est chargee
   apres : le survol passe en blanc, dans tout le pied de page.
   ============================================================ */
footer.hp-footer a:hover,
footer.hp-footer a:focus-visible,
footer.hp-footer .hp-coord a:hover{color:#fff}
footer.hp-footer li a:hover svg,footer.hp-footer .hp-coord a:hover svg{fill:#fff}
/* Meme cause pour la couleur AU REPOS : `footer:not(.tk-footer) a{color:var(--muted)}`
   donnait #6B6380 sur fond encre, soit un contraste de 2,4 pour un seuil AA de 4,5.
   Les liens du pied de page passent a #DED7E6. */
footer.hp-footer a,footer.hp-footer .hp-coord a{color:#ded7e6;font-weight:400}
footer.hp-footer .hp-footer-bottom nav a{color:#bdb2cb}

/* ============================================================
   AVIS GOOGLE : 15 avis sans faire un mur (05-09-2026)
   Six avis visibles, les neuf autres derriere un bouton qui les
   deplie sur place. Le bandeau du pied de page, lui, les fait
   tous defiler. Le bouton disparait une fois deplie.
   ============================================================ */
.hp-reviews--plus{margin-top:0}
.hp-reviews--plus[hidden]{display:none}
.hp-plus{background:transparent;border:1px solid var(--line);color:var(--ink)}
.hp-plus:hover{background:var(--surface);border-color:#c8c1d1;color:var(--violet);box-shadow:none}
.hp-plus b{transition:transform .3s cubic-bezier(.22,.7,.25,1)}
.hp-plus[aria-expanded="true"] b{transform:rotate(180deg)}

/* ============================================================
   ⛔ REGRESSION TYPOGRAPHIQUE, corrigee le 05-09-2026
   `skeleton.css` porte `p, li, blockquote, figcaption, dd {font-family:Lora,serif}`.
   Je l'ai charge pour que la navigation et le pied de page du site s'affichent,
   et il a fait passer TOUT le corps de texte de la page en serif : les libelles
   des chiffres, les descriptions de metiers, les etapes, les puces des formules,
   les rangees d'expertises, les reponses de la FAQ, le pied de page.
   Mesure : 9 blocs sur 12 etaient en Lora au lieu d'Archivo.
   Ces regles (specificite 0,0,2 contre 0,0,1, et chargees apres) ramenent le
   corps de texte a Archivo, et ne laissent la serif QUE la ou la DA la veut.
   ⚠ Ne jamais charger skeleton.css sans ce correctif.
   ============================================================ */
body p, body li, body figcaption, body dd, body blockquote,
body summary, body cite, body small, body span{font-family:var(--ui)}

/* Les quatre endroits ou la serif est voulue par la direction artistique :
   l'accent italique des titres, le chapo du constat, la signature du pied de
   page, et les citations du bandeau d'avis. */
h1 em, h2 em, h3 em,
.hp-rowlist>div:first-child p,
.hp-baseline,
.tk-avis__txt{font-family:var(--serif)}

/* ============================================================
   MÉTIERS, refonte du 05-09-2026
   L'ancienne version prenait 800px pour huit liens : un rail de famille
   vide sur toute la hauteur a gauche, deux colonnes tres aerees, et le
   mot « Découvrir » repete huit fois. Ici, huit tuiles cliquables en
   entier sur quatre colonnes, la famille en libelle mono au-dessus de
   chaque rangee, et la fleche qui n'apparait qu'au survol.
   ============================================================ */
.hp-metiers{margin-top:48px}
.hp-famille{color:var(--light);margin:0 0 16px}
.hp-famille+.hp-tuiles{margin-bottom:48px}
.hp-tuiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hp-tuile{position:relative;display:block;background:var(--card);border:1px solid var(--line);
  border-radius:9px;padding:24px;text-decoration:none;overflow:hidden;
  transition:transform .25s cubic-bezier(.22,.7,.25,1),box-shadow .25s,border-color .25s}
.hp-tuile:before{content:'';position:absolute;left:0;top:0;width:4px;height:100%;background:var(--violet);
  transform:scaleY(0);transform-origin:bottom;transition:transform .3s cubic-bezier(.22,.7,.25,1)}
.hp-tuile:hover{transform:translateY(-4px);border-color:#ddd6e8;
  box-shadow:0 4px 10px rgba(37,17,74,.06),0 20px 40px rgba(37,17,74,.1)}
.hp-tuile:hover:before{transform:scaleY(1);transform-origin:top}
.hp-tuile h3{font-size:16px;line-height:1.35;font-weight:700;color:var(--ink);margin:0 0 8px;
  padding-right:24px}
.hp-tuile p{font-size:13px;line-height:1.6;color:var(--muted);margin:0;max-width:none}
.hp-fleche{position:absolute;right:16px;top:24px;width:16px;height:16px;fill:none;
  stroke:var(--violet);stroke-width:2;opacity:0;transform:translateX(-6px);
  transition:opacity .25s,transform .25s cubic-bezier(.22,.7,.25,1)}
.hp-tuile:hover .hp-fleche{opacity:1;transform:none}
@media(max-width:1100px){.hp-tuiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.hp-tuiles{grid-template-columns:1fr}.hp-famille+.hp-tuiles{margin-bottom:32px}}
@media(prefers-reduced-motion:reduce){
  .hp-tuile,.hp-tuile:before,.hp-fleche{transition:none}
  .hp-fleche{opacity:1;transform:none}
}

/* Les etoiles du bandeau d'avis ne passent pas par la revelation au defilement :
   ma regle `.hp-stars svg{opacity:0}` les laissait invisibles pour toujours.
   Dans le bandeau, elles sont visibles d'emblee. */
.tk-avis .hp-stars svg{opacity:1;transform:none;transition:none}

/* La phrase d'accroche de chaque carte de service : c'est le point qui fait mal,
   posé avant la liste de ce que je fais. Elle doit se lire avant les puces. */
.hp-point{font-family:var(--serif);font-size:16px;line-height:1.45;color:#fff;
  margin:0 0 24px;padding-left:16px;border-left:2px solid #c9a6ff;max-width:none}
.hp-featured .hp-point{border-left-color:#fff}
.hp-offer ul{justify-content:flex-start}
.hp-offer li b{color:#fff;font-weight:700}
.hp-featured li b{color:#fff}