/* =============================================================================
   Website Deutschland — page commerciale
   Dorian Laroche Faleu

   Feuille claire et chaleureuse, pensée pour convertir un restaurateur ou une
   coiffeuse — pas pour impressionner un recruteur technique. La page sombre
   des projets garde sa propre feuille : projekte.css
   ============================================================================= */

:root {
  --papier:      #FFFFFF;
  --sable:       #FAF8F5;
  --sable-fonce: #F3EFE9;
  --encre:       #16130F;
  --encre-douce: #57534E;
  --encre-pale:  #8A837B;
  --ligne:       #E7E2DB;
  --ligne-forte: #D6CFC5;

  --accent:      #4338CA;
  --accent-vif:  #5B4FE0;
  --accent-pale: #EEF0FE;
  --accent-fonce:#312E81;

  --or:          #B45309;
  --or-pale:     #FEF6E7;
  --vert:        #047857;
  --vert-pale:   #ECFDF5;

  --large:  1140px;
  --etroit: 760px;

  --pas: clamp(1rem, 4vw, 2rem);

  --police: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --ombre:      0 1px 2px rgba(22, 19, 15, .05), 0 4px 12px rgba(22, 19, 15, .04);
  --ombre-forte:0 2px 4px rgba(22, 19, 15, .06), 0 12px 32px rgba(22, 19, 15, .09);
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
a:hover { color: var(--accent-fonce); }

img { max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #fff;
  padding: .75rem 1.25rem; z-index: 200;
}
.skip:focus { left: 0; }

.wrap {
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--pas);
}
.wrap.narrow { max-width: var(--etroit); }

/* ================================================================== Bilingue
   Les deux langues cohabitent dans le HTML. Une seule s'affiche, choisie par
   l'attribut data-lang sur <html>. Pas de rechargement, pas de dépendance. */

html[data-lang="fr"] [data-l]:not([data-l="fr"]) { display: none; }
html[data-lang="de"] [data-l]:not([data-l="de"]) { display: none; }
html[data-lang="en"] [data-l]:not([data-l="en"]) { display: none; }

/* ------------------------------------------------------------------ En-tête */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ligne);
}

.nav {
  max-width: var(--large);
  margin-inline: auto;
  padding: .85rem var(--pas);
  display: flex; align-items: center; gap: 1rem;
}

.brand {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.02em;
  color: var(--encre);
  text-decoration: none;
  margin-right: auto;
  display: flex; align-items: center; gap: .55rem;
}
.brand-mark {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  border-radius: 9px;
  font-size: .82rem; letter-spacing: .04em;
  flex: none;
}

.nav-links {
  display: flex; gap: clamp(.7rem, 2vw, 1.6rem);
  list-style: none; margin: 0; padding: 0;
  font-size: .92rem;
}
.nav-links a {
  color: var(--encre-douce); text-decoration: none; white-space: nowrap;
  font-weight: 550;
}
.nav-links a:hover { color: var(--encre); }
@media (max-width: 900px) { .nav-links { display: none; } }

.lang {
  display: flex; border: 1px solid var(--ligne-forte);
  border-radius: 8px; overflow: hidden; flex: none;
}
.lang button {
  font: inherit; font-size: .8rem; font-weight: 700;
  padding: .35rem .6rem; border: 0; cursor: pointer;
  background: transparent; color: var(--encre-pale);
}
html[data-lang="fr"] .lang [value="fr"],
html[data-lang="de"] .lang [value="de"],
html[data-lang="en"] .lang [value="en"] {
  background: var(--accent); color: #fff;
}
.lang button + button { border-left: 1px solid var(--ligne-forte); }

/* ------------------------------------------------------------------ Boutons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.6rem;
  border-radius: 10px;
  font-weight: 650; font-size: .98rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease,
              border-color .12s ease, box-shadow .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: .55rem 1.05rem; font-size: .88rem; }

.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--ombre); }
.btn-primary:hover { background: var(--accent-vif); color: #fff; box-shadow: var(--ombre-forte); }

.btn-ghost { border-color: var(--ligne-forte); color: var(--encre); background: var(--papier); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-wa { background: #25D366; color: #08351A; }
.btn-wa:hover { background: #1FBE5A; color: #08351A; }

@media (max-width: 620px) { .nav .btn { display: none; } }

/* --------------------------------------------------------------------- Hero */

