/* ============================================================
   KEYSTON PALE — Feuille de style dédiée à la page d'accueil
   Chargée uniquement par index.html, après styles.css.
   Toutes les classes sont préfixées "hp-" : aucun impact sur
   les autres pages du site.
   ============================================================ */

:root{
  --hp-white:#FFFFFF;
  --hp-ivory:#FBF8F2;
  --hp-ivory-2:#F6F0E4;
  --hp-ivory-3:#EFE7D6;
  --hp-ink:#1B1916;
  --hp-ink-2:#3A352E;
  --hp-muted:#6C665C;
  --hp-muted-2:#6C665C;
  --hp-gold:#C9974D;
  --hp-gold-deep:#8A6524;
  --hp-gold-light:#E7C994;
  --hp-gold-pale:#F3E4C8;
  --hp-line: rgba(27,25,22,.10);
  --hp-line-2: rgba(27,25,22,.06);
  --hp-gold-line: rgba(162,115,44,.28);

  /* Ombres en couches — la profondeur vient de l'empilement, jamais d'une ombre unique */
  --hp-sh-1: 0 1px 1px rgba(27,25,22,.04), 0 3px 6px rgba(27,25,22,.035), 0 12px 24px -10px rgba(27,25,22,.10);
  --hp-sh-2: 0 1px 2px rgba(27,25,22,.05), 0 8px 18px rgba(27,25,22,.055), 0 28px 52px -20px rgba(27,25,22,.16);
  --hp-sh-3: 0 2px 4px rgba(27,25,22,.06), 0 16px 32px rgba(27,25,22,.07), 0 48px 88px -28px rgba(27,25,22,.22);
  --hp-bevel: inset 0 1px 0 rgba(255,255,255,.92);
  --hp-bevel-dark: inset 0 1px 0 rgba(255,255,255,.10);
}

/* ---------- TYPOGRAPHIE ----------
   Sélecteurs volontairement de faible spécificité (une seule classe) :
   les règles de section plus bas doivent pouvoir les surcharger. */
.hp-home{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--hp-white);
  color: var(--hp-ink-2);
  font-feature-settings:'kern' 1, 'liga' 1, 'calt' 1;
}
.hp-home h1,
.hp-home h2,
.hp-home h3,
.hp-home h4,
.hp-home .hp-serif{
  font-family:'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  font-variation-settings:'SOFT' 0, 'WONK' 0;
  font-weight:500;
  letter-spacing:-0.018em;
  color: var(--hp-ink);
  line-height:1.1;
}

/* ---------- BLOCS DE SECTION ---------- */
.hp-sec{ position:relative; padding:100px 0; border-top:none; background:var(--hp-white); }
.hp-sec--ivory{ background: linear-gradient(180deg, var(--hp-ivory) 0%, var(--hp-ivory-2) 100%); }
.hp-sec--dark{ background: #16140F; color: rgba(255,255,255,.78); }
.hp-sec--tight{ padding:88px 0; }
@media (max-width:900px){ .hp-sec{ padding:76px 0; } .hp-sec--tight{ padding:64px 0; } }
@media (max-width:640px){ .hp-sec{ padding:58px 0; } .hp-sec--tight{ padding:48px 0; } }

/* Filet de séparation doré, très fin, entre deux sections claires */
.hp-rule{ height:1px; background:linear-gradient(90deg, transparent, var(--hp-gold-line) 22%, var(--hp-gold-line) 78%, transparent); }

/* Ornement losange centré entre certaines sections */
.hp-orn{ display:flex; align-items:center; justify-content:center; gap:14px; padding:0 0 6px; }
.hp-orn i{ display:block; width:5px; height:5px; background:var(--hp-gold); transform:rotate(45deg); opacity:.55; }
.hp-orn span{ display:block; width:64px; height:1px; background:var(--hp-gold-line); }

.hp-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color: var(--hp-gold-deep);
}
.hp-eyebrow::before{ content:""; width:22px; height:1px; background:var(--hp-gold); flex-shrink:0; }
.hp-sec--dark .hp-eyebrow{ color: var(--hp-gold-light); }

.hp-head{ max-width:760px; }
.hp-head.is-center{ margin:0 auto; text-align:center; }
.hp-head.is-center .hp-eyebrow{ justify-content:center; }
.hp-h2{ font-size:clamp(30px,3.7vw,46px); margin-top:20px; line-height:1.12; }
.hp-lede{ margin-top:20px; font-size:17px; line-height:1.65; color:var(--hp-muted); max-width:620px; }
.hp-head.is-center .hp-lede{ margin-left:auto; margin-right:auto; }
.hp-sec--dark .hp-h2,
.hp-sec--dark h2, .hp-sec--dark h3, .hp-sec--dark h4{ color:#fff; }
.hp-sec--dark .hp-lede{ color: rgba(255,255,255,.66); }
.hp-em{ font-style:italic; color:var(--hp-gold-deep); font-variation-settings:'SOFT' 0, 'WONK' 1; }
.hp-sec--dark .hp-em{ color:var(--hp-gold-light); }

/* ============================================================
   HERO
   ============================================================ */
.hp-hero{
  position:relative; overflow:hidden;
  padding:96px 0 104px;
  background:
    radial-gradient(900px 480px at 78% 8%, rgba(201,151,77,.16) 0%, rgba(201,151,77,0) 62%),
    radial-gradient(700px 420px at 8% 92%, rgba(201,151,77,.07) 0%, rgba(201,151,77,0) 60%),
    linear-gradient(178deg, var(--hp-ivory) 0%, #FFFFFF 68%);
}
@media (max-width:980px){ .hp-hero{ padding:64px 0 72px; } }

/* Gravure guilloché — texture de fond très discrète, façon papier fiduciaire */
.hp-hero-engrave{
  position:absolute; inset:auto -6% -18% auto; right:-6%; top:-12%;
  width:min(760px, 68vw); height:min(760px, 68vw);
  opacity:.5; pointer-events:none; z-index:0;
  mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
}
@media (max-width:980px){ .hp-hero-engrave{ opacity:.32; top:-20%; right:-30%; } }

.hp-hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1.06fr .94fr; gap:60px; align-items:center;
}
.hp-hero-grid > *{ min-width:0; }
@media (max-width:1040px){ .hp-hero-grid{ grid-template-columns:1fr; gap:52px; } }
@media (max-width:1040px){ .hp-dossier{ max-width:520px; } }

.hp-status{
  display:inline-flex; align-items:center; gap:10px;
  background: rgba(255,255,255,.86);
  border:1px solid var(--hp-line);
  box-shadow: var(--hp-sh-1), var(--hp-bevel);
  border-radius:999px; padding:8px 18px 8px 13px;
  font-size:12.5px; color:var(--hp-muted); font-weight:500;
  backdrop-filter: blur(6px);
}
.hp-status .hp-dot{ width:7px; height:7px; border-radius:50%; background:var(--hp-muted-2); flex-shrink:0; position:relative; }
.hp-status .hp-dot.online{ background:#2E9E58; box-shadow:0 0 0 3px rgba(46,158,88,.16); animation: hpPulse 2.4s ease-in-out infinite; }
.hp-status .hp-dot.offline{ background:var(--hp-muted-2); box-shadow:0 0 0 3px rgba(108,102,92,.12); }
@keyframes hpPulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(46,158,88,.16); } 50%{ box-shadow:0 0 0 6px rgba(46,158,88,.04); } }

.hp-h1{
  margin-top:28px;
  font-size:clamp(38px,4.9vw,60px);
  line-height:1.03; letter-spacing:-0.028em;
  font-weight:500;
}
/* Soulignement doré dégradé, dessiné en fond : il suit proprement chaque ligne
   quand le titre passe sur deux lignes (pas de ::after absolu qui déborde). */
