/* ════════════════════════════════════════════════════════════════
   SITE.CSS — Direction « Éditorial chaleureux » (révisée post-revue)
   Corps crème aéré, hero qui mène par la douleur du prospect, filet
   de marque navy→orange, orange directeur d'œil. Dépend de tokens.css.
   ════════════════════════════════════════════════════════════════ */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  color: var(--dark);
  background: var(--cream);
  line-height: 1.68;
  font-size: 1.125rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
}

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

/* Focus visible homogène (accessibilité clavier) */
:focus-visible { outline: 3px solid var(--orange-400); outline-offset: 3px; border-radius: 3px; }
.band-dark :focus-visible { outline-color: var(--orange-400); }

/* ════ STRUCTURE / RYTHME ════ */
.wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 clamp(22px, 5vw, 56px); }
.measure { max-width: 660px; }

section { padding: clamp(64px, 11vw, 128px) 0; position: relative; }
section.tight { padding-top: clamp(40px, 7vw, 72px); padding-bottom: clamp(40px, 7vw, 72px); }

.band-dark  { background: linear-gradient(180deg, #11243A 0%, var(--navy-900) 58%); color: #D7DCE2; position: relative; }
/* Grain très léger sur le navy (richesse "imprimé", reste calme) */
.band-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.band-dark > .wrap { position: relative; z-index: 1; }
.band-cream { background: var(--cream); }
.band-white { background: #FFFFFF; }

/* ════ TYPOGRAPHIE ════ */
h1, h2, h3 { font-family: var(--font-title); color: var(--navy-900); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.band-dark h1, .band-dark h2, .band-dark h3 { color: #FFFFFF; }

h2 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); margin-bottom: 24px; letter-spacing: -0.025em; }
h3 { font-size: clamp(1.25rem, 1.6vw, 1.4rem); margin-bottom: 10px; letter-spacing: -0.01em; }

p { margin-bottom: 18px; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--navy-900); }
.band-dark strong { color: #FFFFFF; }

a { color: var(--orange-action); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--orange-500); }
.band-dark a { color: var(--orange-400); }

.kicker {
  font-family: var(--font-title);
  font-size: 0.82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--orange-action);
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
}
.band-dark .kicker { color: var(--orange-400); }
.kicker::before { content: ""; width: 4px; height: 16px; flex: 0 0 auto; display: inline-block; background: currentColor; border-radius: 2px; }

.lead { font-size: clamp(1.2rem, 2vw, 1.55rem); color: var(--gray); line-height: 1.5; }
.band-dark .lead { color: #AAB4BF; }

/* Signature « dessinée à la main » sous un mot clé (touche humaine 2026) */
.ink {
  box-shadow: inset 0 -0.02em 0 var(--orange-500);
  padding-bottom: 0;
}
.band-dark .ink {
  box-shadow: inset 0 -0.08em 0 var(--orange-400);
}

/* ════ FILET DE MARQUE (signature de la charte : navy 0-62%, orange 62-100%) ════ */
.brand-rule { height: 4px; background: linear-gradient(90deg, var(--navy-900) 0 62%, var(--orange-500) 62% 100%); }

/* ════ EN-TÊTE / WORDMARK ════ */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(250, 248, 245, 0.85);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 22px; padding-bottom: 22px; }
.brandblock { display: flex; flex-direction: column; gap: 3px; line-height: 1.1; }
.wordmark { font-family: var(--font-title); font-size: 1.5rem; font-weight: 700; color: var(--navy-900); letter-spacing: -0.02em; }
.wordmark .accent { color: var(--orange-500); }
.tagline { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--navy-800); }

.lang-switch {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--border-strong); border-radius: 999px;
  overflow: hidden; font-size: 0.78rem; font-weight: 600;
  font-family: var(--font-title); letter-spacing: 0.04em;
}
.lang-switch a { display: flex; align-items: center; padding: 0 15px; min-height: 44px; color: var(--gray); transition: background .15s ease, color .15s ease; }
.lang-switch a:hover { color: var(--navy-900); background: var(--border); }
.lang-switch a.active { background: var(--navy-900); color: #FFFFFF; }
.lang-switch a.active:hover { background: var(--navy-900); }

/* ════ HERO (mène par la douleur du prospect, pas par le nom) ════ */
.hero { padding: clamp(48px, 6vw, 88px) 0 clamp(64px, 9vw, 104px); overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 50% at 88% 6%, rgba(199,91,36,0.30), transparent 62%);
}
.hero .wrap { position: relative; z-index: 2; }
/* Hero 2 colonnes : texte + visage (connexion humaine dans les 5 premieres secondes).
   La photo detouree est collee au bas de la bande (marge negative = padding bas du hero). */