.hero {
  padding: clamp(3rem, 9vw, 6rem) 0 clamp(2.5rem, 6vw, 4rem);
  background:
    radial-gradient(52rem 30rem at 15% -20%, rgba(67, 56, 202, .07), transparent 64%),
    radial-gradient(42rem 26rem at 95% 0%, rgba(180, 83, 9, .05), transparent 60%);
}

.eyebrow {
  margin: 0 0 1rem;
  font-size: .77rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}

h1 {
  margin: 0 0 1.3rem;
  font-size: clamp(2.15rem, 5.6vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 800;
  max-width: 20ch;
}
h1 em { font-style: normal; color: var(--accent); }

h2 {
  margin: 0 0 1.3rem;
  font-size: clamp(1.7rem, 3.8vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -.025em;
  font-weight: 800;
  max-width: 24ch;
}

h3.sub {
  margin: 3rem 0 1.1rem;
  font-size: 1.25rem; font-weight: 750;
  letter-spacing: -.015em;
}

.lede {
  margin: 0 0 2rem;
  max-width: 58ch;
  font-size: clamp(1.05rem, 2.2vw, 1.22rem);
  color: var(--encre-douce);
}

.body { max-width: 66ch; color: var(--encre-douce); }
.muted { color: var(--encre-douce); }

.cta-row {
  display: flex; flex-wrap: wrap; gap: .8rem;
  margin-bottom: 2.5rem;
}

/* Bandeau de confiance sous le hero */
.trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--ligne);
  border: 1px solid var(--ligne);
  border-radius: 14px;
  overflow: hidden;
  margin: 0;
}
.trust > div { background: var(--papier); padding: 1.1rem 1.2rem; }
.trust dt {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--encre-pale); margin-bottom: .3rem;
}
.trust dd {
  margin: 0; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em;
}

/* ---------------------------------------------------------------- Sections */

.section {
  padding: clamp(3rem, 8vw, 5.5rem) 0;
  border-top: 1px solid var(--ligne);
}
.section.alt { background: var(--sable); }
.section.accent {
  background: var(--accent-fonce);
  color: #fff;
  border-top: 0;
}
.section.accent h2 { color: #fff; }
.section.accent .lede,
.section.accent .body { color: #C7C4EE; }
.section.accent .eyebrow { color: #A5B4FC; }

/* --------------------------------------------------------------- Diaspora */

.pitch {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (max-width: 860px) { .pitch { grid-template-columns: 1fr; } }

.pitch-points { display: grid; gap: 1rem; }
.point {
  background: var(--papier);
  border: 1px solid var(--ligne);
  border-radius: 14px;
  padding: 1.25rem 1.35rem;
  box-shadow: var(--ombre);
}
.point h4 {
  margin: 0 0 .35rem; font-size: 1rem; font-weight: 750;
  display: flex; align-items: center; gap: .55rem;
}
.point p { margin: 0; font-size: .93rem; color: var(--encre-douce); }
.point-icon {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--accent-pale); color: var(--accent);
  font-size: .95rem;
}

/* ------------------------------------------------------------- Prestations */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}

.offer {
  background: var(--papier);
  border: 1px solid var(--ligne);
  border-radius: 16px;
  padding: 1.7rem;
  display: flex; flex-direction: column;
  box-shadow: var(--ombre);
}
.offer.featured {
  border: 2px solid var(--accent);
  box-shadow: var(--ombre-forte);
  position: relative;
}
.offer-badge {
  position: absolute; top: -.75rem; left: 1.5rem;
  background: var(--accent); color: #fff;
  font-size: .7rem; font-weight: 750;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .25rem .7rem; border-radius: 99px;
}
.offer h3 { margin: 0 0 .5rem; font-size: 1.22rem; font-weight: 780; letter-spacing: -.015em; }
.offer .offer-for { font-size: .84rem; color: var(--encre-pale); margin: 0 0 1rem; }
.offer .price {
  font-size: 2rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--encre); margin: 0 0 .2rem;
}
.offer .price small { font-size: .95rem; font-weight: 600; color: var(--encre-pale); }
.offer .price-note { font-size: .82rem; color: var(--encre-pale); margin: 0 0 1.2rem; }
.offer ul {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  font-size: .93rem; color: var(--encre-douce);
  display: grid; gap: .5rem;
}
.offer li { display: flex; gap: .55rem; align-items: baseline; }
.offer li::before {
  content: "✓"; color: var(--vert); font-weight: 800; flex: none; font-size: .9rem;
}
.offer .btn { margin-top: auto; }

/* Détail de l'offre : inclus / non inclus */
.scope {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: 1.5rem;
}
@media (max-width: 760px) { .scope { grid-template-columns: 1fr; } }

.scope-box {
  border-radius: 14px; padding: 1.4rem 1.5rem;
  border: 1px solid var(--ligne);
  background: var(--papier);
}
.scope-box.yes { background: var(--vert-pale); border-color: #A7E8CE; }
.scope-box.no  { background: var(--sable-fonce); }
.scope-box h4 {
  margin: 0 0 .9rem; font-size: .78rem; font-weight: 750;
  letter-spacing: .12em; text-transform: uppercase;
}
.scope-box.yes h4 { color: var(--vert); }
.scope-box.no h4  { color: var(--encre-pale); }
.scope-box ul {
  margin: 0; padding: 0; list-style: none;
  font-size: .92rem; display: grid; gap: .45rem;
  color: var(--encre-douce);
}
.scope-box li { display: flex; gap: .55rem; align-items: baseline; }
.scope-box.yes li::before { content: "✓"; color: var(--vert); font-weight: 800; flex: none; }
.scope-box.no li::before  { content: "–"; color: var(--encre-pale); font-weight: 800; flex: none; }

/* ------------------------------------------------------------------- Ablauf */

.steps { display: grid; gap: 0; counter-reset: etape; margin-top: 2rem; }
.step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.2rem;
  padding: 1.2rem 0;
  border-top: 1px solid var(--ligne);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--ligne); }