.hp-h1 .hp-accent{
  color:var(--hp-gold-deep);
  padding-bottom:.1em;
  background-image:linear-gradient(90deg, rgba(162,115,44,.10), rgba(201,151,77,.85) 22%, rgba(231,201,148,.9) 68%, rgba(162,115,44,.08));
  background-repeat:no-repeat;
  background-size:100% 2px;
  background-position:0 100%;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.hp-hero-sub{ margin-top:26px; font-size:17.5px; line-height:1.68; color:var(--hp-muted); max-width:540px; }
.hp-hero-actions{ margin-top:34px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

/* Boutons — reliefs internes, coins nets, jamais de pilule */
.hp-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 30px; border-radius:7px;
  font-size:14.5px; font-weight:600; letter-spacing:.005em;
  border:none; cursor:pointer; position:relative; overflow:hidden;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
}
.hp-btn .hp-arw{ transition: transform .22s cubic-bezier(.2,.7,.3,1); }
.hp-btn:hover .hp-arw{ transform:translateX(3px); }
.hp-btn--gold{
  background:linear-gradient(178deg, #DCAE65 0%, var(--hp-gold) 52%, #B98A3F 100%);
  color:#241D10;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 5px rgba(120,84,32,.36),
    0 1px 2px rgba(27,25,22,.10),
    0 10px 22px -8px rgba(162,115,44,.55);
}
.hp-btn--gold:hover{ transform:translateY(-1.5px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 5px rgba(120,84,32,.3), 0 2px 4px rgba(27,25,22,.10), 0 18px 34px -10px rgba(162,115,44,.6); }
.hp-btn--gold:active{ transform:translateY(0); box-shadow: inset 0 2px 6px rgba(110,76,26,.45); }
/* Reflet spéculaire qui balaie le bouton au survol */
.hp-btn--gold::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform:skewX(-16deg); opacity:0; transition:none;
}
.hp-btn--gold:hover::after{ animation: hpSheen .85s cubic-bezier(.25,.6,.3,1) forwards; }
@keyframes hpSheen{ from{ left:-60%; opacity:.9; } to{ left:120%; opacity:0; } }

.hp-btn--ghost{
  background: rgba(255,255,255,.7); color:var(--hp-ink);
  border:1px solid var(--hp-line);
  box-shadow: var(--hp-bevel), 0 1px 2px rgba(27,25,22,.05), 0 6px 14px -8px rgba(27,25,22,.18);
}
.hp-btn--ghost:hover{ border-color:var(--hp-gold-line); color:var(--hp-gold-deep); transform:translateY(-1.5px); box-shadow: var(--hp-bevel), 0 2px 4px rgba(27,25,22,.06), 0 14px 26px -12px rgba(27,25,22,.22); }
.hp-sec--dark .hp-btn--ghost{ background:rgba(255,255,255,.05); color:#fff; border-color:rgba(255,255,255,.20); box-shadow: var(--hp-bevel-dark); }
.hp-sec--dark .hp-btn--ghost:hover{ border-color:var(--hp-gold); color:var(--hp-gold-light); }

.hp-hero-proof{ margin-top:38px; display:flex; gap:14px 24px; flex-wrap:wrap; }
.hp-hero-proof div{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--hp-muted); }
.hp-hero-proof svg{ flex-shrink:0; color:var(--hp-gold-deep); }

/* --- Visuel "dossier" du hero : empilement de cartes avec reflet --- */
.hp-dossier{ position:relative; }
.hp-dossier-back{
  position:absolute; top:-22px; right:14px; left:44px; height:90px;
  background:linear-gradient(180deg, #fff, var(--hp-ivory));
  border:1px solid var(--hp-line); border-radius:14px;
  box-shadow: var(--hp-sh-1); transform:rotate(-1.6deg); z-index:0;
}
.hp-card-dossier{
  position:relative; z-index:1;
  background:linear-gradient(180deg, #FFFFFF 0%, #FDFBF7 100%);
  border:1px solid var(--hp-line);
  border-radius:16px; padding:30px 30px 26px;
  box-shadow: var(--hp-sh-3), var(--hp-bevel);
  overflow:hidden;
}
/* liseré doré supérieur + reflet de surface */
.hp-card-dossier::before{
  content:""; position:absolute; top:0; left:24px; right:24px; height:2px;
  background:linear-gradient(90deg, transparent, var(--hp-gold) 30%, var(--hp-gold-light) 55%, transparent);
}
.hp-card-dossier::after{
  content:""; position:absolute; top:-40%; left:-30%; width:80%; height:180%;
  background:linear-gradient(104deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  transform:rotate(8deg); pointer-events:none;
}
.hp-dos-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.hp-dos-k{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--hp-muted-2); font-weight:600; }
.hp-dos-t{ font-size:20px; margin-top:8px; }
.hp-seal{
  flex-shrink:0; width:46px; height:46px; border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, #F0D6A6 0%, var(--hp-gold) 52%, #9A6C27 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7), inset 0 -2px 4px rgba(110,76,26,.5), 0 4px 10px -3px rgba(162,115,44,.55);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', Georgia, serif; font-size:15px; font-weight:600; color:#3A2A10; letter-spacing:.02em;
}
.hp-dos-list{ margin-top:26px; display:flex; flex-direction:column; }
.hp-dos-row{
  display:flex; align-items:center; gap:14px; padding:15px 0;
  border-top:1px solid var(--hp-line-2);
}
.hp-dos-row:first-child{ border-top:none; }
.hp-dos-mark{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--hp-gold-pale); color:var(--hp-gold-deep);
  box-shadow: inset 0 0 0 1px rgba(162,115,44,.22);
}
.hp-dos-row.is-todo .hp-dos-mark{ background:var(--hp-ivory-2); color:var(--hp-muted-2); box-shadow: inset 0 0 0 1px var(--hp-line); }
/* Ne cible que le bloc texte : la pastille doit rester en flex,
   sans quoi son icône se cale en haut à gauche au lieu d'être centrée. */
.hp-dos-row > span:not(.hp-dos-mark){ display:block; min-width:0; }
.hp-dos-mark{ display:flex; align-items:center; justify-content:center; }
.hp-dos-label{ display:block; font-size:14.5px; font-weight:500; color:var(--hp-ink); line-height:1.35; }
.hp-dos-sub{ display:block; font-size:12.5px; color:var(--hp-muted-2); margin-top:3px; line-height:1.45; }
.hp-dos-foot{
  margin-top:22px; padding-top:20px; border-top:1px solid var(--hp-line-2);
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.hp-dos-foot .hp-dos-k{ max-width:200px; }
.hp-dos-foot .hp-dos-k{ line-height:1.5; }
.hp-dos-badge{
  font-size:11.5px; font-weight:600; color:var(--hp-gold-deep);
  background:var(--hp-gold-pale); border:1px solid rgba(162,115,44,.22);
  padding:6px 12px; border-radius:6px; box-shadow: var(--hp-bevel);
}
/* Reflet porté sous la carte */
.hp-dossier-glow{
  position:absolute; left:12%; right:12%; bottom:-26px; height:44px; z-index:0;
  background:radial-gradient(closest-side, rgba(162,115,44,.24), transparent 78%);
  filter:blur(10px);
}

/* ============================================================
   BANDEAU DE CONFIANCE
   ============================================================ */
.hp-trust{ background:var(--hp-white); border-top:1px solid var(--hp-line-2); border-bottom:1px solid var(--hp-line-2); }
.hp-trust-row{ display:grid; grid-template-columns:repeat(4,1fr); }
@media (max-width:860px){ .hp-trust-row{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .hp-trust-row{ grid-template-columns:1fr; } }
.hp-stat{ padding:34px 28px; position:relative; text-align:center; }
.hp-stat + .hp-stat::before{
  content:""; position:absolute; left:0; top:26px; bottom:26px; width:1px;
  background:linear-gradient(180deg, transparent, var(--hp-line), transparent);
}
@media (max-width:860px){ .hp-stat:nth-child(3)::before{ display:none; } }
@media (max-width:520px){ .hp-stat + .hp-stat::before{ display:none; } .hp-stat + .hp-stat{ border-top:1px solid var(--hp-line-2); } }
.hp-stat-ico{ display:inline-flex; color:var(--hp-gold-deep); opacity:.9; }
.hp-stat-num{ font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:34px; color:var(--hp-ink); margin-top:10px; letter-spacing:-0.02em; line-height:1; }
.hp-stat-lab{ margin-top:10px; font-size:12.5px; line-height:1.55; color:var(--hp-muted); max-width:230px; margin-left:auto; margin-right:auto; }

/* ============================================================
   PRINCIPE — deux approches face à face
   ============================================================ */
.hp-versus{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:52px; position:relative; }
@media (max-width:860px){ .hp-versus{ grid-template-columns:1fr; gap:18px; } }
.hp-vs-card{ border-radius:16px; padding:34px 32px; position:relative; }
@media (max-width:640px){ .hp-vs-card{ padding:26px 22px; } }
.hp-vs-card.is-common{
  background:linear-gradient(180deg, var(--hp-ivory-2), var(--hp-ivory-3));
  border:1px solid var(--hp-line);
  box-shadow: inset 0 2px 6px rgba(27,25,22,.06);
  color:var(--hp-muted);
}
.hp-vs-card.is-ours{
  background:linear-gradient(180deg, #fff, #FDFBF7);
  border:1px solid var(--hp-gold-line);
  box-shadow: var(--hp-sh-2), var(--hp-bevel);
}
.hp-vs-card.is-ours::before{
  content:""; position:absolute; top:0; left:28px; right:28px; height:2px;
  background:linear-gradient(90deg, transparent, var(--hp-gold), transparent);
}
.hp-vs-k{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--hp-muted-2); }
.hp-vs-card.is-ours .hp-vs-k{ color:var(--hp-gold-deep); }
.hp-vs-t{ font-size:21px; margin-top:12px; color:var(--hp-ink); }
.hp-vs-card.is-common .hp-vs-t{ color:var(--hp-ink-2); }
.hp-vs-list{ margin-top:20px; display:flex; flex-direction:column; gap:13px; }
.hp-vs-list li{ display:flex; gap:11px; font-size:14.5px; line-height:1.55; }
.hp-vs-list svg{ flex-shrink:0; margin-top:3px; }
.hp-vs-card.is-common .hp-vs-list svg{ color:var(--hp-muted-2); }
.hp-vs-card.is-ours .hp-vs-list svg{ color:var(--hp-gold-deep); }
.hp-vs-card.is-ours .hp-vs-list li{ color:var(--hp-ink-2); }

/* ============================================================
   PROFILS
   ============================================================ */
.hp-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:52px; }
@media (max-width:1000px){ .hp-grid-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .hp-grid-4{ grid-template-columns:1fr; } }
.hp-tile{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, #fff, #FDFBF8);
  border:1px solid var(--hp-line);
  border-radius:14px; padding:28px 26px 26px;
  box-shadow: var(--hp-sh-1), var(--hp-bevel);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
}
.hp-tile::before{
  content:""; position:absolute; top:0; left:20px; right:20px; height:2px;
  background:linear-gradient(90deg, transparent, var(--hp-gold), transparent);
  opacity:0; transition:opacity .28s ease;
}
.hp-tile:hover{ transform:translateY(-4px); box-shadow: var(--hp-sh-2), var(--hp-bevel); border-color:var(--hp-gold-line); }
.hp-tile:hover::before{ opacity:1; }
.hp-tile-ico{
  width:44px; height:44px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, #fff, var(--hp-ivory-2));
  border:1px solid var(--hp-line);
  box-shadow: var(--hp-bevel), 0 2px 5px rgba(27,25,22,.05);
  color:var(--hp-gold-deep);
}
.hp-tile h3{ font-size:18px; margin-top:20px; }
.hp-tile p{ margin-top:11px; font-size:14px; line-height:1.6; color:var(--hp-muted); }
.hp-tile-tag{
  margin-top:18px; display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600; color:var(--hp-gold-deep);
  padding-top:14px; border-top:1px solid var(--hp-line-2); width:100%;
}
.hp-tile-tag .hp-arw{ transition:transform .22s ease; }
.hp-tile:hover .hp-tile-tag .hp-arw{ transform:translateX(3px); }

/* ============================================================
   MÉTHODE — section sombre
   ============================================================ */
.hp-sec--dark{
  background:
    radial-gradient(760px 420px at 84% 6%, rgba(201,151,77,.15), transparent 62%),
    radial-gradient(620px 380px at 6% 96%, rgba(201,151,77,.08), transparent 60%),
    #16140F;
}
.hp-steps{ margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
@media (max-width:960px){ .hp-steps{ grid-template-columns:1fr 1fr; gap:28px 0; } }
@media (max-width:560px){ .hp-steps{ grid-template-columns:1fr; gap:0; } }
/* la ligne dorée qui relie les étapes */
/* La ligne s'arrête exactement au centre du premier et du dernier jeton */
.hp-steps::before{
  content:""; position:absolute; top:26px; height:1px;
  left:50px; right:calc(25% - 50px);
  background:linear-gradient(90deg, var(--hp-gold), var(--hp-gold));
  opacity:.35;
}
@media (max-width:960px){ .hp-steps::before{ display:none; } }
.hp-step{ position:relative; padding:0 24px; }
@media (max-width:560px){ .hp-step{ padding:26px 0; border-top:1px solid rgba(255,255,255,.10); } .hp-step:first-child{ border-top:none; padding-top:0; } }
.hp-step-n{
  position:relative; z-index:1;
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', Georgia, serif; font-size:17px; font-weight:600; color:var(--hp-gold-light);
  background:linear-gradient(180deg, #221F18, #191712);
  border:1px solid rgba(201,151,77,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 6px #16140F, 0 8px 20px -8px rgba(201,151,77,.5);
}
.hp-step h3{ color:#fff; font-size:18.5px; margin-top:24px; }
.hp-step p{ margin-top:11px; font-size:14px; line-height:1.65; color:rgba(255,255,255,.62); }
.hp-dark-note{
  margin-top:52px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:22px 26px; border-radius:12px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09);
  box-shadow: var(--hp-bevel-dark);
  font-size:14px; color:rgba(255,255,255,.7);
}
.hp-dark-note strong{ color:#fff; font-weight:600; }
.hp-dark-note .hp-btn{ margin-left:auto; }
@media (max-width:700px){ .hp-dark-note .hp-btn{ margin-left:0; } }

/* ============================================================
   CRITÈRES
   ============================================================ */
.hp-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px; }
@media (max-width:900px){ .hp-grid-3{ grid-template-columns:1fr; } }
.hp-note{
  margin-top:26px; padding:20px 24px; border-radius:12px;
  background:var(--hp-white); border:1px solid var(--hp-line);
  border-left:3px solid var(--hp-gold);
  box-shadow: var(--hp-sh-1), var(--hp-bevel);
  font-size:14px; line-height:1.65; color:var(--hp-muted);
}

/* ============================================================
   BANDEAU DIAGNOSTIC (or)
   ============================================================ */
.hp-gold-band{ padding:0; background:var(--hp-white); border:none; }
.hp-gold-inner{
  position:relative; overflow:hidden;
  border-radius:22px; padding:64px 56px; text-align:center;
  background:
    radial-gradient(600px 300px at 50% -10%, rgba(255,255,255,.5), transparent 70%),
    linear-gradient(168deg, #F6E6C7 0%, #EBD3A4 46%, #DFC08A 100%);
  border:1px solid rgba(162,115,44,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -18px 40px -22px rgba(120,84,32,.45),
    var(--hp-sh-3);
}
@media (max-width:700px){ .hp-gold-inner{ padding:44px 24px; border-radius:16px; } }
.hp-gold-inner::after{
  content:""; position:absolute; top:-60%; left:-20%; width:60%; height:220%;
  background:linear-gradient(102deg, transparent 44%, rgba(255,255,255,.35) 50%, transparent 56%);
  transform:rotate(6deg); pointer-events:none;
}
.hp-gold-inner .hp-eyebrow{ color:#7A5518; justify-content:center; }
.hp-gold-inner .hp-eyebrow::before{ background:#7A5518; }
.hp-gold-t{ font-size:clamp(28px,3.6vw,44px); margin-top:20px; color:#2B2110; max-width:720px; margin-left:auto; margin-right:auto; }
.hp-gold-sub{ margin-top:20px; font-size:16.5px; line-height:1.65; color:#5A451F; max-width:600px; margin-left:auto; margin-right:auto; }
.hp-gold-actions{ margin-top:34px; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; position:relative; z-index:1; }
.hp-gold-inner .hp-btn--gold{ background:linear-gradient(178deg, #2A2318 0%, #1B1611 100%); color:#F2E2C2; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 4px rgba(60,42,16,.2), 0 14px 28px -12px rgba(43,33,16,.6); }
.hp-gold-inner .hp-btn--gold:hover{ background:linear-gradient(178deg, #352C1E 0%, #221C15 100%); }
.hp-gold-inner .hp-btn--ghost{ background:rgba(255,255,255,.6); border-color:rgba(122,85,24,.35); color:#4A3714; }
.hp-gold-inner .hp-btn--ghost:hover{ border-color:#7A5518; color:#2B2110; }
.hp-gold-note{ margin-top:20px; font-size:12.5px; color:#6E5423; position:relative; z-index:1; }

/* ============================================================
   CONFIDENTIALITÉ
   ============================================================ */
.hp-split{ display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:52px; border-radius:16px; overflow:hidden; border:1px solid var(--hp-line); box-shadow: var(--hp-sh-2); }
@media (max-width:820px){ .hp-split{ grid-template-columns:1fr; } }
.hp-split > div{ padding:38px 34px; background:linear-gradient(180deg, #fff, #FDFBF7); }
@media (max-width:640px){ .hp-split > div{ padding:28px 22px; } }
.hp-split > div + div{ border-left:1px solid var(--hp-line); }
@media (max-width:820px){ .hp-split > div + div{ border-left:none; border-top:1px solid var(--hp-line); } }
.hp-split h4{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--hp-gold-deep); font-family:'Inter', sans-serif; font-weight:600; }
.hp-split p{ margin-top:16px; font-size:17px; line-height:1.6; color:var(--hp-ink-2); }

/* ============================================================
   GUIDES
   ============================================================ */
.hp-guides{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; }
@media (max-width:900px){ .hp-guides{ grid-template-columns:1fr; } }
.hp-guide{
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  background:linear-gradient(180deg, #fff, #FDFBF8);
  border:1px solid var(--hp-line); border-radius:14px; padding:26px 24px 24px;
  box-shadow: var(--hp-sh-1), var(--hp-bevel);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
}
.hp-guide:hover{ transform:translateY(-4px); border-color:var(--hp-gold-line); box-shadow: var(--hp-sh-2), var(--hp-bevel); }
.hp-guide-k{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--hp-gold-deep); }
.hp-guide h3{ font-size:18px; margin-top:14px; line-height:1.25; }
.hp-guide p{ margin-top:12px; font-size:14px; line-height:1.6; color:var(--hp-muted); flex:1; }
.hp-guide-more{ margin-top:20px; padding-top:16px; border-top:1px solid var(--hp-line-2); font-size:13px; font-weight:600; color:var(--hp-gold-deep); display:inline-flex; align-items:center; gap:7px; }
.hp-guide:hover .hp-arw{ transform:translateX(3px); }

/* ============================================================
   FAQ
   ============================================================ */
.hp-faq{ margin-top:44px; border-top:1px solid var(--hp-line); }
.hp-faq .faq-item{ border-top:none; border-bottom:1px solid var(--hp-line); }
.hp-faq .faq-item:last-child{ border-bottom:1px solid var(--hp-line); }
.hp-faq .faq-q{
  font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:18.5px; color:var(--hp-ink);
  padding:26px 0; letter-spacing:-0.012em; transition:color .2s ease;
}
.hp-faq .faq-q:hover{ color:var(--hp-gold-deep); }
.hp-faq .faq-q .plus{
  font-family:'Inter', sans-serif; font-size:18px; color:var(--hp-gold-deep); font-weight:400;
  width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--hp-ivory-2); border:1px solid var(--hp-line); box-shadow: var(--hp-bevel);
}
.hp-faq .faq-a p{ font-size:15px; line-height:1.7; color:var(--hp-muted); padding-bottom:26px; max-width:680px; }

/* ============================================================
   CTA FINAL
   ============================================================ */
.hp-final{ text-align:center; }
.hp-final .hp-h2{ max-width:720px; margin-left:auto; margin-right:auto; font-size:clamp(30px,4vw,50px); }
.hp-final .hp-sub{ margin-top:22px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.48); }
.hp-final .hp-hero-actions{ justify-content:center; margin-top:36px; }

/* ---------- APPARITIONS ----------
   On réutilise le mécanisme global (.reveal → .in-view géré par site.js)
   et on ajoute uniquement un décalage pour les entrées en cascade. */
.reveal.hp-d1{ transition-delay:.08s; }
.reveal.hp-d2{ transition-delay:.16s; }
.reveal.hp-d3{ transition-delay:.24s; }
.reveal.hp-d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal.hp-d1, .reveal.hp-d2, .reveal.hp-d3, .reveal.hp-d4{ transition-delay:0s; }
  .hp-btn--gold:hover::after{ animation:none; }
}

/* ============================================================
   V2 — AMÉLIORATIONS
   1. Frise de preuves (remplace le bandeau de compteurs)
   2. Rythmes différenciés : profils asymétriques, critères éditoriaux
   3. Moment visuel : document gravé + tampon, échelle typographique
   4. Finitions : nav, micro-interactions, focus clavier
   ============================================================ */

/* ---------- 4. Harmonisation du menu avec la typographie de la page ---------- */
.hp-home header.nav .mark-text,
.hp-home .nav-links a,
.hp-home .lang-switch,
.hp-home #site-footer{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.hp-home header.nav .mark-text{ letter-spacing:-0.025em; font-weight:700; }

/* Anneau de focus clavier, cohérent sur tous les boutons de la page */
.hp-btn:focus-visible,
.hp-guide:focus-visible{ outline:2px solid var(--hp-gold-deep); outline-offset:3px; border-radius:8px; }

/* ---------- Échelle typographique : un cran au-dessus pour les manifestes ---------- */
.hp-h2--xl{ font-size:clamp(34px,5.1vw,62px); line-height:1.06; }

/* ============================================================
   1. FRISE DE PREUVES
   ============================================================ */
.hp-proofband{
  background:var(--hp-white);
  border-top:1px solid var(--hp-line-2);
  border-bottom:1px solid var(--hp-line-2);
  position:relative;
}
.hp-proofband::before,
.hp-proofband::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--hp-gold-line) 25%, var(--hp-gold-line) 75%, transparent);
}
.hp-proofband::before{ top:-1px; }
.hp-proofband::after{ bottom:-1px; }
.hp-proof-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .hp-proof-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .hp-proof-grid{ grid-template-columns:1fr; } }
.hp-proof{ padding:38px 30px; position:relative; }
@media (max-width:640px){ .hp-proof{ padding:28px 8px; } }
.hp-proof + .hp-proof::before{
  content:""; position:absolute; left:0; top:30px; bottom:30px; width:1px;
  background:linear-gradient(180deg, transparent, var(--hp-line), transparent);
}
@media (max-width:900px){ .hp-proof:nth-child(3)::before{ display:none; } }
@media (max-width:560px){
  .hp-proof + .hp-proof::before{ display:none; }
  .hp-proof + .hp-proof{ border-top:1px solid var(--hp-line-2); }
}
.hp-proof-n{
  font-family:'Fraunces', Georgia, serif; font-size:13px; font-weight:600;
  color:var(--hp-gold-deep); letter-spacing:.18em; display:inline-block;
}
.hp-proof h3{ font-size:20px; margin-top:12px; line-height:1.25; }
.hp-proof p{ margin-top:9px; font-size:13.5px; line-height:1.55; color:var(--hp-muted); }

/* ============================================================
   2a. PROFILS — composition asymétrique
   ============================================================ */
.hp-asym{ display:grid; grid-template-columns:1.02fr 1fr; gap:34px; margin-top:52px; align-items:start; }
@media (max-width:960px){ .hp-asym{ grid-template-columns:1fr; gap:26px; } }

.hp-feature{
  position:relative; overflow:hidden;
  background:linear-gradient(168deg, #FFFFFF 0%, #FDFAF4 60%, #FBF6EC 100%);
  border:1px solid var(--hp-gold-line);
  border-radius:18px; padding:38px 36px 34px;
  box-shadow: var(--hp-sh-2), var(--hp-bevel);
}
@media (max-width:640px){ .hp-feature{ padding:28px 22px; } }
.hp-feature::before{
  content:""; position:absolute; top:0; left:30px; right:30px; height:2px;
  background:linear-gradient(90deg, transparent, var(--hp-gold), var(--hp-gold-light), transparent);
}
.hp-feature::after{
  content:""; position:absolute; top:-45%; left:-25%; width:70%; height:190%;
  background:linear-gradient(104deg, transparent 44%, rgba(255,255,255,.5) 50%, transparent 56%);
  transform:rotate(7deg); pointer-events:none;
}
.hp-feature-k{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--hp-gold-deep); }
.hp-feature-ico{
  width:54px; height:54px; border-radius:14px; margin-bottom:22px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, #fff, var(--hp-ivory-2));
  border:1px solid var(--hp-line);
  box-shadow: var(--hp-bevel), 0 3px 8px rgba(27,25,22,.07);
  color:var(--hp-gold-deep);
}
.hp-feature h3{ font-size:26px; margin-top:14px; line-height:1.18; }
.hp-feature p{ margin-top:14px; font-size:15px; line-height:1.65; color:var(--hp-muted); max-width:420px; }
.hp-feature-tag{
  margin-top:24px; padding-top:18px; border-top:1px solid var(--hp-line-2);
  font-size:12.5px; font-weight:600; color:var(--hp-gold-deep);
  display:flex; align-items:center; gap:8px;
}

.hp-rows{ display:flex; flex-direction:column; }
.hp-row{
  display:flex; gap:18px; align-items:flex-start;
  padding:22px 20px; border-radius:12px;
  border-bottom:1px solid var(--hp-line-2);
  transition: background .24s ease, transform .24s cubic-bezier(.2,.7,.3,1);
}
.hp-row:last-child{ border-bottom:none; }
.hp-row:hover{ background:var(--hp-white); transform:translateX(4px); box-shadow: var(--hp-sh-1); border-bottom-color:transparent; }
.hp-row-ico{
  flex-shrink:0; width:40px; height:40px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, #fff, var(--hp-ivory-2));
  border:1px solid var(--hp-line); box-shadow: var(--hp-bevel);
  color:var(--hp-gold-deep);
}
.hp-row h3{ font-size:17.5px; line-height:1.3; }
.hp-row p{ margin-top:7px; font-size:13.5px; line-height:1.6; color:var(--hp-muted); }

/* ============================================================
   2b. CRITÈRES — liste éditoriale, sans carte
   ============================================================ */
.hp-edito{ margin-top:48px; border-top:1px solid var(--hp-line); }
.hp-edito li{
  display:grid; grid-template-columns:96px minmax(200px, 0.9fr) 1.25fr; gap:28px; align-items:start;
  padding:34px 0 32px; border-bottom:1px solid var(--hp-line);
  transition: padding-left .3s cubic-bezier(.2,.7,.3,1);
}
.hp-edito li:hover{ padding-left:10px; }
@media (max-width:860px){
  .hp-edito li{ grid-template-columns:64px 1fr; gap:8px 20px; padding:26px 0 24px; }
  .hp-edito li > p{ grid-column:2; }
}
.hp-edito-n{
  font-family:'Fraunces', Georgia, serif; font-size:42px; font-weight:400;
  color:var(--hp-gold); line-height:.9; letter-spacing:-0.03em;
  transition: color .25s ease;
}
@media (max-width:860px){ .hp-edito-n{ font-size:30px; } }
.hp-edito li:hover .hp-edito-n{ color:var(--hp-gold-deep); }
.hp-edito h3{ font-size:22px; line-height:1.25; }
.hp-edito p{ font-size:15px; line-height:1.7; color:var(--hp-muted); }

/* ============================================================
   3. CONFIDENTIALITÉ — texte + document gravé avec tampon
   ============================================================ */
.hp-conf{ display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; margin-top:8px; }
@media (max-width:980px){ .hp-conf{ grid-template-columns:1fr; gap:44px; } }
.hp-conf-defs{ margin-top:34px; display:flex; flex-direction:column; gap:0; }
.hp-def{ padding:22px 0; border-top:1px solid var(--hp-line); }
.hp-def:last-child{ border-bottom:1px solid var(--hp-line); }
.hp-def dt{ font-size:11px; letter-spacing:.15em; text-transform:uppercase; font-weight:600; color:var(--hp-gold-deep); }
.hp-def dd{ margin-top:10px; font-size:16.5px; line-height:1.6; color:var(--hp-ink-2); }

.hp-doc{ position:relative; display:flex; justify-content:center; }
.hp-doc-sheet{
  position:relative; width:100%; max-width:430px;
  background:linear-gradient(180deg, #FFFFFF, #FDFBF6);
  border:1px solid var(--hp-line); border-radius:14px;
  box-shadow: var(--hp-sh-3), var(--hp-bevel);
  padding:34px 34px 30px; overflow:hidden;
}
.hp-doc-sheet::after{
  content:""; position:absolute; top:-40%; left:-25%; width:70%; height:180%;
  background:linear-gradient(104deg, transparent 44%, rgba(255,255,255,.55) 50%, transparent 56%);
  transform:rotate(8deg); pointer-events:none;
}
.hp-doc-guilloche{ position:absolute; inset:0; opacity:.5; pointer-events:none; }
.hp-doc-k{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--hp-muted-2); font-weight:600; position:relative; }
.hp-doc-t{ font-size:19px; margin-top:10px; position:relative; }
.hp-doc-lines{ margin-top:22px; display:flex; flex-direction:column; gap:11px; position:relative; }
.hp-doc-lines span{ display:block; height:7px; border-radius:4px; background:linear-gradient(90deg, var(--hp-ivory-3), var(--hp-ivory-2)); }
.hp-doc-lines span:nth-child(2){ width:88%; }
.hp-doc-lines span:nth-child(3){ width:94%; }
.hp-doc-lines span:nth-child(4){ width:72%; }
.hp-doc-lines span:nth-child(5){ width:83%; }
.hp-doc-foot{ margin-top:26px; padding-top:18px; border-top:1px solid var(--hp-line-2); display:flex; align-items:center; justify-content:space-between; gap:14px; position:relative; }
.hp-doc-sig{ font-family:'Fraunces', Georgia, serif; font-style:italic; font-size:17px; color:var(--hp-muted); }
.hp-stamp{
  position:absolute; right:-12px; bottom:-16px; width:132px; height:132px;
  transform:rotate(-13deg);
  filter: drop-shadow(0 6px 14px rgba(162,115,44,.28));
}
@media (max-width:640px){ .hp-stamp{ width:104px; height:104px; right:-6px; bottom:-10px; } }

/* ---------- 4. Carte du hero : reflet qui suit le curseur + léger relief ---------- */
.hp-card-dossier{
  --mx:50%; --my:0%;
  transform: perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
  will-change: transform;
}
.hp-card-dossier .hp-hl{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity .35s ease;
  background: radial-gradient(340px 260px at var(--mx) var(--my), rgba(201,151,77,.16), transparent 68%);
}
.hp-dossier:hover .hp-card-dossier .hp-hl{ opacity:1; }
.hp-dossier:hover .hp-card-dossier{ transition: transform .12s ease-out, box-shadow .4s ease; }
@media (hover:none), (prefers-reduced-motion: reduce){
  .hp-card-dossier{ transform:none !important; }
  .hp-card-dossier .hp-hl{ display:none; }
}

/* ---------- Document gravé : champs du dossier ---------- */
.hp-doc-sheet{ max-width:470px; padding:36px 36px 34px; }
@media (max-width:640px){ .hp-doc-sheet{ padding:28px 24px 26px; } }
.hp-doc-fields{ margin-top:26px; position:relative; }
.hp-doc-fields > div{
  display:flex; align-items:baseline; gap:10px;
  padding:13px 0; border-top:1px solid var(--hp-line-2);
}
.hp-doc-fields > div:first-child{ border-top:none; }
.hp-doc-fields dt{ font-size:13px; color:var(--hp-muted); white-space:nowrap; }
.hp-doc-fields > div::before{
  content:""; flex:1; height:1px; margin:0 2px;
  background:repeating-linear-gradient(90deg, var(--hp-line) 0 2px, transparent 2px 6px);
  order:1;
}
.hp-doc-fields dd{ order:2; font-family:'Fraunces', Georgia, serif; font-size:14px; color:var(--hp-ink); white-space:nowrap; }
.hp-doc-fields dd.is-pending{ color:var(--hp-gold-deep); font-style:italic; }
.hp-doc-lines{ margin-top:24px; }
.hp-doc-foot{ margin-top:26px; }
.hp-doc-date{ display:block; margin-top:5px; font-size:11.5px; color:var(--hp-muted-2); }
.hp-doc-guilloche{ opacity:.75; }
.hp-stamp{ right:-18px; bottom:-22px; }
@media (max-width:640px){ .hp-stamp{ right:-10px; bottom:-14px; } }

/* Colonne de droite des profils : les 3 lignes occupent toute la hauteur de la grande carte */
.hp-asym{ align-items:stretch; }
.hp-rows{ justify-content:space-between; }

/* Le tampon déborde volontairement de la feuille : il est posé dessus, pas imprimé dedans */
.hp-doc-inner{ position:relative; width:100%; max-width:470px; }
.hp-doc-sheet{ max-width:none; }
.hp-doc-inner > .hp-stamp{ right:-26px; bottom:-30px; }
/* Sur mobile le tampon ne dépasse que vers le bas : aucun débordement horizontal */
@media (max-width:640px){ .hp-doc-inner > .hp-stamp{ right:6px; bottom:-16px; } }

/* Aligne les paragraphes de la frise même quand un titre passe sur deux lignes */
@media (min-width:561px){ .hp-proof h3{ min-height:2.5em; } }

/* ============================================================
   V3
   a. Suppression des reflets dorés sur les mots (effet clinquant)
   b. Section méthode : chronologie verticale avec progression au scroll
   c. Animations JS mesurées (mots, rail, parallaxe, boutons magnétiques)
   ============================================================ */

:root{ --hp-bronze:#8A6524; }

/* ---------- a. Mots accentués : italique et bronze profond, sans soulignement ---------- */
.hp-h1 .hp-accent{
  background-image:none;
  padding-bottom:0;
  font-style:italic;
  color:var(--hp-bronze);
  font-variation-settings:'SOFT' 0, 'WONK' 1;
}
.hp-em{ color:var(--hp-bronze); }
/* Plus de balayage lumineux sur les boutons */
.hp-btn--gold::after{ display:none; }
/* Reflets de surface des cartes : conservés mais nettement atténués */
.hp-card-dossier::after,
.hp-feature::after,
.hp-doc-sheet::after{ background:linear-gradient(104deg, transparent 44%, rgba(255,255,255,.26) 50%, transparent 56%); }
.hp-gold-inner::after{ background:linear-gradient(102deg, transparent 44%, rgba(255,255,255,.2) 50%, transparent 56%); }

/* ---------- b. MÉTHODE : chronologie ---------- */
.hp-method-grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:70px; align-items:start; }
@media (max-width:1000px){ .hp-method-grid{ grid-template-columns:1fr; gap:44px; } }
.hp-method-aside{ position:sticky; top:104px; }
@media (max-width:1000px){ .hp-method-aside{ position:static; } }
.hp-method-aside .hp-lede{ max-width:none; }
.hp-method-guard{
  margin-top:32px; padding:20px 22px; border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-left:2px solid var(--hp-gold);
  box-shadow: var(--hp-bevel-dark);
}
.hp-guard-k{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--hp-gold-light); }
.hp-method-guard p{ margin-top:10px; font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.68); }

.hp-timeline{ position:relative; padding-left:44px; }
@media (max-width:560px){ .hp-timeline{ padding-left:30px; } }
.hp-tl-rail{
  position:absolute; left:7px; top:14px; bottom:24px; width:1px;
  background:rgba(255,255,255,.14); overflow:hidden; border-radius:1px;
}
@media (max-width:560px){ .hp-tl-rail{ left:5px; } }
.hp-tl-rail i{
  display:block; width:100%; height:0%;
  background:linear-gradient(180deg, var(--hp-gold-light), var(--hp-gold) 45%, var(--hp-gold-deep));
  box-shadow:0 0 10px rgba(201,151,77,.5);
  transition: height .18s linear;
}
.hp-tl-step{ position:relative; padding-bottom:30px; }
.hp-tl-step:last-child{ padding-bottom:0; }
.hp-tl-dot{
  position:absolute; left:-44px; top:26px; width:15px; height:15px; border-radius:50%;
  background:#16140F; border:1px solid rgba(255,255,255,.22);
  transition: border-color .45s ease, box-shadow .45s ease, background .45s ease;
}
@media (max-width:560px){ .hp-tl-dot{ left:-30px; width:11px; height:11px; } }
.hp-tl-dot::after{
  content:""; position:absolute; inset:3px; border-radius:50%;
  background:var(--hp-gold); opacity:0; transform:scale(.4);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1);
}
.hp-tl-step.is-reached .hp-tl-dot{ border-color:rgba(201,151,77,.75); box-shadow:0 0 0 4px rgba(201,151,77,.10); }
.hp-tl-step.is-reached .hp-tl-dot::after{ opacity:1; transform:scale(1); }

.hp-tl-card{
  position:relative; overflow:hidden;
  padding:26px 28px 24px; border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 24px 44px -28px rgba(0,0,0,.9);
  transition: border-color .45s ease, transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease;
}
@media (max-width:560px){ .hp-tl-card{ padding:22px 20px; } }
.hp-tl-card::before{
  content:""; position:absolute; top:0; left:26px; right:26px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,151,77,.7), transparent);
  opacity:0; transition:opacity .5s ease;
}
.hp-tl-step.is-reached .hp-tl-card{ border-color:rgba(201,151,77,.24); transform:translateY(-2px); }
.hp-tl-step.is-reached .hp-tl-card::before{ opacity:1; }
.hp-tl-head{ display:flex; align-items:baseline; gap:16px; }
.hp-tl-n{
  font-family:'Fraunces', Georgia, serif; font-size:26px; font-weight:400;
  color:rgba(255,255,255,.28); line-height:1; letter-spacing:-0.02em;
  transition: color .45s ease;
}
.hp-tl-step.is-reached .hp-tl-n{ color:var(--hp-gold-light); }
.hp-tl-card h3{ font-size:19px; line-height:1.3; }
.hp-tl-card p{ margin-top:12px; font-size:14.5px; line-height:1.65; color:rgba(255,255,255,.62); }
.hp-tl-meta{
  margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08);
  font-size:11px; letter-spacing:.13em; text-transform:uppercase; font-weight:600;
  color:rgba(255,255,255,.42); transition: color .45s ease;
}
.hp-tl-step.is-reached .hp-tl-meta{ color:rgba(231,201,148,.72); }

/* ---------- c. Révélation par mots (pilotée en JS) ---------- */
.hp-w{
  display:inline-block; opacity:0; transform:translateY(.32em);
  transition: opacity .62s cubic-bezier(.2,.7,.3,1), transform .62s cubic-bezier(.2,.7,.3,1);
}
.hp-splitwords.is-in .hp-w{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .hp-w{ opacity:1 !important; transform:none !important; transition:none; }
  .hp-tl-rail i{ transition:none; }
}

/* Les listes ordonnées portent leurs propres numéros : pas de puce native */
.hp-timeline, .hp-edito{ list-style:none; }
.hp-timeline li, .hp-edito li{ list-style:none; }

/* ============================================================
   V4 — finitions
   ============================================================ */

/* ---------- Bandeau diagnostic : carton gravé plutôt que grand aplat doré ---------- */
.hp-gold-inner{
  padding:0; overflow:hidden;
  background:
    radial-gradient(700px 320px at 50% -12%, rgba(255,255,255,.55), transparent 68%),
    linear-gradient(168deg, #F7EAD2 0%, #EFDCB6 48%, #E4CC9E 100%);
  border:1px solid rgba(122,85,24,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -22px 44px -26px rgba(120,84,32,.4),
    var(--hp-sh-3);
}
.hp-gold-engrave{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
/* Double filet intérieur, façon carton gravé */
.hp-gold-frame{
  position:relative; z-index:1;
  margin:14px; padding:52px 48px 46px;
  border:1px solid rgba(122,85,24,.30);
  border-radius:14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
  text-align:center;
}
@media (max-width:700px){ .hp-gold-frame{ margin:10px; padding:38px 22px 34px; } }
.hp-gold-t em{ font-style:italic; color:#6E4E14; }
.hp-gold-sub{ color:#5C4720; }
.hp-gold-note{ color:#6B5326; }
.hp-orn--gold{ margin:26px 0 4px; }
.hp-orn--gold span{ background:rgba(122,85,24,.4); width:52px; }
.hp-orn--gold i{ background:#8A6524; opacity:.8; }
.hp-gold-inner .hp-eyebrow{ color:#6E4E14; }
.hp-gold-inner .hp-eyebrow::before{ background:#8A6524; }

/* ---------- FAQ : marqueur doré sur la question ouverte ---------- */
.hp-faq .faq-item{ position:relative; transition: background .3s ease; }
.hp-faq .faq-item::before{
  content:""; position:absolute; left:-18px; top:26px; width:2px; height:0;
  background:linear-gradient(180deg, var(--hp-gold), var(--hp-gold-deep));
  transition: height .35s cubic-bezier(.2,.7,.3,1);
}
.hp-faq .faq-item.open::before{ height:22px; }
.hp-faq .faq-item.open .faq-q{ color:var(--hp-gold-deep); }
.hp-faq .faq-q .plus{ transition: transform .3s cubic-bezier(.2,.7,.3,1), background .3s ease, border-color .3s ease; }
.hp-faq .faq-item.open .plus{ background:var(--hp-gold-pale); border-color:rgba(162,115,44,.35); }

/* ---------- Guides : index discret en haut de carte ---------- */
.hp-guide{ counter-increment: hpGuide; }
.hp-guides{ counter-reset: hpGuide; }
.hp-guide::after{
  content: "0" counter(hpGuide);
  position:absolute; top:22px; right:24px;
  font-family:'Fraunces', Georgia, serif; font-size:15px; color:var(--hp-ivory-3);
  transition: color .3s ease;
}
.hp-guide:hover::after{ color:var(--hp-gold-light); }

/* ---------- Contrastes : texte secondaire un cran plus lisible ---------- */
.hp-lede, .hp-tile p, .hp-row p, .hp-edito p, .hp-guide p, .hp-proof p, .hp-note{ color:#5F5A51; }
.hp-hero-sub{ color:#57524A; }
.hp-hero-proof div{ color:#5F5A51; }

/* ---------- Contrastes (WCAG AA) ---------- */
.hp-edito-n{ color:var(--hp-gold-deep); }
.hp-edito li:hover .hp-edito-n{ color:#6E4E14; }
.hp-final .hp-sub{ color:rgba(255,255,255,.72); }
.hp-tl-meta{ color:rgba(255,255,255,.58); }
.hp-step p, .hp-tl-card p{ color:rgba(255,255,255,.68); }
.hp-method-guard p{ color:rgba(255,255,255,.74); }
.hp-gold-note{ color:#5C4720; }

.hp-dos-badge{ color:#6E4E14; }

/* ============================================================
   V5 — MOBILE : hero centré, boutons côte à côte, carte alignée
   ============================================================ */
@media (max-width:640px){

  /* Le hero passe en composition centrée */
  .hp-hero-grid > div:first-child{ text-align:center; }
  .hp-hero-sub{ margin-left:auto; margin-right:auto; }
  .hp-hero-proof{ justify-content:center; gap:12px 20px; }
  .hp-hero-proof div{ justify-content:center; }
  .hp-h1{ margin-left:auto; margin-right:auto; }

  /* « Étudier ma situation » et « Réserver un appel » restent côte à côte */
  .hp-hero-actions{
    flex-wrap:nowrap; gap:10px; justify-content:center;
  }
  .hp-hero-actions .hp-btn{
    flex:1 1 0; min-width:0; justify-content:center; text-align:center;
    padding:15px 8px; font-size:13.5px; gap:6px;
  }
  /* La flèche mangerait la place utile sur un écran étroit */
  .hp-hero-actions .hp-btn .hp-arw{ display:none; }

  /* Sections dont le bouton est seul : centré */
  .hp-sec .hp-hero-actions{ justify-content:center; }
  .hp-sec .hp-hero-actions .hp-btn{ flex:0 1 auto; padding:15px 22px; }
  .hp-sec .hp-hero-actions .hp-btn .hp-arw{ display:inline; }

  /* Pied de la carte « dossier » : tout centré, l'un sous l'autre */
  .hp-dos-foot{
    flex-direction:column; align-items:center; text-align:center; gap:14px;
  }
  .hp-dos-foot .hp-dos-k{ max-width:none; }
  .hp-dos-badge{ display:inline-block; }

  /* Le titre de la carte respire mieux centré lui aussi */
  .hp-dos-top{ align-items:center; }

  /* Bandeau doré et CTA final : boutons côte à côte quand ils sont deux */
  .hp-gold-actions{ flex-wrap:nowrap; gap:10px; }
  .hp-gold-actions .hp-btn{ flex:1 1 0; min-width:0; justify-content:center; padding:15px 8px; font-size:13.5px; }
  .hp-gold-actions .hp-btn .hp-arw{ display:none; }
  .hp-final .hp-hero-actions{ flex-wrap:nowrap; gap:10px; }
  .hp-final .hp-hero-actions .hp-btn{ flex:1 1 0; min-width:0; padding:15px 8px; font-size:13.5px; }
  .hp-final .hp-hero-actions .hp-btn .hp-arw{ display:none; }

  /* La note sombre de la méthode : bouton pleine largeur, centré */
  .hp-dark-note{ flex-direction:column; align-items:center; text-align:center; }
  .hp-dark-note .hp-btn{ margin-left:0; width:100%; justify-content:center; }
}

/* ============================================================
   V6 — IMAGES : composition du hero, bande éditoriale, transparence
   ============================================================ */

/* ---------- Bande éditoriale pleine largeur ---------- */
.hp-band{
  position:relative; overflow:hidden; padding:0;
  display:flex; align-items:center; min-height:460px;
  border-top:1px solid rgba(27,25,22,.08);
}
@media (max-width:900px){ .hp-band{ min-height:400px; } }
.hp-band picture{ position:absolute; inset:0; }
.hp-band img{ width:100%; height:100%; object-fit:cover; display:block; }
.hp-band::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(96deg, rgba(14,12,9,.90) 0%, rgba(14,12,9,.80) 44%, rgba(14,12,9,.52) 74%, rgba(14,12,9,.32) 100%),
    radial-gradient(760px 380px at 92% 8%, rgba(201,151,77,.16), transparent 62%);
}
@media (max-width:700px){
  .hp-band::after{
    background:
      linear-gradient(178deg, rgba(14,12,9,.72) 0%, rgba(14,12,9,.92) 55%, rgba(14,12,9,.96) 100%),
      radial-gradient(600px 300px at 80% 6%, rgba(201,151,77,.18), transparent 60%);
  }
}
.hp-band-inner{ position:relative; z-index:2; padding:96px 0; max-width:none; }
@media (max-width:900px){ .hp-band-inner{ padding:72px 0; } }
@media (max-width:640px){ .hp-band-inner{ padding:56px 0; } }
.hp-band .hp-eyebrow{ color:var(--hp-gold-light); }
.hp-band .hp-eyebrow::before{ background:var(--hp-gold-light); }
.hp-band .hp-h2{ color:#fff; margin-top:22px; max-width:780px; }
.hp-band .hp-lede{ color:rgba(255,255,255,.76); max-width:620px; margin-top:24px; }

/* ---------- Bandeau de transparence ---------- */
.hp-legal-strip{
  background:linear-gradient(180deg, var(--hp-ivory) 0%, var(--hp-ivory-2) 100%);
  border-top:1px solid var(--hp-line-2);
  padding:34px 0; text-align:center;
}
.hp-legal-strip p{
  font-size:13.5px; line-height:1.7; color:var(--hp-muted);
  max-width:760px; margin:0 auto;
}
.hp-legal-strip strong{ color:var(--hp-ink); font-weight:600; }
.hp-legal-links{ margin-top:14px !important; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.hp-legal-links a{ color:var(--hp-gold-deep); font-weight:600; font-size:13px; }
.hp-legal-links a:hover{ color:#6E4E14; text-decoration:underline; text-underline-offset:3px; }
.hp-legal-links span{ color:var(--hp-muted-2); }
/* Cibles tactiles des liens du bandeau de transparence */
.hp-legal-links a{ display:inline-flex; align-items:center; min-height:34px; padding:4px 2px; }
.hp-legal-links{ gap:6px 14px; }

/* ============================================================
   V6 — HUMANITÉ : chiffres, enseignements, histoire, note
   ============================================================ */

/* ---------- Chiffres vérifiables (remplace les chiffres romains) ---------- */
.hp-proof-fig{
  display:block;
  font-family:'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-variation-settings:'SOFT' 0, 'WONK' 0;
  font-weight:500;
  font-size:clamp(38px, 4.6vw, 54px);
  line-height:1;
  letter-spacing:-0.028em;
  color:var(--hp-ink);
  font-feature-settings:'lnum' 1, 'tnum' 1;
}
.hp-proof-fig::after{
  content:""; display:block; width:26px; height:1px; margin-top:14px;
  background:linear-gradient(90deg, var(--hp-gold), rgba(162,115,44,.18));
}
@media (max-width:560px){
  .hp-proof{ text-align:center; }
  .hp-proof-fig::after{ margin-left:auto; margin-right:auto; }
}

/* ---------- Ce que les dossiers nous ont appris ---------- */
.hp-lessons{
  margin-top:52px;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--hp-line);
  border:1px solid var(--hp-line);
  border-radius:16px; overflow:hidden;
  box-shadow: var(--hp-sh-1);
}
@media (max-width:860px){ .hp-lessons{ grid-template-columns:1fr; margin-top:40px; } }

.hp-lesson{
  position:relative; display:flex; flex-direction:column; text-decoration:none;
  background:var(--hp-white);
  padding:38px 36px 32px;
  /* On conserve la transition du reveal (opacité + translation) : la
     redéclarer ici sans elle ferait apparaître la carte d'un coup. */
  transition: background .3s ease,
              opacity .65s cubic-bezier(.2,.7,.2,1),
              transform .65s cubic-bezier(.2,.7,.2,1);
}
@media (max-width:640px){ .hp-lesson{ padding:30px 24px 26px; } }
.hp-lesson::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--hp-gold), transparent);
  opacity:0; transition:opacity .3s ease;
}
.hp-lesson:hover{ background:linear-gradient(178deg, #FFFFFF 0%, #FDFAF3 100%); }
.hp-lesson:hover::before{ opacity:1; }

.hp-lesson-q{
  font-family:'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-variation-settings:'SOFT' 0, 'WONK' 1;
  font-weight:500; font-style:italic;
  font-size:19px; line-height:1.38;
  color:var(--hp-gold-deep);
  letter-spacing:-0.01em;
  text-wrap:balance;
}
@media (max-width:640px){ .hp-lesson-q{ font-size:17.5px; } }
.hp-lesson-a{
  margin-top:16px; font-size:14.5px; line-height:1.68; color:#5F5A51;
}
.hp-lesson-more{
  margin-top:auto; padding-top:22px; align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; letter-spacing:.01em;
  color:var(--hp-ink);
  min-height:34px;
}
.hp-lesson-more .hp-arw{ color:var(--hp-gold-deep); transition:transform .22s cubic-bezier(.2,.7,.3,1); }
.hp-lesson:hover .hp-lesson-more{ color:var(--hp-gold-deep); }
.hp-lesson:hover .hp-lesson-more .hp-arw{ transform:translateX(4px); }
.hp-lesson:focus-visible{ outline:2px solid var(--hp-gold-deep); outline-offset:-3px; }

/* ---------- Histoire de la maison ---------- */
.hp-story-grid{
  display:grid; grid-template-columns: 1.18fr .82fr; gap:64px; align-items:start;
}
.hp-story-grid > *{ min-width:0; }
@media (max-width:1000px){ .hp-story-grid{ grid-template-columns:1fr; gap:44px; } }

.hp-timeline-h{
  list-style:none; margin:44px 0 0; padding:0;
  position:relative;
}
.hp-timeline-h::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px;
  background:linear-gradient(180deg, var(--hp-gold-line), rgba(162,115,44,.10));
}
.hp-timeline-h > li{
  position:relative;
  display:grid; grid-template-columns:104px 1fr; gap:24px;
  padding:0 0 34px 30px;
}
.hp-timeline-h > li:last-child{ padding-bottom:0; }
.hp-timeline-h > li::before{
  content:""; position:absolute; left:-3.5px; top:7px;
  width:8px; height:8px; border-radius:50%;
  background:var(--hp-ivory);
  box-shadow: inset 0 0 0 1.5px var(--hp-gold);
}
@media (max-width:640px){
  .hp-timeline-h > li{ grid-template-columns:1fr; gap:8px; padding-left:24px; padding-bottom:28px; }
}
.hp-th-year{
  font-family:'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-variation-settings:'SOFT' 0, 'WONK' 0;
  font-weight:600; font-size:15px; letter-spacing:.04em;
  color:var(--hp-gold-deep);
  white-space:nowrap;
  padding-top:2px;
}
.hp-th-dash{ padding:0 2px; opacity:.55; }
.hp-timeline-h h3{ font-size:19px; line-height:1.3; margin:0; }
.hp-timeline-h p{ margin-top:9px; font-size:14.5px; line-height:1.66; color:#5F5A51; }

/* ---------- Note de la maison ---------- */
.hp-note-card{
  position:relative;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='168'%3E%3Cg stroke='%23A2732C' stroke-width='0.35' fill='none' opacity='0.11'%3E%3Ccircle cx='84' cy='84' r='22'/%3E%3Ccircle cx='84' cy='84' r='42'/%3E%3Ccircle cx='84' cy='84' r='62'/%3E%3Ccircle cx='0' cy='0' r='42'/%3E%3Ccircle cx='168' cy='168' r='42'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(168deg, #FFFDF8 0%, #FCF7EC 62%, #F8F1E2 100%);
  border:1px solid var(--hp-gold-line);
  border-radius:18px;
  padding:40px 38px 34px;
  box-shadow: var(--hp-sh-2), var(--hp-bevel);
  overflow:hidden;
}
@media (max-width:640px){ .hp-note-card{ padding:32px 24px 28px; } }
.hp-note-card::before{
  content:""; position:absolute; top:0; left:28px; right:28px; height:2px;
  background:linear-gradient(90deg, transparent, var(--hp-gold), transparent);
}
.hp-note-seal{
  position:absolute; right:-18px; bottom:-16px;
  width:150px; height:150px; opacity:.14; pointer-events:none;
}
.hp-note-seal svg{ width:100%; height:100%; display:block; }
.hp-note-k{
  position:relative; z-index:1;
  font-family:'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-variation-settings:'SOFT' 0, 'WONK' 0;
  font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.16em;
  color:var(--hp-gold-deep);
  margin:0 0 20px;
}
.hp-note-k::after{
  content:""; display:block; width:34px; height:1px; margin-top:12px;
  background:var(--hp-gold-line);
}
.hp-note-body{
  position:relative; z-index:1;
  font-family:'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-variation-settings:'SOFT' 0, 'WONK' 0;
  font-weight:400;
  font-size:17px; line-height:1.62; color:var(--hp-ink-2);
  letter-spacing:-0.006em;
}
.hp-note-body + .hp-note-body{ margin-top:16px; }
@media (max-width:640px){ .hp-note-body{ font-size:16px; } }
.hp-note-sign{
  position:relative; z-index:1;
  margin-top:26px; padding-top:18px;
  border-top:1px solid var(--hp-line-2);
  font-family:'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-variation-settings:'SOFT' 0, 'WONK' 1;
  font-style:italic; font-size:15px; color:var(--hp-gold-deep);
}

/* Les intitulés tiennent sur une ligne : la réserve de hauteur crée un trou. */
@media (min-width:561px){ .hp-proof h3{ min-height:0; } }

/* Sur grand écran la note accompagne la frise plutôt que de la laisser seule. */
@media (min-width:1001px){
  .hp-note-card{ position:sticky; top:104px; }
}

/* Le « + » de « 50+ » : plus petit et surélevé, comme une exposant. */
.hp-proof-plus{
  font-size:.52em; vertical-align:.42em; margin-left:.02em;
  color:var(--hp-gold-deep); letter-spacing:0;
}