.hero-main { max-width: 780px; }
.hero-cred { display: none; }
@media (max-width: 1080px) {
  .hero-cred { display: flex; align-items: center; gap: 16px; margin: 32px 0 4px; }
  .hero-portrait { display: block; width: 82px; height: 82px; flex: 0 0 auto; border-radius: 50%; overflow: hidden;
    border: 2px solid var(--orange-400); box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
  .hero-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hero-cred-text { margin: 0; color: #C7CED6; font-size: 1.02rem; line-height: 1.4; max-width: 22ch; }
}
.hero-main .hero-promise { max-width: 100%; }
/* Full-bleed : la photo est ancrée au bord DROIT du viewport (hors de la colonne centrée).
   La manche coupée dans la photo source atterrit au ras du bord de l'écran, et le masque
   dégradé fond les 90 derniers px vers le fond du hero → plus aucune ligne de coupe dure. */
.hero-visual {
  position: absolute; right: 0; bottom: 0; z-index: 1;
  height: 92%; display: flex; align-items: flex-end; justify-content: flex-end;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 90px);
  mask-image: linear-gradient(to left, transparent 0, #000 90px);
}
.hero-visual img { display: block; height: 100%; width: auto; max-width: none; }
@media (max-width: 1080px) { .hero-visual { display: none; } .hero-main { max-width: none; } }
.hero .eyebrow {
  font-family: var(--font-title); font-weight: 500;
  color: var(--orange-400); font-size: clamp(1rem, 2vw, 1.2rem);
  letter-spacing: 0.02em; margin-bottom: 22px;
}
.hero h1 {
  font-family: var(--font-title); font-weight: 700; color: #fff;
  font-size: clamp(2.2rem, 5vw, 3.7rem); line-height: 1.06;
  letter-spacing: -0.035em; max-width: 24ch; margin-bottom: 28px;
  text-wrap: balance;
}
.hero-promise { font-size: clamp(1.15rem, 2vw, 1.45rem); color: #EAEEF2; max-width: 46ch; line-height: 1.5; }

/* Entrée orchestrée du hero (premium, discret, respecte reduced-motion) */
@keyframes heroUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero .eyebrow, .hero h1, .hero-promise, .hero .cta-row, .hero .proof-note, .hero-visual { animation: heroUp .7s var(--ease) both; }
.hero-visual { animation-delay: .2s; }
.hero h1 { animation-delay: .07s; }
.hero-promise { animation-delay: .16s; }
.hero .cta-row { animation-delay: .26s; }
.hero .proof-note { animation-delay: .34s; }
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow, .hero h1, .hero-promise, .hero .cta-row, .hero .proof-note, .hero-visual { animation: none; }
}
.hero-sign {
  margin-top: 28px; font-family: var(--font-title); font-weight: 500;
  color: #9AA6B2; font-size: 1rem; letter-spacing: 0.01em;
}
.hero-sign strong { color: #fff; font-weight: 700; }

/* ════ BOUTONS / CTA ════ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-title); font-weight: 700;
  font-size: 1.02rem; letter-spacing: 0.01em;
  padding: 16px 30px; border-radius: 8px;
  background: var(--orange-action); color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(168,68,26,0.22);
  transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
/* Specificite : .band-dark a passait le texte du bouton en orange sur orange (CTA invisible). Blanc force partout. */
.band-dark .btn, .btn { color: #FFFFFF; }
.btn:hover { background: var(--orange-500); color: #fff; transform: translateY(-3px); box-shadow: 0 14px 30px rgba(168,68,26,0.32); }
.band-dark .btn:hover { color: #fff; }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.cta-row { margin-top: 30px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* Lien de contact secondaire sous le bouton */
.cta-alt { font-size: 0.95rem; margin-top: 14px; }
.band-dark .cta-alt { color: #9AA6B2; }

.cta-reassure { margin-top: 14px; font-size: 0.95rem; color: #C7CED6; }
.band-dark .cta-reassure { color: #C7CED6; }
/* Micro-signal de confiance, posé près de chaque CTA */
.trust-note { font-size: 0.95rem; color: var(--gray); margin-top: 16px; max-width: 44ch; }
.band-dark .trust-note { color: #94A0AC; }
.referral-note { font-size: 0.95rem; color: #A2AEBA; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.08); max-width: 54ch; }
.referral-note .ink { color: #EAEEF2; font-weight: 500; }

/* ════ CARTES (raisonnement) ════ */
.cards { display: grid; gap: 20px; margin-top: 36px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.card {
  background: linear-gradient(158deg, var(--navy-700), var(--navy-800));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 14px 44px rgba(0,0,0,0.30);
  border-radius: 16px; padding: 30px 28px; position: relative;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover { transform: translateY(-5px); border-color: rgba(217,114,52,0.55); box-shadow: 0 22px 56px rgba(0,0,0,0.36); }
.card h3 { font-size: 1.28rem; line-height: 1.22; color: #fff; letter-spacing: -0.01em; }
.card p { font-size: 1rem; color: #B4BEC8; margin-bottom: 0; }
/* Motif de reformulation (la flèche encode la vraie méthode : demande -> vrai besoin) */
.card .angle { display: flex; gap: 12px; margin-top: 16px; }
.card .angle .mark { color: var(--orange-400); font-weight: 700; flex: 0 0 auto; font-size: 1.15rem; line-height: 1.4; }
/* Variante claire (bande crème/blanche) */
.band-cream .card, .band-white .card { background: #fff; border: 1px solid var(--border); box-shadow: 0 10px 34px rgba(13,27,42,0.07); }
.band-cream .card:hover, .band-white .card:hover { box-shadow: 0 18px 46px rgba(13,27,42,0.11); border-color: var(--border-strong); }
.band-cream .card h3, .band-white .card h3 { color: var(--navy-900); }
.band-cream .card p, .band-white .card p { color: var(--gray); }
.band-cream .card .angle .mark, .band-white .card .angle .mark { color: var(--orange-action); }

/* ════ GRILLE ASYMÉTRIQUE (casse le mono-format) ════ */
.split { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.split .col-side { position: sticky; top: 96px; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } .split .col-side { position: static; } }

/* ════ PORTRAIT (présence humaine) ════ */
.portrait {
  width: 100%; aspect-ratio: 4 / 5; border-radius: 16px;
  background: linear-gradient(165deg, var(--navy-800), var(--navy-900));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 50px rgba(13,27,42,0.18);
  display: grid; place-items: center; overflow: hidden; position: relative;
  text-align: center;
}
/* Filet de marque en tête du panneau (signature de charte) */
.portrait::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--navy-900) 0 62%, var(--orange-500) 62% 100%);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Panneau de marque (stand-in soigné en attendant la photo pro) */
.pb-inner { display: flex; flex-direction: column; align-items: center; padding: 26px; }
.pb-mono { font-family: var(--font-title); font-weight: 700; font-size: clamp(3rem, 7vw, 4.6rem); color: var(--orange-400); line-height: 1; letter-spacing: 0.02em; }
.pb-name { font-family: var(--font-title); font-weight: 700; color: #fff; font-size: 1.15rem; margin-top: 16px; }
.pb-tag { font-family: var(--font-title); font-weight: 500; color: #8A97A5; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.2em; margin-top: 6px; }

/* ════ ÉTAPES NUMÉROTÉES ════ */
.steps { counter-reset: step; display: grid; gap: 22px; margin-top: 34px; max-width: 760px; }
.step { display: flex; gap: 22px; align-items: flex-start; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  flex: 0 0 auto; width: 52px; height: 52px;
  display: grid; place-items: center;
  font-family: var(--font-title); font-weight: 700; font-size: 1.05rem;
  background: transparent; color: var(--orange-action);
  border: 1.5px solid var(--orange-action); border-radius: 50%;
}
.step h3 { margin-bottom: 4px; }
.step p { color: var(--gray); margin-bottom: 0; }

/* ════ CALLOUT ════ */
.callout {
  background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--orange-500);
  padding: 22px 28px; border-radius: 0 12px 12px 0; margin-top: 32px; max-width: 760px;
}
.callout p { margin-bottom: 0; }
.band-dark .callout { background: var(--navy-800); border-color: rgba(255,255,255,0.08); border-left-color: var(--orange-500); }
/* Variante accent FORT : aplat orange, pour le moment-clé "rien à vendre" */
.callout.accent {
  background: var(--orange-action); border: none; border-radius: 12px;
  color: #fff; padding: 26px 30px; box-shadow: 0 10px 30px rgba(168,68,26,0.28);
}
.callout.accent p { color: #fff; }
.callout.accent strong { color: #fff; }

/* Témoignages (vide au lancement) */
.empty-note { color: var(--gray); font-style: italic; font-size: 1.05rem; max-width: 56ch; }

/* ════ FOOTER LÉGAL ════ */
footer.legal { background: var(--navy-900); color: #8C97A3; padding: 56px 0; }
footer.legal .wrap { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
footer.legal .marque { font-family: var(--font-title); font-weight: 700; color: #FFFFFF; font-size: 1.2rem; }
footer.legal .marque .accent { color: var(--orange-500); }
footer.legal .mentions { font-size: 0.82rem; line-height: 1.6; max-width: 60ch; }

/* ════ RÉVÉLATION AU SCROLL (réservée au contenu SOUS la ligne de flottaison) ════ */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card { transition: none; }
}

/* ════ HERO (proof-note sous le CTA) ════ */
.proof-note { display: block; position: relative; padding-left: 20px; margin-top: 26px; font-size: 0.98rem; color: #AAB4BF; max-width: 46ch; }
.proof-note strong { color: #C7CED6; font-weight: 500; }
.proof-note::before { content: ""; position: absolute; left: 0; top: 0.48em; width: 8px; height: 8px; border-radius: 50%; background: var(--orange-400); }

/* ════ STATEMENT / PIVOT (advisory pure, retournement narratif) ════ */
.statement {
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(2rem, 5.2vw, 3.7rem); line-height: 1.15;
  letter-spacing: -0.028em; max-width: 20ch; color: var(--navy-900);
  text-wrap: balance;
}
.band-dark .statement { color: #fff; }
.statement.wide { max-width: 26ch; }
.statement + .statement-sub { margin-top: 22px; font-family: var(--font-body); font-size: 1.2rem; line-height: 1.55; color: var(--gray); max-width: 52ch; }
.band-dark .statement-sub { color: #AAB4BF; }

/* ════ BÉNÉFICES (règle de 3) ════ */
.benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 24px; margin-top: 36px; }
.benefit .b-lead { font-family: var(--font-title); font-weight: 700; font-size: 1.2rem; color: var(--navy-900); margin-bottom: 8px; }
.benefit .b-lead .euro { color: var(--orange-action); }
.benefit p { color: var(--gray); margin-bottom: 0; font-size: 1rem; }
.benefit { border-top: 2px solid var(--orange-500); padding-top: 16px; }

/* ════ CARTE PRIX (un seul repère, ancré sur le coût de l'inaction) ════ */
.anchor-cost { font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.5; color: var(--navy-900); max-width: 30ch; font-weight: 500; }
.anchor-cost strong { color: var(--orange-action); font-variant-numeric: tabular-nums; }
.price-card {
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: clamp(26px, 4vw, 40px); box-shadow: 0 12px 36px rgba(13,27,42,0.08);
  max-width: 560px; margin-top: 32px;
}
.price-card .pc-label { font-family: var(--font-title); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; color: var(--orange-action); }
.price-card .pc-price { font-family: var(--font-title); font-weight: 700; font-size: clamp(2.3rem, 4.2vw, 3rem); color: var(--navy-900); line-height: 1; margin: 8px 0 4px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price-card .pc-price .pc-unit { font-size: 1rem; color: var(--gray); font-weight: 500; }
.price-card ul.inclus { list-style: none; margin: 18px 0 0; padding: 0; }
.price-card ul.inclus li { position: relative; padding-left: 28px; margin-bottom: 10px; color: var(--dark); }
.price-card ul.inclus li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 6px; height: 11px; border: solid var(--orange-action); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.price-card .garantie { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 0.98rem; color: var(--gray); }
.price-card .garantie strong { color: var(--navy-900); }

/* ════ FAQ / OBJECTIONS (native, accessible, sans JS) ════ */
.faq { max-width: 760px; margin-top: 28px; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  font-family: var(--font-title); font-weight: 700; font-size: 1.12rem;
  color: var(--navy-900); cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 20px 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--orange-action); font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.faq details[open] summary::after { content: "\2013"; }
.faq details > p { margin: 0 0 22px; color: var(--gray); max-width: 64ch; }

/* ════ TÉMOIGNAGES (recommandations réelles, vérifiables) ════ */
.testimonials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; }
@media (max-width: 640px) { .testimonials { grid-template-columns: 1fr; } }
.testimonials-more { margin-top: 22px; font-size: 0.95rem; color: var(--gray); }
.testimonials-more a { color: var(--navy-900); box-shadow: inset 0 -0.02em 0 var(--orange-500); }
.testimonials-more a:hover { color: var(--orange-500); }
.testimonial { background: #FFFFFF; border: 1px solid var(--border); border-radius: 16px; padding: 30px 26px 26px; display: flex; flex-direction: column; position: relative; box-shadow: 0 6px 22px rgba(13,27,42,0.05); }
.testimonial::before { content: "\201C"; position: absolute; top: 8px; left: 20px; font-family: var(--font-title); font-size: 3.4rem; line-height: 1; color: var(--orange-500); opacity: 0.22; }
.testimonial blockquote { margin: 8px 0 20px; font-size: 1.02rem; line-height: 1.55; color: var(--dark); position: relative; z-index: 1; }
.testimonial figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.testimonial .t-name { font-family: var(--font-title); font-weight: 700; color: var(--navy-900); }
.testimonial .t-role { font-size: 0.9rem; color: var(--gray); }

/* ════ PRÉSENCE HUMAINE PRÈS DU CTA FINAL (confiance au moment de l'engagement) ════ */
.human-row { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.human-row .avatar {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block;
  border: 2px solid var(--orange-400); box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.human-row p { margin: 0; color: #D7DCE2; font-size: 1.02rem; }

/* ════ COORDONNÉES (tous les canaux, section contact) ════ */
.cm-intro { color: #AAB4BF; font-size: 1rem; margin-top: 36px; }
/* Grille uniforme (2 colonnes desktop, 1 mobile) : cellules alignées, fini les pilules en vrac */
.contact-methods {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px; margin-top: 16px; max-width: 620px;
}
.contact-methods a {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 13px 18px; border: 1px solid rgba(255,255,255,0.22); border-radius: 12px;
  font-family: var(--font-title); font-weight: 500; font-size: 0.95rem; color: #D7DCE2;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.contact-methods a svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--orange-400); }
.contact-methods a:hover { border-color: var(--orange-400); background: rgba(217,114,52,0.08); color: #fff; text-decoration: none; }

/* ════ PAGES LÉGALES (contenu simple) ════ */
.legal-page { padding-top: clamp(40px, 7vw, 80px); padding-bottom: clamp(48px, 8vw, 96px); }
.legal-page h1 { font-family: var(--font-title); font-weight: 700; color: var(--navy-900); font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 10px; }
.legal-page .updated { color: var(--gray); font-size: 0.95rem; margin-bottom: 40px; }
.legal-page h2 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin: 38px 0 12px; }
.legal-page p { color: var(--dark); }
.legal-page ul { margin: 0 0 18px 22px; }
.legal-page li { margin-bottom: 8px; }
.legal-page li::marker { color: var(--orange-500); }
.legal-page a.back { display: inline-block; margin-top: 44px; font-family: var(--font-title); font-weight: 600; }
.ph-fill { background: rgba(199,91,36,0.12); color: var(--orange-action); padding: 1px 6px; border-radius: 4px; font-style: normal; font-weight: 600; }

/* Footer : liens légaux */
footer.legal .foot-meta { text-align: right; }
footer.legal .foot-nav { display: flex; gap: 18px; justify-content: flex-end; margin-bottom: 10px; font-family: var(--font-title); font-weight: 600; font-size: 0.85rem; }
footer.legal .foot-nav a { color: #B6C0CB; }
footer.legal .foot-nav a:hover { color: #fff; }
@media (max-width: 620px) { footer.legal .foot-meta { text-align: left; } footer.legal .foot-nav { justify-content: flex-start; } }

/* ════ RESPONSIVE ════ */
@media (max-width: 760px) {
  .step { gap: 16px; }
  .step::before { width: 44px; height: 44px; font-size: 0.95rem; }
}