.step-num {
  counter-increment: etape;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-pale); color: var(--accent);
  font-weight: 800; font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.step-num::before { content: counter(etape); }
.step h4 { margin: .3rem 0 .3rem; font-size: 1.02rem; font-weight: 720; }
.step p { margin: 0; font-size: .93rem; color: var(--encre-douce); max-width: 62ch; }
.step .who {
  display: inline-block; margin-top: .4rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .15rem .55rem; border-radius: 99px;
}
.who.moi  { background: var(--accent-pale); color: var(--accent); }
.who.vous { background: var(--or-pale); color: var(--or); }

/* --------------------------------------------------------------- Références */

.refs { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.2rem; }
.ref {
  background: var(--papier); border: 1px solid var(--ligne);
  border-radius: 16px; padding: 1.6rem;
  box-shadow: var(--ombre);
}
.ref-tag {
  font-size: .72rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .6rem;
}
.ref h3 { margin: 0 0 .6rem; font-size: 1.15rem; font-weight: 780; letter-spacing: -.015em; }
.ref p { margin: 0 0 1rem; font-size: .93rem; color: var(--encre-douce); }
.ref a { font-size: .9rem; font-weight: 650; text-decoration: none; }
.ref a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- Témoignages */

.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; }
.quote {
  background: var(--papier); border: 1px solid var(--ligne);
  border-radius: 16px; padding: 1.6rem;
  box-shadow: var(--ombre);
  display: flex; flex-direction: column;
}
.quote blockquote {
  margin: 0 0 1.2rem; font-size: 1rem; line-height: 1.65;
  color: var(--encre);
}
.quote blockquote::before { content: "“"; font-size: 2.2rem; line-height: 0; color: var(--ligne-forte); vertical-align: -.35em; margin-right: .1em; }
.quote figcaption {
  margin-top: auto; display: flex; align-items: center; gap: .75rem;
  font-size: .88rem;
}
.quote-avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--sable-fonce); color: var(--encre-pale);
  display: grid; place-items: center; font-weight: 800; font-size: .9rem;
}
.quote-name { font-weight: 700; display: block; }
.quote-role { color: var(--encre-pale); font-size: .82rem; }

/* --------------------------------------------------------------------- FAQ */

.faq { display: grid; gap: 0; margin-top: 1.5rem; }
.faq details {
  border-top: 1px solid var(--ligne);
  padding: 0;
}
.faq details:last-of-type { border-bottom: 1px solid var(--ligne); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-weight: 700; font-size: 1.02rem;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .4rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 400; color: var(--accent);
  line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--accent); }
.faq .answer {
  margin: 0; padding: 0 2.5rem 1.4rem 0;
  color: var(--encre-douce); font-size: .96rem; max-width: 68ch;
}

/* ----------------------------------------------------------------- Contact */

.contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem; margin-top: 2rem;
}
.contact-card {
  display: block; text-decoration: none;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px; padding: 1.3rem;
  color: #fff;
  transition: border-color .12s ease, transform .12s ease, background-color .12s ease;
}
.contact-card:hover {
  border-color: #A5B4FC; transform: translateY(-2px); color: #fff;
  background: rgba(255,255,255,.12);
}
.contact-label {
  display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: #A5B4FC; margin-bottom: .35rem;
}
.contact-value { display: block; font-weight: 650; font-size: .95rem; word-break: break-word; }

/* --------------------------------------------------------- Marqueur à faire */

.todo {
  background: #FEF3C7;
  border-bottom: 2px dashed var(--or);
  color: #78350F;
  padding: .05rem .3rem;
  border-radius: 3px;
  font-weight: 600;
}
.todo-block {
  background: #FEF3C7;
  border: 2px dashed var(--or);
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
  color: #78350F;
  font-size: .92rem;
  margin: 1.2rem 0;
}
.todo-block strong { color: #78350F; }
.quote.vide { border-style: dashed; border-color: var(--or); background: #FFFCF3; }

/* ------------------------------------------------------------------- Pied */

.site-footer {
  border-top: 1px solid var(--ligne);
  padding: 2.5rem 0;
  font-size: .88rem;
  color: var(--encre-douce);
}
.footer-row {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: space-between; align-items: baseline;
}
.site-footer p { margin: 0 0 .3rem; }
.site-footer a { color: var(--encre-douce); }
.footer-legal { display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* ================================================================ Mouvement
   Sobre et volontaire. Trois gestes seulement, chacun avec une raison : la
   réaction des cartes, la progression des étapes, l'ombre de l'en-tête.

   Pas d'apparition au défilement : c'est le tic le plus répandu, et il rend
   du texte invisible quand le script échoue. Ici, rien ne conditionne la
   lecture — le mouvement s'ajoute, il ne masque jamais. */

/* --- 1. Réaction des cartes --------------------------------------------- */

.offer, .point, .ref, .quote {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.offer:hover, .point:hover, .quote:hover {
  border-color: var(--ligne-forte);
  box-shadow: var(--ombre-forte);
  transform: translateY(-2px);
}
.offer.featured:hover { border-color: var(--accent-vif); }

/* La référence révèle sa flèche : le lien se donne avant qu'on le cherche. */
.ref:hover { border-color: var(--accent); box-shadow: var(--ombre-forte); }
.ref a { display: inline-flex; align-items: center; gap: .3rem; }
.ref a span { transition: gap .18s ease; }
.ref:hover a { gap: .55rem; }

/* --- 2. Progression dans le déroulement ---------------------------------
   Le numéro se remplit quand l'étape entre dans l'écran. C'est exactement
   ce que vend la page : un processus lisible, étape par étape. */

.step-num {
  transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.step.actif .step-num {
  background: var(--accent);
  color: #fff;
  transform: scale(1.06);
}
.step { transition: opacity .3s ease; }

/* --- 3. En-tête : l'ombre n'apparaît qu'une fois la page défilée --------- */

.site-header { transition: box-shadow .2s ease, border-color .2s ease; }
.site-header.defile {
  box-shadow: 0 1px 0 var(--ligne), 0 6px 20px rgba(22, 19, 15, .06);
  border-bottom-color: transparent;
}

/* ------------------------------------------------------- Vitrines de demo

   La page se lisait sans une seule image. Un artisan qui cherche un site
   veut voir a quoi ressemble un site, pas lire qu'il sera beau : la capture
   de la page d'accueil fait ce travail en une seconde, la ou trois lignes
   de texte echouent.

   La carte entiere est le lien. Sur telephone, viser une petite fleche
   demande de la precision ; viser une carte de 300 px n'en demande aucune.

   L'image est cadree sur le haut de la page : c'est la que se trouvent le
   logo, le titre et le premier bouton -- ce qu'un prospect regarde. Le
   rapport est fixe, donc aucune carte ne saute pendant le chargement. */

.vitrines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.4rem;
  margin-top: 1.5rem;
}

.vitrine {
  display: flex;
  flex-direction: column;
  background: var(--papier);
  border: 1px solid var(--ligne);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--ombre);
  color: inherit;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.vitrine-vue {
  display: block;
  aspect-ratio: 900 / 562;
  overflow: hidden;
  background: var(--sable-fonce);
  border-bottom: 1px solid var(--ligne);
}

.vitrine-vue img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .35s ease;
}

.vitrine-corps { padding: 1.4rem 1.6rem 1.6rem; }

.vitrine-tag {
  font-size: .72rem; font-weight: 750; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 .5rem;
}
.vitrine h3 {
  margin: 0 0 .5rem; font-size: 1.15rem; font-weight: 780;
  letter-spacing: -.015em;
}
.vitrine p {
  margin: 0 0 1rem; font-size: .93rem; color: var(--encre-douce);
}
.vitrine-lien {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .9rem; font-weight: 650; color: var(--accent);
}
.vitrine-lien span { transition: gap .18s ease; }

.vitrine:hover {
  border-color: var(--accent);
  box-shadow: var(--ombre-forte);
  transform: translateY(-2px);
}
/* Le zoom reste sous 3 % : au-dela, le texte de la capture se brouille et
   la carte a l'air d'une photo, plus d'un site. */
.vitrine:hover .vitrine-vue img { transform: scale(1.03); }
.vitrine:hover .vitrine-lien { gap: .55rem; }

/* Le clavier doit voir la carte aussi nettement que la souris. */
.vitrine:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Sur ecran tactile le survol se declenche au doigt et reste colle : c'est
   l'appui qui repond. */
@media (hover: none) {
  .vitrine:hover { transform: none; box-shadow: var(--ombre); border-color: var(--ligne); }
  .vitrine:hover .vitrine-vue img { transform: none; }
  .vitrine:active { transform: scale(.99); }
}

/* --- Respect du réglage système ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .offer:hover, .point:hover, .quote:hover, .ref:hover,
  .vitrine:hover { transform: none; }
  .vitrine:hover .vitrine-vue img { transform: none; }
  .step.actif .step-num { transform: none; }
}

/* --------------------------------------------------------------- Impression */

@media print {
  .site-header, .cta-row, .skip, .lang, .faq summary::after { display: none; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .section, .hero { padding: .8rem 0; border: 0; }
  .section.accent { background: #fff; color: #000; }
  .section.accent h2, .section.accent .lede { color: #000; }
  .offer, .point, .ref, .quote, .scope-box, .trust > div {
    background: #fff; border: 1px solid #ccc; box-shadow: none;
  }
  .faq details { display: block; }
  .faq .answer { display: block !important; }
  a { color: #000; }
}

/* =============================================================================
   Témoignage client — bloc citation dans la section Références
   ============================================================================= */

.temoignage {
  margin: 2.5rem 0 0;
  padding: 1.75rem 2rem;
  background: var(--accent-pale);
  border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0;
  box-shadow: var(--ombre);
}

.temoignage-titre {
  margin: 0 0 1.25rem;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--accent-fonce);
}

.temoignage-extraits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.temoignage blockquote {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--encre);
}

.temoignage-etape {
  margin: 0 0 .4rem;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

.temoignage .cite { margin: 0; }
.temoignage .cite::before { content: "« "; color: var(--accent); }
.temoignage .cite::after  { content: " »"; color: var(--accent); }
html[data-lang="de"] .temoignage .cite::before { content: "„"; }
html[data-lang="de"] .temoignage .cite::after  { content: "“"; }
html[data-lang="en"] .temoignage .cite::before { content: "“"; }
html[data-lang="en"] .temoignage .cite::after  { content: "”"; }

.temoignage figcaption {
  margin-top: 1.5rem;
  color: var(--encre-douce);
}

.temoignage figcaption strong {
  display: block;
  color: var(--encre);
}

/* =============================================================================
   Présentation personnelle (hero)
   ============================================================================= */

.moi {
  display: flex; align-items: center; gap: 1rem;
  margin: -0.6rem 0 1.8rem; max-width: 62ch;
}
.moi p { margin: 0; color: var(--encre-douce); font-size: .98rem; line-height: 1.55; }
.moi p strong { color: var(--encre); }
.moi-photo {
  position: relative; flex: 0 0 88px; width: 88px; height: 88px;
  border-radius: 50%; overflow: hidden;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 1.5rem; letter-spacing: .02em;
  box-shadow: 0 0 0 4px var(--papier), var(--ombre-forte);
}
.moi-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
}
@media (max-width: 520px) {
  .moi { align-items: flex-start; }
  .moi-photo { flex-basis: 64px; width: 64px; height: 64px; font-size: 1.1rem; }
}

.btn-wa { display: inline-flex; align-items: center; gap: .5rem; }

/* =============================================================================
   Preuves en haut de page
   ============================================================================= */

.preuves { margin: 0 0 1.6rem; }
.preuves-titre {
  margin: 0 0 .9rem;
  font-size: .77rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--encre-pale);
}
.preuves-grille {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px;
}
@media (max-width: 560px) { .preuves-grille { grid-template-columns: 1fr; } }

.preuve {
  display: flex; flex-direction: column;
  background: var(--papier); border: 1px solid var(--ligne); border-radius: 14px;
  overflow: hidden; color: inherit; text-decoration: none; box-shadow: var(--ombre);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.preuve:hover { border-color: var(--accent); box-shadow: var(--ombre-forte); }
.preuve picture {
  display: block; aspect-ratio: 900 / 480; overflow: hidden;
  background: var(--sable-fonce); border-bottom: 1px solid var(--ligne);
}
.preuve img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.preuve-nom { padding: .8rem 1rem .15rem; font-weight: 750; color: var(--accent); }
.preuve-desc { padding: 0 1rem .9rem; font-size: .88rem; color: var(--encre-douce); }

.preuve-avis {
  margin: 0; padding: 1.2rem 1.3rem;
  background: var(--accent-pale); border-left: 4px solid var(--accent);
  border-radius: 0 14px 14px 0; box-shadow: var(--ombre);
  display: flex; flex-direction: column; justify-content: center;
}
.preuve-avis blockquote { margin: 0; }
.preuve-avis blockquote p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--encre); }
.preuve-avis figcaption { margin-top: .8rem; font-size: .88rem; color: var(--encre-douce); }
.preuve-avis figcaption strong { display: block; color: var(--encre); }
.preuve-avis figcaption a { color: var(--accent); }

/* =============================================================================
   Bouton WhatsApp toujours visible
   ============================================================================= */

.wa-flottant {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.1rem .8rem .95rem;
  background: #25D366; color: #08351A; font-weight: 750;
  border-radius: 999px; text-decoration: none;
  box-shadow: 0 6px 20px rgba(8, 53, 26, .28);
}
.wa-flottant:hover { background: #1FBE5A; color: #08351A; }
@media (max-width: 520px) {
  .wa-flottant { right: 14px; bottom: 14px; padding: .85rem; }
  .wa-flottant span { display: none; }
}
@media print { .wa-flottant { display: none; } }

/* =============================================================================
   WhatsApp — version sobre : vert profond en dégradé, texte blanc,
   au lieu du vert fluo d'origine.
   ============================================================================= */

.btn-wa,
.wa-flottant {
  background: linear-gradient(135deg, #10B981 0%, #047857 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset,
              0 6px 18px -6px rgba(4, 120, 87, .55);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-wa:hover,
.wa-flottant:hover {
  color: #fff;
  background: linear-gradient(135deg, #10B981 0%, #047857 100%);
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset,
              0 10px 24px -8px rgba(4, 120, 87, .65);
}
.btn-wa:active, .wa-flottant:active { transform: translateY(0); }
.btn-wa:focus-visible, .wa-flottant:focus-visible {
  outline: 3px solid rgba(16, 185, 129, .45); outline-offset: 3px;
}

.wa-flottant {
  padding: .75rem 1.15rem .75rem .8rem;
  font-weight: 700; letter-spacing: .01em;
}
.wa-flottant svg {
  width: 30px; height: 30px; padding: 6px;
  background: rgba(255, 255, 255, .16); border-radius: 50%;
}
/* Petit point « en ligne » */
.wa-flottant::after {
  content: ""; position: absolute; top: 9px; left: 36px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #A7F3D0; box-shadow: 0 0 0 2px #047857;
}
@media (max-width: 520px) {
  .wa-flottant { padding: .6rem; }
  .wa-flottant::after { top: 8px; left: 33px; }
}

/* Bonus vidéo dans la carte d'offre */
.offer li.bonus {
  margin-top: .35rem; padding: .55rem .7rem;
  background: var(--vert-pale); border-radius: 10px;
  color: var(--encre);
}
.offer li.bonus::before { content: "🎬"; }
.offer li.bonus strong { color: var(--vert); }