/* ============================================================
   CRESCENDO — Feuille de style globale (maquette sans Elementor)
   Charte officielle Crescendo · Police Avenir Next LT Pro
   Identité reprise du site publié : fond orbital, boutons dorés/violets.
   ============================================================ */

/* ---------- 1. POLICE DE MARQUE ---------- */
@font-face { font-family:"Avenir Next LT Pro"; src:url("../fonts/AvenirNextLTPro-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Avenir Next LT Pro"; src:url("../fonts/AvenirNextLTPro-Demi.ttf") format("truetype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Avenir Next LT Pro"; src:url("../fonts/AvenirNextLTPro-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }

/* ---------- 2. VARIABLES (charte exacte) ---------- */
:root {
  --violet-profond:#4F00BC; --violet-magenta:#8C00DF; --violet-accent:#AF40FF;
  --bleu-profond:#004597; --bleu-vif:#0099FF;
  --or:#E08A00; --or-clair:#F4CB26;
  --creme:#F9F9FB; --blanc:#FFFFFF; --gris-texte:#1C244B; --gris-doux:#6A7390;

  --grad-violet: linear-gradient(120deg,#4F00BC 0%,#8C00DF 100%);
  --grad-violet-bleu: linear-gradient(100deg,#4F00BC 0%,#0099FF 100%);
  --grad-bleu: linear-gradient(120deg,#004597 0%,#0099FF 100%);
  --grad-or: linear-gradient(120deg,#E08A00 0%,#F4CB26 100%);

  --bordure:#E7E7F0; --bordure-douce:#EEF0F6;
  --radius-sm:10px; --radius:18px; --radius-lg:26px; --radius-pill:999px;
  --ombre-sm:0 2px 8px rgba(28,36,75,0.06);
  --ombre:0 14px 40px rgba(28,36,75,0.10);
  --ombre-or:0 14px 34px rgba(224,138,0,0.30);
  --ombre-violet:0 14px 34px rgba(79,0,188,0.26);
  --section-y:clamp(64px,8vw,120px); --max:1200px;
  --transi:0.28s cubic-bezier(0.22,1,0.36,1);
}

/* ---------- 3. RESET / BASE ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:"Avenir Next LT Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400; color:var(--gris-texte); background:var(--blanc); line-height:1.65; font-size:17px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--bleu-profond); text-decoration:none; transition:color var(--transi); }
a:hover { color:var(--bleu-vif); }
h1,h2,h3,h4,h5 { font-weight:700; line-height:1.14; color:var(--gris-texte); margin:0 0 0.5em; letter-spacing:-0.015em; }
h1 { font-size:clamp(2.3rem,5.2vw,3.8rem); }
h2 { font-size:clamp(1.9rem,3.8vw,2.8rem); }
h3 { font-size:clamp(1.3rem,2.4vw,1.85rem); }
h4 { font-size:1.18rem; font-weight:600; }
p { margin:0 0 1.1em; }
strong { font-weight:700; color:var(--gris-texte); }

/* ---------- 4. UTILITAIRES ---------- */
.container { width:100%; max-width:var(--max); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
.section { padding-block:var(--section-y); }
.section--creme { background:var(--creme); }
.section--violet { background:var(--grad-violet); color:rgba(255,255,255,0.92); }
.section--violet h2,.section--violet h3 { color:#fff; }
.center { text-align:center; }
.mx-auto { margin-inline:auto; }
.maxw-720 { max-width:720px; } .maxw-820 { max-width:820px; }

/* Eyebrow : violet majuscule, sobre (comme le site publié) */
.eyebrow { display:inline-block; font-weight:700; font-size:0.8rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--violet-magenta); margin:0 0 14px; }
.section--violet .eyebrow { color:var(--or-clair); }
.lead { font-size:1.12rem; color:var(--gris-doux); }
.section--violet .lead { color:rgba(255,255,255,0.85); }

/* ---------- 5. BOUTONS (pilules majuscules : doré = principal, violet = secondaire) ---------- */
.btn {
  display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:0.9rem;
  text-transform:uppercase; letter-spacing:0.05em; padding:16px 32px; border-radius:var(--radius-pill);
  border:2px solid transparent; cursor:pointer; line-height:1; white-space:nowrap;
  transition:transform var(--transi),box-shadow var(--transi),background var(--transi),color var(--transi),border-color var(--transi);
}
.btn--primary { background:var(--grad-or); color:#fff; box-shadow:var(--ombre-or); }
.btn--violet { background:var(--grad-violet); color:#fff; box-shadow:var(--ombre-violet); }
.btn--ghost { background:transparent; color:var(--violet-profond); border-color:var(--bordure); }
.btn--ghost:hover { color:var(--violet-profond); border-color:var(--violet-accent); background:rgba(175,64,255,0.06); }
.btn--light { background:#fff; color:var(--violet-profond); }
.btn-row { display:flex; flex-wrap:wrap; gap:16px; }

/* ============================================================
   6. HEADER
   ============================================================ */
.site-header {
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,0.86);
  backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color var(--transi),box-shadow var(--transi);
}
.site-header.is-scrolled { border-bottom-color:var(--bordure-douce); box-shadow:var(--ombre-sm); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; height:80px; }
.brand img { height:40px; width:auto; }
.main-nav { display:flex; align-items:center; gap:30px; }
.main-nav a { color:var(--gris-texte); font-weight:600; font-size:0.98rem; position:relative; padding:4px 0; }
.main-nav a:not(.btn)::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; border-radius:2px; background:var(--grad-violet); transition:width var(--transi); }
.main-nav a:not(.btn):hover { color:var(--violet-profond); }
.main-nav a:not(.btn):hover::after { width:100%; }
.main-nav .btn { font-size:0.78rem; padding:11px 22px; }
.header-actions { display:flex; align-items:center; gap:16px; }
.header-actions .btn { font-size:0.78rem; padding:12px 24px; }
.nav-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:46px; height:46px; border:1px solid var(--bordure); border-radius:12px; background:#fff; cursor:pointer; }
.nav-toggle span { display:block; width:22px; height:2px; margin-inline:auto; background:var(--gris-texte); border-radius:2px; transition:transform var(--transi),opacity var(--transi); }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   7. FOND ORBITAL (hero + pages internes) — signature Crescendo
   ============================================================ */
.hero, .page-hero { position:relative; overflow:hidden; background:var(--blanc); }
.hero { padding-block:clamp(72px,9vw,120px); }
.page-hero { padding-block:clamp(56px,7vw,96px); }
.hero__bg { position:absolute; inset:0; z-index:0; }
/* lueurs violette (gauche) + bleue (droite) + or (bas) */
.hero__bg::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(620px 520px at 12% 22%, rgba(140,0,223,0.20), transparent 62%),
    radial-gradient(640px 540px at 88% 26%, rgba(0,153,255,0.18), transparent 62%),
    radial-gradient(520px 480px at 50% 118%, rgba(244,203,38,0.10), transparent 60%);
}
/* champ d'orbites qui tourne lentement */
.hero__bg::after {
  content:""; position:absolute; top:50%; left:50%;
  width:min(1180px,140vw); aspect-ratio:1;
  background:url("../img/orbit.svg") center/contain no-repeat;
  transform:translate(-50%,-50%); transform-origin:center;
  animation:orbit-spin 120s linear infinite;
}
@keyframes orbit-spin { from{transform:translate(-50%,-50%) rotate(0deg);} to{transform:translate(-50%,-50%) rotate(360deg);} }
/* neutralise l'ancien fond (blobs/grille) encore présent dans le HTML des pages internes */
.hero__bg .blob, .hero__grid { display:none !important; }

/* ---------- HERO accueil (centré) ---------- */
.hero__content { position:relative; z-index:1; text-align:center; max-width:860px; margin-inline:auto; }
.hero-badge {
  display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--bordure-douce);
  box-shadow:var(--ombre-sm); border-radius:var(--radius-pill); padding:10px 22px; font-weight:600;
  font-size:0.95rem; color:var(--gris-texte); margin-bottom:28px;
}
.hero-badge svg { color:var(--or); flex:none; }
.hero h1 { margin-bottom:22px; }
.hero h1 .accent { background:var(--grad-violet-bleu); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero__sub { font-size:1.2rem; color:var(--gris-doux); max-width:680px; margin:0 auto 34px; }
.hero__btns { justify-content:center; }

/* ---------- HERO pages internes (deux colonnes) ---------- */
.page-hero__inner { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(32px,5vw,64px); align-items:center; }
.page-hero__text { max-width:600px; }
.page-hero h1 { margin-bottom:14px; }
.page-hero .page-hero__sub { font-size:1.3rem; font-weight:700; color:var(--violet-profond); margin-bottom:22px; line-height:1.25; }
.page-hero p { color:var(--gris-doux); }
.page-hero__media img { width:100%; border-radius:var(--radius-lg); box-shadow:var(--ombre); }
.breadcrumb { font-size:0.85rem; color:var(--gris-doux); margin-bottom:18px; }
.breadcrumb a { color:var(--gris-doux); }
.breadcrumb a:hover { color:var(--violet-profond); }

/* ---------- Bandeau 3 atouts ---------- */
.usp-row { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:64px; }
.usp { display:flex; align-items:center; gap:18px; background:#fff; border:1px solid var(--bordure-douce); border-radius:var(--radius); padding:22px 24px; box-shadow:var(--ombre-sm); transition:transform var(--transi),box-shadow var(--transi); }
.usp:hover { transform:translateY(-4px); box-shadow:var(--ombre); }
.usp img { width:58px; height:58px; flex:none; }
.usp h4 { margin:0; font-size:1rem; line-height:1.35; }

/* ============================================================
   8. BLOCS TEXTE + IMAGE
   ============================================================ */
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:center; }
.split--reverse .split__media { order:-1; }
.split__media img { width:100%; border-radius:var(--radius-lg); box-shadow:var(--ombre); }
.split h3 { margin-bottom:18px; }

/* ============================================================
   9. SERVICES (illustrations affichées en entier)
   ============================================================ */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:56px; }
.service-card { position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--bordure-douce); border-radius:var(--radius); padding:18px 18px 28px; box-shadow:var(--ombre-sm); overflow:hidden; transition:transform var(--transi),box-shadow var(--transi),border-color var(--transi); }
.service-card:hover { transform:translateY(-6px); box-shadow:var(--ombre); border-color:transparent; }
.service-card__media { border-radius:14px; overflow:hidden; margin-bottom:22px; background:linear-gradient(140deg,rgba(79,0,188,0.08),rgba(0,153,255,0.08)); aspect-ratio:16/11; display:grid; place-items:center; padding:14px; }
.service-card__media img { width:100%; height:100%; object-fit:contain; transition:transform 0.5s ease; }
.service-card:hover .service-card__media img { transform:scale(1.05); }
.service-card__body { padding-inline:10px; display:flex; flex-direction:column; flex:1; }
.service-card h3 { font-size:1.3rem; margin-bottom:12px; }
.service-card p { color:var(--gris-doux); font-size:0.98rem; flex:1; }
.service-link { display:inline-flex; align-items:center; gap:8px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; font-size:0.82rem; color:var(--violet-profond); margin-top:16px; }
.service-link .arrow { transition:transform var(--transi); }
.service-card:hover .service-link .arrow { transform:translateX(5px); }

/* ============================================================
   10. MÉTHODE (étapes)
   ============================================================ */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:52px; }
.step { background:#fff; border:1px solid var(--bordure-douce); border-radius:var(--radius); padding:30px 26px; box-shadow:var(--ombre-sm); transition:transform var(--transi),box-shadow var(--transi); }
.step:hover { transform:translateY(-5px); box-shadow:var(--ombre); }
.step__num { display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:14px; font-weight:700; font-size:1.25rem; color:#fff; background:var(--grad-violet); margin-bottom:18px; }
.step h4 { font-size:1.22rem; font-weight:700; margin-bottom:10px; }
.step p { color:var(--gris-doux); font-size:0.97rem; margin:0; }
.method-media { margin-top:56px; }
.method-media img { width:100%; border-radius:var(--radius-lg); box-shadow:var(--ombre); }

/* ============================================================
   11. POURQUOI / VALEURS
   ============================================================ */
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:52px; }
.feature { background:#fff; border:1px solid var(--bordure-douce); border-radius:var(--radius); padding:32px 28px; box-shadow:var(--ombre-sm); transition:transform var(--transi),box-shadow var(--transi); }
.feature:hover { transform:translateY(-5px); box-shadow:var(--ombre); }
.feature__icon { width:64px; height:64px; object-fit:contain; margin-bottom:18px; }
.feature h4 { font-size:1.22rem; font-weight:700; margin-bottom:12px; }
.feature p { color:var(--gris-doux); font-size:0.97rem; margin:0; }

.about__grid { display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(36px,6vw,76px); align-items:center; }
.about__photo { position:relative; }
.about__photo img { width:100%; max-width:400px; border-radius:var(--radius-lg); box-shadow:var(--ombre); }
.about__photo::before { content:""; position:absolute; inset:18px -18px -18px 18px; border-radius:var(--radius-lg); background:var(--grad-violet); opacity:0.10; z-index:-1; }
.values { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:56px; }
.value { display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:32px 26px; border:1px solid var(--bordure-douce); border-radius:22px; background:#fff; box-shadow:var(--ombre-sm); transition:transform var(--transi),box-shadow var(--transi); }
.value:hover { transform:translateY(-5px); box-shadow:var(--ombre); }
.value img { width:64px; height:64px; flex:none; }
.value h4 { margin:0; font-size:1.15rem; }
.value p { margin:0; color:var(--gris-doux); font-size:0.95rem; }
.value > div { display:grid; gap:12px; }
.value .value__hook { font-style:italic; }

/* ============================================================
   12. CONTACT
   ============================================================ */
.contact-cta { text-align:center; }
.contact-cta p { max-width:640px; margin-inline:auto; }
.contact-mail { display:inline-block; margin-top:26px; font-weight:600; color:#fff; border-bottom:2px solid rgba(255,255,255,0.45); padding-bottom:3px; }
.contact-mail:hover { color:#fff; border-color:#fff; }

/* ============================================================
   13. ARTICLES / BLOG
   ============================================================ */
.posts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:52px; }
.post-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--bordure-douce); border-radius:var(--radius); overflow:hidden; box-shadow:var(--ombre-sm); transition:transform var(--transi),box-shadow var(--transi); }
.post-card:hover { transform:translateY(-6px); box-shadow:var(--ombre); }
.post-card__media { aspect-ratio:16/10; overflow:hidden; display:block; }
.post-card__media img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.post-card:hover .post-card__media img { transform:scale(1.05); }
.post-card__body { padding:24px; display:flex; flex-direction:column; flex:1; }
.post-tag { font-size:0.74rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--violet-magenta); margin-bottom:10px; }
.post-card h4 { font-size:1.12rem; line-height:1.4; margin-bottom:12px; }
.post-card h4 a { color:var(--gris-texte); }
.post-card h4 a:hover { color:var(--violet-profond); }
.post-card p { color:var(--gris-doux); font-size:0.93rem; flex:1; }
.post-card__foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:14px; border-top:1px solid var(--bordure-douce); font-size:0.85rem; color:var(--gris-doux); }
.post-card__foot a { font-weight:700; text-transform:uppercase; letter-spacing:0.03em; font-size:0.78rem; color:var(--violet-profond); }

/* ============================================================
   14. PAGE INTERNE — PROSE / SOUS-BLOCS / ENCADRÉ
   ============================================================ */
.prose { max-width:820px; }
.prose.center-block { margin-inline:auto; text-align:center; }
.prose p { color:var(--gris-doux); font-size:1.04rem; }
.prose p strong { color:var(--gris-texte); }
.subblocks { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:50px; }
.subblock { background:#fff; border:1px solid var(--bordure-douce); border-radius:var(--radius); padding:28px 26px; box-shadow:var(--ombre-sm); transition:transform var(--transi),box-shadow var(--transi); }
.subblock:hover { transform:translateY(-5px); box-shadow:var(--ombre); }
.subblock__num { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; font-weight:700; color:#fff; background:var(--grad-violet); margin-bottom:16px; }
.subblock h4 { font-size:1.18rem; font-weight:700; margin-bottom:10px; }
.subblock p { color:var(--gris-doux); font-size:0.96rem; margin:0; }
.callout { display:flex; gap:18px; align-items:flex-start; background:#fff; border:1px solid var(--bordure-douce); border-left:4px solid var(--violet-profond); border-radius:var(--radius); padding:24px 26px; box-shadow:var(--ombre-sm); margin-top:34px; }
.callout img { width:48px; height:48px; flex:none; }
.callout p { margin:0; color:var(--gris-doux); }
.callout strong { color:var(--gris-texte); }

/* ============================================================
   15. TARIFS
   ============================================================ */
.pricing { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:52px; align-items:stretch; }
.pricing.cols-2 { grid-template-columns:repeat(2,1fr); max-width:760px; margin-inline:auto; }
.price-card { position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--bordure-douce); border-radius:var(--radius); padding:32px 28px; box-shadow:var(--ombre-sm); transition:transform var(--transi),box-shadow var(--transi); }
.price-card:hover { transform:translateY(-6px); box-shadow:var(--ombre); }
.price-card--featured { border-color:transparent; box-shadow:var(--ombre-violet); }
.price-card--featured::after { content:"Recommandé"; position:absolute; top:18px; right:18px; font-size:0.7rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#fff; background:var(--grad-violet); padding:5px 12px; border-radius:var(--radius-pill); }
.price-card h3 { font-size:1.25rem; margin-bottom:14px; }
.price-card__from { font-size:0.82rem; color:var(--gris-doux); display:block; margin-bottom:4px; min-height:1em; }
.price-card__amount { display:flex; align-items:baseline; gap:6px; margin-bottom:4px; }
.price-card__price { font-size:2.1rem; font-weight:700; background:var(--grad-violet); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.price-card__ht { font-size:0.82rem; color:var(--gris-doux); }
.price-card ul { list-style:none; margin:22px 0 26px; padding:0; display:grid; gap:12px; }
.price-card li { position:relative; padding-left:30px; color:var(--gris-texte); font-size:0.96rem; }
.price-card li::before { content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%; background:var(--grad-violet); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat; }
.price-card .btn { margin-top:auto; justify-content:center; }

/* ============================================================
   16. FAQ
   ============================================================ */
.faq { max-width:820px; margin-inline:auto; margin-top:44px; display:grid; gap:14px; }
.faq details { background:#fff; border:1px solid var(--bordure-douce); border-radius:var(--radius); box-shadow:var(--ombre-sm); overflow:hidden; }
.faq summary { list-style:none; cursor:pointer; padding:20px 56px 20px 24px; font-weight:600; font-size:1.05rem; color:var(--gris-texte); position:relative; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%); font-size:1.5rem; font-weight:400; color:var(--violet-profond); transition:transform var(--transi); }
.faq details[open] summary::after { transform:translateY(-50%) rotate(45deg); }
.faq__body { padding:0 24px 22px; color:var(--gris-doux); }
.faq__body p { margin:0 0 0.8em; } .faq__body p:last-child { margin-bottom:0; }

/* ============================================================
   17. PAGE LÉGALE
   ============================================================ */
.legal-hero { background:var(--creme); padding-block:clamp(48px,6vw,80px); border-bottom:1px solid var(--bordure-douce); }
.legal-content { max-width:820px; margin-inline:auto; padding-block:var(--section-y); }
.legal-content h2 { font-size:1.5rem; margin-top:40px; }
.legal-content h3 { font-size:1.2rem; margin-top:28px; }
.legal-content p,.legal-content li { color:var(--gris-doux); }
.legal-content ul { padding-left:20px; }
.legal-content hr { border:none; border-top:1px solid var(--bordure-douce); margin:32px 0; }
.legal-date { color:var(--gris-doux); font-size:0.92rem; margin-bottom:6px; }

/* ============================================================
   18. FOOTER
   ============================================================ */
.site-footer { background:var(--gris-texte); color:rgba(255,255,255,0.72); padding-block:clamp(48px,6vw,76px) 30px; font-size:0.95rem; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:40px; }
.site-footer h5 { color:#fff; font-size:0.95rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; margin:0 0 18px; }
.footer-brand img { height:34px; margin-bottom:18px; }
.footer-brand p { max-width:360px; color:rgba(255,255,255,0.6); font-size:0.92rem; }
.footer-col ul { list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.footer-col a { color:rgba(255,255,255,0.72); } .footer-col a:hover { color:#fff; }
.footer-contact a { color:rgba(255,255,255,0.72); display:block; margin-bottom:8px; } .footer-contact a:hover { color:#fff; }
.footer-bottom { margin-top:46px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.12); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:0.85rem; color:rgba(255,255,255,0.5); }

/* ============================================================
   19. ANIMATIONS
   ============================================================ */
.reveal { opacity:0; transform:translateY(26px); transition:opacity 0.7s ease,transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.reveal.is-visible { opacity:1; transform:none; }
/* L'échelonnement des apparitions est géré en JS (main.js) :
   un transition-delay CSS retarderait aussi les effets de survol. */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .hero__bg::after { animation:none !important; }
}

/* ============================================================
   20. RESPONSIVE
   ============================================================ */
@media (max-width:1024px) { .footer-grid { grid-template-columns:1fr 1fr; gap:34px; } .footer-brand { grid-column:1 / -1; } }
@media (max-width:960px) {
  .page-hero__inner { grid-template-columns:1fr; }
  .page-hero__media { display:none; }
}
@media (max-width:980px) {
  .nav-toggle { display:flex; }
  .main-nav {
    position:fixed; inset:80px 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:#fff;
    padding:12px 24px 24px; border-bottom:1px solid var(--bordure-douce); box-shadow:var(--ombre);
    transform:translateY(-12px); opacity:0; visibility:hidden; transition:transform var(--transi),opacity var(--transi),visibility var(--transi);
  }
  .main-nav.is-open { transform:none; opacity:1; visibility:visible; }
  .main-nav a { padding:14px 4px; border-bottom:1px solid var(--bordure-douce); }
  .main-nav a:not(.btn)::after { display:none; }
  .main-nav .btn { margin-top:12px; justify-content:center; }
  .header-actions .btn:not(.nav-toggle) { display:none; }
}
@media (max-width:880px) {
  .usp-row,.services-grid,.steps,.feature-grid,.posts-grid,.subblocks,.pricing,.pricing.cols-2,.values { grid-template-columns:1fr; }
  .split,.about__grid { grid-template-columns:1fr; }
  .split--reverse .split__media { order:0; }
  .about__photo { justify-self:center; } .about__photo img { max-width:320px; }
  .pricing.cols-2 { max-width:460px; }
}
@media (max-width:640px) {
  .btn-row { width:100%; flex-direction:column; align-items:stretch; }
  .btn-row .btn { width:100%; justify-content:center; }
}
@media (max-width:520px) {
  body { font-size:16px; }
}

/* ============================================================
   21. FLOW — déroulé « étape par étape » (page Méthode, etc.)
   ============================================================ */
.flow { max-width:820px; margin:52px auto 0; display:grid; gap:20px; }
.flow__item { display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:flex-start; background:#fff; border:1px solid var(--bordure-douce); border-radius:var(--radius); padding:26px 28px; box-shadow:var(--ombre-sm); transition:transform var(--transi),box-shadow var(--transi); }
.flow__item:hover { transform:translateX(6px); box-shadow:var(--ombre); }
.flow__num { display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:14px; font-weight:700; font-size:1.2rem; color:#fff; background:var(--grad-violet); flex:none; box-shadow:var(--ombre-violet); }
.flow__content h4 { font-size:1.2rem; font-weight:700; margin:4px 0 8px; }
.flow__content p { color:var(--gris-doux); font-size:0.99rem; margin:0; }
@media (max-width:520px) { .flow__item { grid-template-columns:1fr; gap:14px; } }

/* Petit bandeau de repères (page À propos) */
.stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px; }
.stat { text-align:center; background:#fff; border:1px solid var(--bordure-douce); border-radius:var(--radius); padding:28px 22px; box-shadow:var(--ombre-sm); }
.stat__big { font-size:2.2rem; font-weight:700; background:var(--grad-violet); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; display:block; margin-bottom:6px; }
.stat p { margin:0; color:var(--gris-doux); font-size:0.96rem; }
@media (max-width:880px) { .stat-row { grid-template-columns:1fr; } }

/* ============================================================
   22. ENCADRÉ « EXEMPLE », CITATION, FORMULAIRE (Cas clients / Ressources / Contact)
   ============================================================ */
.notice { display:flex; gap:14px; align-items:flex-start; background:linear-gradient(120deg,rgba(224,138,0,0.10),rgba(244,203,38,0.10)); border:1px solid rgba(224,138,0,0.32); border-radius:var(--radius); padding:16px 20px; color:var(--gris-texte); font-size:0.95rem; }
.notice img { width:30px; height:30px; flex:none; }
.notice p { margin:0; }
.badge-ex { display:inline-block; font-size:0.7rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#fff; background:var(--grad-or); padding:5px 12px; border-radius:var(--radius-pill); margin-bottom:14px; }

.quote { max-width:820px; margin:34px auto 0; background:#fff; border:1px solid var(--bordure-douce); border-left:4px solid var(--violet-profond); border-radius:var(--radius); padding:28px 30px; box-shadow:var(--ombre-sm); }
.quote p { font-size:1.15rem; color:var(--gris-texte); font-style:italic; margin:0 0 14px; }
.quote cite { font-style:normal; font-weight:700; color:var(--violet-profond); font-size:0.92rem; }

.tag-file { display:inline-block; font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--violet-magenta); margin-bottom:8px; }

.lead-form { background:#fff; border:1px solid var(--bordure-douce); border-radius:var(--radius); box-shadow:var(--ombre-sm); padding:clamp(24px,4vw,40px); max-width:760px; margin-inline:auto; }
.form-row { display:grid; gap:16px; }
.form-row + .form-row { margin-top:16px; }
.form-row.cols-2 { grid-template-columns:1fr 1fr; }
.field { display:flex; flex-direction:column; gap:7px; text-align:left; }
.field label { font-weight:600; font-size:0.9rem; color:var(--gris-texte); }
.field input, .field select, .field textarea { font-family:inherit; font-size:1rem; color:var(--gris-texte); background:var(--creme); border:1px solid var(--bordure); border-radius:var(--radius-sm); padding:13px 15px; transition:border-color var(--transi),box-shadow var(--transi); }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--violet-accent); box-shadow:0 0 0 3px rgba(175,64,255,0.14); background:#fff; }
.field textarea { resize:vertical; min-height:130px; }
.form-consent { display:flex; gap:10px; align-items:flex-start; font-size:0.85rem; color:var(--gris-doux); margin-top:4px; }
.form-consent input { margin-top:3px; flex:none; }
.lead-form .btn { margin-top:20px; width:100%; justify-content:center; }
@media (max-width:620px) { .form-row.cols-2 { grid-template-columns:1fr; } }

/* ============================================================
   23. NAVIGATION — menus déroulants
   ============================================================ */
.main-nav .nav-link { display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-weight:600; font-size:0.98rem; color:var(--gris-texte); background:none; border:none; cursor:pointer; padding:4px 0; position:relative; }
.main-nav .nav-link:not(.btn):hover { color:var(--violet-profond); }
.main-nav .nav-link:not(.btn)::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; border-radius:2px; background:var(--grad-violet); transition:width var(--transi); }
.main-nav .nav-link:not(.btn):hover::after, .has-dropdown:focus-within > .nav-link:not(.btn)::after { width:100%; }
.has-dropdown { position:relative; }
.has-dropdown .caret { transition:transform var(--transi); }
.has-dropdown:hover .caret, .has-dropdown:focus-within .caret { transform:rotate(180deg); }
.has-dropdown::after { content:""; position:absolute; left:0; right:0; top:100%; height:16px; } /* pont de survol */
.dropdown { position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px); min-width:255px; background:#fff; border:1px solid var(--bordure-douce); border-radius:var(--radius); box-shadow:var(--ombre); padding:10px; display:grid; gap:2px; opacity:0; visibility:hidden; transition:opacity var(--transi),transform var(--transi),visibility var(--transi); z-index:200; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dropdown a { display:block; padding:10px 14px; border-radius:10px; color:var(--gris-texte) !important; font-weight:600; font-size:0.94rem; white-space:nowrap; }
.dropdown a::after { display:none !important; }
.dropdown a:hover { background:var(--creme); color:var(--violet-profond) !important; }
@media (max-width:980px) {
  .has-dropdown { width:100%; }
  .main-nav .nav-link { width:100%; justify-content:space-between; padding:14px 4px; border-bottom:1px solid var(--bordure-douce); }
  .main-nav .nav-link:not(.btn)::after { display:none !important; }
  .has-dropdown::after { display:none; }
  .dropdown,
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown { position:static; transform:none !important; opacity:1; visibility:visible; min-width:0; box-shadow:none; border:none; padding:2px 0 8px 14px; }
  .dropdown { display:none; }
  .has-dropdown.is-open .dropdown { display:grid; }
  .has-dropdown.is-open .caret { transform:rotate(180deg); }
  .dropdown a { border-bottom:none; padding:11px 8px; }
}

/* ============================================================
   24. CALCULATEURS (outils interactifs)
   ============================================================ */
.calc { display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(28px,4vw,48px); align-items:start; margin-top:24px; }
.calc__form { background:#fff; border:1px solid var(--bordure-douce); border-radius:var(--radius); box-shadow:var(--ombre-sm); padding:clamp(24px,3vw,36px); }
.calc__form .field { margin-bottom:18px; }
.calc__form .field:last-of-type { margin-bottom:0; }
.calc__hint { font-size:0.82rem; color:var(--gris-doux); margin-top:3px; }
.calc__result { background:var(--grad-violet); color:#fff; border-radius:var(--radius); box-shadow:var(--ombre-violet); padding:clamp(26px,3vw,36px); position:sticky; top:100px; }
.calc__result h3 { color:#fff; font-size:1.12rem; margin-bottom:22px; letter-spacing:0.01em; }
.calc__out { margin-bottom:22px; }
.calc__out:last-child { margin-bottom:0; }
.calc__out > span { display:block; font-size:0.9rem; color:rgba(255,255,255,0.82); margin-bottom:5px; }
.calc__out strong { font-size:2rem; font-weight:700; line-height:1.1; display:block; }
.calc__out.sub strong { font-size:1.35rem; }
.calc__note { font-size:0.82rem; color:rgba(255,255,255,0.78); margin-top:22px; border-top:1px solid rgba(255,255,255,0.22); padding-top:16px; }
@media (max-width:820px) { .calc { grid-template-columns:1fr; } .calc__result { position:static; } }

/* ============================================================
   25. CHIPS (villes couvertes — pages locales)
   ============================================================ */
.chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.chip { display:inline-block; padding:9px 17px; border-radius:var(--radius-pill); background:#fff; border:1px solid var(--bordure-douce); box-shadow:var(--ombre-sm); font-size:0.9rem; font-weight:600; color:var(--gris-texte); }

/* Rangée « Zones d'intervention » dans le footer (SEO local, footer uniquement) */
.footer-zones { margin-top:40px; padding-top:26px; border-top:1px solid rgba(255,255,255,0.12); }
.footer-zones h5 { color:#fff; font-size:0.95rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; margin:0 0 14px; }
.footer-zones nav { display:flex; flex-wrap:wrap; gap:8px 18px; }
.footer-zones a { color:rgba(255,255,255,0.6); font-size:0.9rem; }
.footer-zones a:hover { color:#fff; }

/* Bloc géographique du footer (inspiré Mankova) */
.footer-geo { margin-top:44px; padding-top:32px; border-top:1px solid rgba(255,255,255,0.12); }
.footer-geo__title { display:block; color:rgba(255,255,255,0.5); font-size:0.78rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:24px; }
.footer-geo__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px 40px; }
.footer-geo__col h6 { margin:0 0 13px; font-size:0.9rem; font-weight:700; color:#fff; }
.footer-geo__col h6 a { color:#fff; }
.footer-geo__col ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.footer-geo__col a { color:rgba(255,255,255,0.58); font-size:0.88rem; }
.footer-geo__col a:hover { color:#fff; }
@media (max-width:900px) { .footer-geo__grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px) { .footer-geo__grid { grid-template-columns:1fr; } }

/* ============================================================
   26. PAGE CONTACT (formulaire + coordonnées + carte)
   ============================================================ */
.contact-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(28px,4vw,48px); align-items:start; margin-top:24px; }
.contact-info { display:grid; gap:16px; }
.contact-info__item { display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--bordure-douce); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--ombre-sm); }
.contact-info__item img { width:38px; height:38px; flex:none; }
.contact-info__item h4 { margin:0 0 4px; font-size:1.02rem; }
.contact-info__item p { margin:0; color:var(--gris-doux); font-size:0.95rem; }
.contact-info__item a { color:var(--bleu-profond); font-weight:600; }
.contact-info__item a:hover { color:var(--violet-profond); }
.map-embed { margin-top:4px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--bordure-douce); box-shadow:var(--ombre-sm); }
.map-embed iframe { display:block; width:100%; height:290px; border:0; }
@media (max-width:820px) { .contact-grid { grid-template-columns:1fr; } }

/* ============================================================
   27. TABLEAU COMPARATIF (rubrique /comparatifs/)
   ============================================================ */
.compare-wrap { max-width:900px; margin:24px auto 0; overflow-x:auto; }
.compare { width:100%; border-collapse:collapse; font-size:0.95rem; background:#fff; border:1px solid var(--bordure-douce); border-radius:var(--radius); overflow:hidden; box-shadow:var(--ombre-sm); }
.compare th, .compare td { padding:14px 16px; text-align:left; border-bottom:1px solid var(--bordure-douce); vertical-align:top; }
.compare thead th { background:var(--creme); font-weight:700; color:var(--gris-texte); font-size:0.9rem; }
.compare th[scope="row"] { font-weight:600; color:var(--gris-texte); width:24%; }
.compare td { color:var(--gris-doux); }
.compare tbody tr:last-child td, .compare tbody tr:last-child th { border-bottom:none; }
.compare col.hi, .compare td.hi { background:rgba(79,0,188,0.05); }
.compare thead th.hi { background:rgba(79,0,188,0.10); color:var(--violet-profond); }
@media (max-width:640px) {
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display:block; }
  .compare thead { display:none; }
  .compare tr { border-bottom:1px solid var(--bordure-douce); padding:6px 0; }
  .compare tr:last-child { border-bottom:none; }
  .compare th[scope="row"] { width:auto; border:none; padding-bottom:2px; }
  .compare td { border:none; padding-top:2px; }
  .compare td::before { content:attr(data-col) " : "; font-weight:600; color:var(--gris-texte); }
}

/* ============================================================
   28. AUTO-DIAGNOSTIC — Score de pilotage de votre TPE
   ============================================================ */
.diag { max-width:720px; margin:0 auto; background:var(--blanc); border:1px solid var(--bordure-douce); border-radius:var(--radius-lg); box-shadow:var(--ombre); padding:clamp(22px,3.4vw,40px); }
.diag__head { display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.diag__progress { flex:1; height:8px; background:var(--creme); border-radius:var(--radius-pill); overflow:hidden; }
.diag__fill { display:block; height:100%; width:12%; background:var(--grad-violet-bleu); border-radius:var(--radius-pill); transition:width .4s cubic-bezier(0.22,1,0.36,1); }
.diag__count { font-size:.82rem; font-weight:600; color:var(--gris-doux); white-space:nowrap; }
.diag__theme { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--violet-profond); background:rgba(79,0,188,.07); padding:5px 13px; border-radius:var(--radius-pill); margin-bottom:16px; }
.diag__q { font-size:clamp(1.2rem,2.4vw,1.5rem); line-height:1.32; margin:0 0 24px; color:var(--gris-texte); }
.diag__opts { display:flex; flex-direction:column; gap:12px; }
.diag-opt { text-align:left; padding:15px 18px; border:1.5px solid var(--bordure); border-radius:14px; background:var(--blanc); font:inherit; font-size:1rem; line-height:1.4; color:var(--gris-texte); cursor:pointer; transition:border-color .18s, background .18s, box-shadow .18s; }
.diag-opt:hover { border-color:var(--violet-accent); background:rgba(79,0,188,.03); }
.diag-opt.is-selected { border-color:var(--violet-profond); background:rgba(79,0,188,.08); box-shadow:0 0 0 3px rgba(79,0,188,.13); }
.diag__nav { display:flex; justify-content:space-between; align-items:center; margin-top:30px; gap:12px; }
.diag-prev { background:none; border:none; font:inherit; font-weight:600; color:var(--gris-doux); cursor:pointer; padding:8px 4px; transition:color var(--transi); }
.diag-prev:hover { color:var(--violet-profond); }
.diag-prev[disabled] { opacity:0; pointer-events:none; }
/* Résultat */
.diag-score { text-align:center; margin-bottom:6px; }
.diag-score__num { font-size:clamp(3rem,7vw,3.8rem); font-weight:800; line-height:1; letter-spacing:-.02em; }
.diag-score__num span { font-size:1.1rem; font-weight:600; color:var(--gris-doux); margin-left:2px; }
.diag-score--lo .diag-score__num { color:#D64550; }
.diag-score--mid .diag-score__num { color:var(--or); }
.diag-score--hi .diag-score__num { color:#2E9E7A; }
.diag-band { position:relative; height:10px; border-radius:var(--radius-pill); margin:20px auto 0; max-width:460px; background:linear-gradient(90deg,#D64550 0%,var(--or) 50%,#2E9E7A 100%); }
.diag-band__mark { position:absolute; top:50%; width:22px; height:22px; background:var(--blanc); border:3px solid var(--gris-texte); border-radius:50%; transform:translate(-50%,-50%); box-shadow:var(--ombre-sm); }
.diag-bucket { text-align:center; max-width:560px; margin:24px auto 32px; }
.diag-bucket h3 { font-size:clamp(1.4rem,3vw,1.7rem); margin:0 0 10px; }
.diag-bucket p { color:var(--gris-doux); margin:0; }
.diag-recos__title { font-size:.86rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--gris-doux); text-align:center; margin:0 0 18px; }
.diag-recos { display:flex; flex-direction:column; gap:14px; }
.diag-reco { border:1px solid var(--bordure-douce); border-left:4px solid var(--violet-magenta); border-radius:14px; padding:17px 20px; background:var(--creme); }
.diag-reco h4 { margin:0 0 7px; font-size:1.08rem; color:var(--violet-profond); }
.diag-reco p { margin:0 0 11px; color:var(--gris-doux); font-size:.96rem; }
.diag-reco__links { display:flex; flex-wrap:wrap; gap:8px 20px; }
.diag-reco__links a { font-weight:600; font-size:.9rem; display:inline-flex; align-items:center; gap:5px; }
.diag-reco__links a::before { content:"→"; color:var(--violet-magenta); }
.diag-result__cta { text-align:center; margin-top:32px; padding-top:28px; border-top:1px solid var(--bordure-douce); }
.diag-result__cta p { color:var(--gris-doux); margin:0 0 18px; }
.diag-result__cta .diag-prev { margin-left:10px; }

/* ============================================================
   29. LISIBILITÉ SUR FONDS FONCÉS (charte : texte clair/blanc)
   Garantit que TOUT le texte posé sur un fond violet est clair :
   paragraphes, listes, titres, gras et liens inline (sinon bleu/gris foncé).
   ============================================================ */
.section--violet, .section--violet p, .section--violet li, .section--violet .prose, .section--violet .lead { color:rgba(255,255,255,0.92); }
.section--violet h2, .section--violet h3, .section--violet h4, .section--violet h5, .section--violet strong { color:#fff; }
.section--violet a:not(.btn) { color:#fff; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }
.section--violet a:not(.btn):hover { color:var(--or-clair); }

/* ============================================================
   30. HERO ORBITAL (effet fourni par Hugo) + ALIGNEMENT SITE PUBLIÉ
   ============================================================ */
/* Couche d'effet injectée par hero-fx.js */
.crescendo-hero { position:relative; overflow:hidden; }
.cres-hero-fx { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.cres-halos { position:absolute; inset:0; }
.cres-halos .halo { position:absolute; border-radius:50%; background:radial-gradient(circle at 50% 50%, rgba(var(--c), calc(var(--o) * 0.45)) 0%, rgba(var(--c),0) 68%); }
.halo-grain { position:absolute; inset:0; }
.cres-orbit { position:absolute; inset:0; width:100%; height:100%; }
.crescendo-hero .container, .crescendo-hero .hero__content, .crescendo-hero .page-hero__inner, .hero .container, .page-hero .container, .page-hero__inner { position:relative; z-index:1; }
.crescendo-hero .hero__bg { display:none; }

/* Boutons : pilule MAJUSCULES à dégradé (charte réelle du site) */
.btn { border-radius:var(--radius-pill); text-transform:uppercase; letter-spacing:1px; font-weight:600; }
.btn--primary { background:linear-gradient(90deg,#E08A00 0%,#F4CB26 100%); color:#fff; box-shadow:0 10px 24px rgba(224,138,0,0.24); }
.btn--violet { background:linear-gradient(90deg,#4F00BC 0%,#8C00DF 100%); color:#fff; box-shadow:0 10px 24px rgba(79,0,188,0.22); }
.btn--light { background:#fff; color:#4F00BC; box-shadow:0 10px 24px rgba(0,0,0,0.10); }

/* Couleurs texte alignées : titres quasi noirs, corps ardoise, liens magenta */
body { color:#334155; }
h1,h2,h3,h4,h5,h6 { color:#15161D; letter-spacing:normal; }
.section--violet h1,.section--violet h2,.section--violet h3,.section--violet h4,.section--violet h5 { color:#fff; }
a { color:#8D0DE9; } a:hover { color:#4F00BC; }
.section--violet a:not(.btn) { color:#fff; }
.footer-col a, .footer-contact a, .footer-geo__col a, .footer-geo__col h6 a { color:rgba(255,255,255,0.72); }
.footer-col a:hover, .footer-contact a:hover, .footer-geo__col a:hover { color:#fff; }

/* Cartes : coins bien arrondis (comme le site) */
.service-card, .subblock, .callout, .compare, .diag, .lead-form, .contact-info, .price-card { border-radius:22px; }

/* Bloc « Rencontrons-nous » : carte violette arrondie, fidèle au site publié
   (section claire, la carte porte le dégradé indigo→violet et l'arrondi 50px) */
.section--violet.contact-cta { background:transparent; padding-block:calc(var(--section-y)*0.55); }
.section--violet.contact-cta .container {
  background:linear-gradient(100deg,#4438D2 0%,#9D2BF3 100%);
  border-radius:50px;
  padding:clamp(44px,6vw,72px) clamp(24px,5vw,72px);
}
.section--violet.contact-cta .eyebrow { color:#fff; letter-spacing:0.14em; }
.section--violet.contact-cta h2 { color:#fff; }
.section--violet.contact-cta p { color:rgba(255,255,255,0.95); max-width:900px; margin-inline:auto; }
.section--violet.contact-cta p strong { color:#fff; }
.section--violet.contact-cta .contact-mail { color:#fff; border-color:transparent; font-weight:700; }
.section--violet.contact-cta .contact-mail:hover { border-color:rgba(255,255,255,0.6); }
/* Boutons du header en casse normale (comme le site) ; H1 du hero en capitales initiales */
.site-header .btn { text-transform:none; letter-spacing:0.3px; }
.hero h1 { text-transform:capitalize; }

/* ============================================================
   31. CORRECTIONS FIDÉLITÉ (comparaison live avec le site publié)
   ============================================================ */
/* Boutons : rayon 25px, fine bordure blanche, SANS ombre, hover plein→contour */
/* Contour invisible au repos, coloré au survol (retour Hugo, checkup Notion) */
.btn { border-radius:25px; border:0.8px solid transparent; box-shadow:none !important; transition:background-color .22s ease, color .22s ease, border-color .22s ease; }
.btn--primary { background:linear-gradient(90deg,#E08A00 0%,#F4CB26 100%); color:#fff; }
.btn--primary:hover { background:#fff; color:#E08A00; border-color:#E08A00; transform:none; }
.btn--violet { background:linear-gradient(90deg,#4F00BC 0%,#8C00DF 100%); color:#fff; }
.btn--violet:hover { background:#fff; color:#8C00DF; border-color:#8C00DF; transform:none; }
.btn--light { background:#fff; color:#4F00BC; }
.btn--light:hover { background:#F9F9FB; color:#4F00BC; border-color:#4F00BC; }

/* Titres : noir comme le site ; sections en Demi (600), hero en Bold (700) */
h1,h2,h3,h4,h5,h6 { color:#111114; }
h2,h3 { font-weight:600; }
.hero h1, .page-hero h1 { font-weight:700; }
/* (h2 du bloc Rencontrons-nous : blanc, défini section 30) */

/* Portrait : suppression du halo violet (flash au reveal + absent du site) */
.about__photo::before { display:none !important; }
.about__photo img { box-shadow:0 24px 60px rgba(28,36,75,0.14); }

/* Vignettes services : format CARRÉ comme le site (fin des crops paysage) */
.service-card__media { aspect-ratio:1/1; padding:0; background:#fff; border-radius:18px; }
.service-card__media img { object-fit:cover; }

/* ============================================================
   32. RETOURS HUGO — hero (halos/hauteur/titre) + footer
   ============================================================ */
/* Halos de fond moins opaques */
.cres-halos .halo { background:radial-gradient(circle at 50% 50%, rgba(var(--c), calc(var(--o) * 0.20)) 0%, rgba(var(--c),0) 72%); }
.halo-grain { opacity:0.42; }
/* Hero pleine hauteur de fenêtre + titre plus mesuré */
.hero { min-height:100vh; display:flex; align-items:center; }
.hero .container { width:100%; }
.hero h1 { font-size:clamp(2rem,3.6vw,3rem); }
/* Footer : gras de la marque en clair (fond foncé) */
.site-footer strong { color:#fff; }
.footer-brand p { color:rgba(255,255,255,0.66); }

/* ============================================================
   33. RETOURS HUGO (suite) — header CTA, gemme badge, hover icônes, méthode
   ============================================================ */
.site-header .btn--primary { color:#fff; }
.site-header .btn--primary:hover { background:#fff; color:#E08A00; border-color:#E08A00; }
.site-header .btn--violet:hover { background:#fff; color:#8C00DF; border-color:#8C00DF; }
.hero-badge__gem { width:20px; height:auto; display:inline-block; vertical-align:middle; }
.method-media img { max-width:560px; margin-inline:auto; }
.feature, .value { transition:transform .25s ease, box-shadow .25s ease; }
.feature:hover, .value:hover { transform:translateY(-5px); }
img[data-hover] { transition:opacity .2s ease; }

/* ============================================================
   34. RETOURS HUGO (3) — hero 90vh, image méthode plus petite, USP en gras
   ============================================================ */
.hero { min-height:90vh; }
.method-media img { max-width:460px; }
.usp h4 { font-weight:600; color:#15161D; }

/* ============================================================
   35. HERO PAGES INTERNES — PACK Claude Design (fond)
   Halos à grain + orbite en coin haut-droite, teinte par page :
   crescendo-hero-int--violet / --bleu / --or (classes posées sur
   la section .page-hero). Script d'injection : main.js.
   Hauteur harmonisée 2/3 écran ; titre à la taille du titre landing.
   ============================================================ */
.page-hero { min-height:66vh; display:flex; align-items:center; padding-block:clamp(48px,6vw,84px); background:var(--blanc); }
.page-hero .container { width:100%; }
.page-hero .hero__bg { display:none; }
.page-hero h1 { font-size:clamp(2rem,3.6vw,3rem); }
/* pages sans vignette (comparatifs individuels) : hero une colonne */
.page-hero__inner:not(:has(.page-hero__media)) { grid-template-columns:1fr; }
.page-hero__inner:not(:has(.page-hero__media)) .page-hero__text { max-width:760px; }

.crescendo-hero-int{ position:relative; overflow:hidden; }
/* Teintes (RGB charte) : main / soft / alt */
.crescendo-hero-int--violet{ --cres-main:140,0,223; --cres-soft:175,64,255; --cres-alt:0,153,255; }
.crescendo-hero-int--bleu  { --cres-main:0,69,151;  --cres-soft:0,153,255;  --cres-alt:140,0,223; }
.crescendo-hero-int--or    { --cres-main:224,138,0; --cres-soft:244,203,38; --cres-alt:175,64,255; }
/* Couche d'effet injectée par le script */
.crescendo-hero-int .cres-int-fx{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.crescendo-hero-int .cres-int-fx .halo{ position:absolute; }
.crescendo-hero-int .cres-int-fx .halo::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(var(--c), calc(.16 * var(--o))) 0%, rgba(var(--c),0) 70%);
  filter:blur(40px); mix-blend-mode:multiply;
}
.crescendo-hero-int .cres-int-fx .halo .grain{
  position:absolute; inset:0; border-radius:50%;
  background-repeat:repeat; mix-blend-mode:multiply; opacity:.5;
}
.crescendo-hero-int .cres-int-fx canvas{ position:absolute; inset:0; width:100%; height:100%; }
/* Halo principal — calé sur le coin du titre (ne dérive pas sur écran large) */
.crescendo-hero-int .cres-int-fx .halo--main{
  --c:var(--cres-soft); --o:.85;
  width:min(46vw,440px); height:min(46vw,440px); top:-8vh;
  left:max(-12vw, calc(50% - 760px));
}
/* Halo secondaire droite — desktop/tablette uniquement */
.crescendo-hero-int .cres-int-fx .halo--side{
  --c:var(--cres-main); --o:.45;
  width:28vw; height:28vw; top:26vh; left:66vw;
}
@media (max-width:640px){
  .crescendo-hero-int .cres-int-fx .halo--side{ display:none; }
}

/* ============================================================
   36. VIGNETTES HERO — PACK Claude Design (bloc droit du hero)
   Pop ressort + cascades ; gelées avec « réduire les animations ».
   ============================================================ */
.cres-vign{--ink:#1C244B;--muted:#6A7390;--line:rgba(28,36,75,.1);
  --grad-violet:linear-gradient(120deg,#4F00BC,#8C00DF);
  --grad-or:linear-gradient(120deg,#E08A00,#F4CB26);
  font-family:inherit;color:var(--ink);}
.cres-vign a{text-decoration:none;}
.cres-vign .hero-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px 28px;
  box-shadow:0 22px 50px -28px rgba(79,0,188,.3);}
.cres-vign .krow{display:flex;gap:14px;align-items:flex-start;padding:13px 0;}
.cres-vign .krow>div{flex:1;min-width:0;}
.cres-vign .krow + .krow{border-top:1px solid var(--line);}
.cres-vign .krow b{display:block;font-size:15.5px;line-height:1.3;margin-bottom:3px;}
.cres-vign .krow p{margin:0;font-size:14px;line-height:1.55;color:var(--muted);}
.cres-vign .kic{flex:0 0 auto;width:38px;height:38px;border-radius:12px;background:var(--grad-violet);display:grid;place-items:center;}
.cres-vign .kic--or{background:var(--grad-or);}
.cres-vign .g-ring{width:13px;height:13px;border:2.5px solid #fff;border-radius:50%;display:block;}
.cres-vign .g-diamond{width:11px;height:11px;background:#fff;border-radius:2.5px;transform:rotate(45deg);display:block;}
.cres-vign .g-arrow{width:13px;height:2.5px;background:#fff;border-radius:2px;display:block;position:relative;}
.cres-vign .g-arrow::after{content:"";position:absolute;right:-2px;top:-3.6px;border:5px solid transparent;border-left:6px solid #fff;border-right:0;}
.cres-vign .stn{flex:0 0 auto;min-width:72px;font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1;
  background:var(--grad-violet);-webkit-background-clip:text;background-clip:text;color:transparent;}
.cres-vign .stn small{font-size:14px;font-weight:800;margin-left:2px;}
.cres-vign .big{font-size:26px;font-weight:800;margin:0 0 6px;letter-spacing:-.01em;}
.cres-vign .sub2{margin:0 0 18px;font-size:15px;color:var(--muted);line-height:1.55;}
.cres-vign .hero-card ul{margin:18px 0 0;padding:0;list-style:none;}
.cres-vign .hero-card ul li{font-size:14.5px;color:var(--muted);padding:6px 0 6px 24px;position:relative;}
.cres-vign .hero-card ul li::before{content:"";position:absolute;left:4px;top:12px;width:9px;height:9px;
  transform:rotate(45deg);border-radius:2px;background:var(--grad-or);}
.cres-vign .btn-vio{display:inline-block;color:#fff;font-weight:700;font-size:15px;padding:12px 24px;border-radius:999px;
  background:var(--grad-violet);box-shadow:0 10px 24px -12px rgba(79,0,188,.7);}
.cres-vign .btn-or{display:inline-block;color:#fff;font-weight:700;font-size:15px;padding:12px 24px;border-radius:999px;
  background:var(--grad-or);text-shadow:0 1px 1px rgba(120,70,0,.35);}
.cres-vign .dash{--bar1:#0099FF;--bar2:#004597;--al-bg:rgba(140,0,223,.08);--al-bd:#8C00DF;
  background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 22px 50px -28px rgba(79,0,188,.3);}
.cres-vign .dash .dh{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.cres-vign .dash .dh b{font-size:15px;}
.cres-vign .dash .pill{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.06em;color:#fff;
  background:linear-gradient(120deg,var(--bar2),var(--bar1));border-radius:99px;padding:4px 10px;}
.cres-vign .dash .bars{display:flex;align-items:flex-end;gap:6px;height:52px;margin:14px 0 18px;}
.cres-vign .dash .bars i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--bar1),var(--bar2));opacity:.85;}
.cres-vign .d2kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.cres-vign .k{background:rgba(28,36,75,.035);border-radius:14px;padding:12px 12px 11px;}
.cres-vign .kv{display:block;font-size:19px;font-weight:800;letter-spacing:-.01em;}
.cres-vign .kl{display:block;font-size:11.5px;color:var(--muted);margin:2px 0 7px;}
.cres-vign .kd{display:inline-block;font-size:11px;font-weight:800;border-radius:99px;padding:3px 8px;background:rgba(31,138,91,.12);color:#1F8A5B;}
.cres-vign .kd.warn{background:rgba(224,138,0,.14);color:#B86A00;}
.cres-vign .kd.flat{background:rgba(28,36,75,.07);color:var(--muted);}
.cres-vign .dash .alert{margin-top:14px;background:var(--al-bg);border-left:3px solid var(--al-bd);border-radius:10px;
  padding:11px 13px;font-size:13px;line-height:1.5;color:var(--ink);}
.cres-vign .dash .alert b{color:var(--al-bd);}
.cres-vign .notifs{display:grid;gap:12px;}
.cres-vign .notif{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 17px;display:flex;gap:13px;
  align-items:flex-start;box-shadow:0 14px 32px -20px rgba(79,0,188,.25);}
.cres-vign .notif:nth-child(2){margin-left:22px;}
.cres-vign .notif:nth-child(3){margin-right:22px;}
.cres-vign .nic{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;background:var(--grad-violet);}
.cres-vign .notif.gold .nic{background:var(--grad-or);}
.cres-vign .notif b{display:block;font-size:14px;margin-bottom:2px;}
.cres-vign .notif p{margin:0;font-size:12.5px;line-height:1.45;color:var(--muted);}
.cres-vign .notif .tm{margin-left:auto;font-size:11px;color:var(--muted);flex:0 0 auto;}
.cres-vign .cmp{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 22px 50px -28px rgba(79,0,188,.3);}
.cres-vign .cmp .row2{display:grid;grid-template-columns:1fr 1fr;}
.cres-vign .cmp .col h5{margin:0;padding:14px 16px 10px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;}
.cres-vign .cmp .col.a h5{color:var(--muted);}
.cres-vign .cmp .col.b{background:linear-gradient(180deg,rgba(79,0,188,.05),rgba(140,0,223,.09));}
.cres-vign .cmp .col.b h5{color:#8C00DF;}
.cres-vign .cmp .col div{padding:9px 16px;font-size:13px;line-height:1.45;color:var(--ink);border-top:1px solid var(--line);}
.cres-vign .cmp .col.a div{color:var(--muted);}
.cres-vign .tl .tlrow{position:relative;display:flex;gap:16px;padding:0 0 22px 0;}
.cres-vign .tl .tlrow:last-child{padding-bottom:0;}
.cres-vign .tl .tlrow::before{content:"";position:absolute;left:17px;top:36px;bottom:-2px;width:2px;background:rgba(28,36,75,.1);}
.cres-vign .tl .tlrow:last-child::before{display:none;}
.cres-vign .tl .tld{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;background:var(--grad-violet);z-index:1;}
.cres-vign .tl .tlrow:nth-child(2) .tld{background:linear-gradient(120deg,#004597,#0099FF);}
.cres-vign .tl .tlrow:nth-child(3) .tld{background:var(--grad-or);}
.cres-vign .tl b{display:block;font-size:15px;margin-bottom:2px;}
.cres-vign .tl .tlm{font-size:11px;font-weight:800;letter-spacing:.08em;color:#8C00DF;}
.cres-vign .tl p{margin:2px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted);}
.cres-vign .ck .ckrow{display:flex;gap:13px;align-items:flex-start;padding:11px 0;}
.cres-vign .ck .ckrow + .ckrow{border-top:1px solid var(--line);}
.cres-vign .ckb{flex:0 0 auto;width:26px;height:26px;border-radius:9px;background:var(--grad-violet);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;}
.cres-vign .ck .ckrow div{flex:1;min-width:0;}
.cres-vign .ck b{display:block;font-size:14.5px;line-height:1.3;}
.cres-vign .ck p{margin:2px 0 0;font-size:13px;line-height:1.5;color:var(--muted);}
.cres-vign .score{text-align:center;}
.cres-vign .score .ring{width:150px;height:150px;border-radius:50%;margin:6px auto 14px;display:grid;place-items:center;
  background:conic-gradient(from -90deg,#4F00BC 0%,#AF40FF 65%,rgba(28,36,75,.08) 65% 100%);}
.cres-vign .score .ring>div{width:118px;height:118px;border-radius:50%;background:#fff;display:grid;place-items:center;align-content:center;}
.cres-vign .score .sv{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1;}
.cres-vign .score .sl{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--muted);margin-top:4px;}
.cres-vign .score h3{margin:0 0 6px;font-size:18px;font-weight:800;}
.cres-vign .score p{margin:0 0 16px;font-size:13.5px;line-height:1.55;color:var(--muted);}
.cres-vign .chat{display:grid;gap:10px;}
.cres-vign .bub{max-width:82%;padding:12px 15px;border-radius:16px;font-size:13.5px;line-height:1.5;}
.cres-vign .bub.left{justify-self:start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;box-shadow:0 10px 24px -16px rgba(28,36,75,.3);}
.cres-vign .bub.right{justify-self:end;background:var(--grad-violet);color:#fff;border-bottom-right-radius:5px;}
.cres-vign .who2{font-size:10.5px;font-weight:800;letter-spacing:.07em;color:var(--muted);margin-bottom:-4px;}
.cres-vign .who2.r{justify-self:end;}
.cres-vign .vhead{display:flex;align-items:baseline;gap:10px;position:relative;padding-bottom:12px;margin-bottom:14px;}
.cres-vign .vhead::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:3px;border-radius:3px;background:var(--grad-violet);}
.cres-vign .vhead b{font-size:20px;}
.cres-vign .vcount{margin-left:auto;font-size:12px;font-weight:800;letter-spacing:.05em;color:#8C00DF;}
.cres-vign .vgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.cres-vign .vitem{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;font-weight:700;font-size:14px;color:var(--ink);
  background:rgba(28,36,75,.03);transition:background .15s,transform .15s;}
.cres-vign .vitem:hover{background:rgba(140,0,223,.08);transform:translateX(3px);}
.cres-vign .vdot{width:8px;height:8px;border-radius:50%;background:var(--grad-violet);flex:0 0 auto;}
.cres-vign .vitem:nth-child(even) .vdot{background:var(--grad-or);}
.cres-vign .vmore{display:inline-block;margin-top:14px;font-size:13.5px;color:#4F00BC;font-weight:700;}
@keyframes cresPopCard{from{transform:translateY(30px) scale(.95);}to{transform:translateY(0) scale(1);}}
@keyframes cresPop{from{transform:translateY(14px) scale(.82);}to{transform:translateY(0) scale(1);}}
@keyframes cresRiseV{from{transform:translateY(26px);}to{transform:translateY(0);}}
@keyframes cresBarGrowV{from{transform:scaleY(.25);}to{transform:scaleY(1);}}
@keyframes cresSlideLV{from{transform:translateX(30px);}to{transform:translateX(0);}}
@keyframes cresSlideRV{from{transform:translateX(-30px);}to{transform:translateX(0);}}
@keyframes cresSheenV{to{transform:translateX(120%);}}
@keyframes cresGrowXV{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@media (prefers-reduced-motion: no-preference){
  .cres-vign{animation:cresPopCard .75s cubic-bezier(.34,1.56,.64,1) .15s both;}
  .cres-vign :is(.vgrid)>*,.cres-vign .hero-card>.krow,.cres-vign .hero-card ul>li{animation:cresPop .5s cubic-bezier(.34,1.56,.64,1) both;}
  .cres-vign :is(.vgrid>*,.hero-card>.krow,.hero-card ul>li):nth-child(1){animation-delay:.3s;}
  .cres-vign :is(.vgrid>*,.hero-card>.krow,.hero-card ul>li):nth-child(2){animation-delay:.38s;}
  .cres-vign :is(.vgrid>*,.hero-card>.krow,.hero-card ul>li):nth-child(3){animation-delay:.46s;}
  .cres-vign .vgrid>*:nth-child(4){animation-delay:.54s;}
  .cres-vign .vgrid>*:nth-child(5){animation-delay:.62s;}
  .cres-vign .vgrid>*:nth-child(6){animation-delay:.7s;}
  .cres-vign .vgrid>*:nth-child(7){animation-delay:.78s;}
  .cres-vign .vgrid>*:nth-child(8){animation-delay:.86s;}
  .cres-vign .dash .bars i{transform-origin:bottom;animation:cresBarGrowV .9s cubic-bezier(.2,.7,.2,1) both;}
  .cres-vign .dash .bars i:nth-child(1){animation-delay:.35s;}.cres-vign .dash .bars i:nth-child(2){animation-delay:.43s;}
  .cres-vign .dash .bars i:nth-child(3){animation-delay:.51s;}.cres-vign .dash .bars i:nth-child(4){animation-delay:.59s;}
  .cres-vign .dash .bars i:nth-child(5){animation-delay:.67s;}.cres-vign .dash .bars i:nth-child(6){animation-delay:.75s;}
  .cres-vign .dash .bars i:nth-child(7){animation-delay:.83s;}
  .cres-vign .d2kpis>*{animation:cresPop .5s cubic-bezier(.34,1.56,.64,1) both;}
  .cres-vign .d2kpis>*:nth-child(1){animation-delay:.3s;}.cres-vign .d2kpis>*:nth-child(2){animation-delay:.38s;}.cres-vign .d2kpis>*:nth-child(3){animation-delay:.46s;}
  .cres-vign .dash .alert{animation:cresRiseV .6s cubic-bezier(.2,.7,.2,1) .85s both;}
  .cres-vign .dash .pill{animation:cresPop .5s cubic-bezier(.34,1.56,.64,1) .5s both;}
  .cres-vign .notif{animation:cresSlideLV .6s cubic-bezier(.2,.7,.2,1) both;}
  .cres-vign .notif:nth-child(1){animation-delay:.3s;}.cres-vign .notif:nth-child(2){animation-delay:.5s;}.cres-vign .notif:nth-child(3){animation-delay:.7s;}
  .cres-vign .cmp .col div{animation:cresPop .45s cubic-bezier(.34,1.56,.64,1) both;}
  .cres-vign .cmp .col div:nth-of-type(1){animation-delay:.3s;}.cres-vign .cmp .col div:nth-of-type(2){animation-delay:.4s;}
  .cres-vign .cmp .col div:nth-of-type(3){animation-delay:.5s;}.cres-vign .cmp .col div:nth-of-type(4){animation-delay:.6s;}
  .cres-vign .cmp .col.b{position:relative;overflow:hidden;}
  .cres-vign .cmp .col.b::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
    transform:translateX(-120%);animation:cresSheenV 1.6s ease .8s 1 forwards;}
  .cres-vign .tl .tlrow{animation:cresPop .5s cubic-bezier(.34,1.56,.64,1) both;}
  .cres-vign .tl .tlrow:nth-child(1){animation-delay:.3s;}.cres-vign .tl .tlrow:nth-child(2){animation-delay:.48s;}.cres-vign .tl .tlrow:nth-child(3){animation-delay:.66s;}
  .cres-vign .ck .ckrow{animation:cresSlideLV .5s cubic-bezier(.2,.7,.2,1) both;}
  .cres-vign .ck .ckrow:nth-child(1){animation-delay:.3s;}.cres-vign .ck .ckrow:nth-child(2){animation-delay:.42s;}
  .cres-vign .ck .ckrow:nth-child(3){animation-delay:.54s;}.cres-vign .ck .ckrow:nth-child(4){animation-delay:.66s;}
  .cres-vign .score .ring{animation:cresPop .7s cubic-bezier(.34,1.56,.64,1) .3s both;}
  .cres-vign .bub.left{animation:cresSlideRV .55s cubic-bezier(.2,.7,.2,1) both;}
  .cres-vign .bub.right{animation:cresSlideLV .55s cubic-bezier(.2,.7,.2,1) both;}
  .cres-vign .bub:nth-of-type(2){animation-delay:.35s;}.cres-vign .bub:nth-of-type(4){animation-delay:.7s;}.cres-vign .bub:nth-of-type(6){animation-delay:1.05s;}
  .cres-vign .vhead::after{transform-origin:left;animation:cresGrowXV .7s cubic-bezier(.2,.7,.2,1) .45s both;}
}
@media (max-width:480px){ .cres-vign .d2kpis{grid-template-columns:1fr;} }

/* ============================================================
   37. RETOURS HUGO (checkup Notion) — fonds, cartes, tarifs, FAQ
   ============================================================ */
/* USP du hero landing : icône au-dessus, texte centré (comme le publié) */
.usp { flex-direction:column; text-align:center; align-items:center; gap:14px; padding:26px 22px; }
.usp img { width:64px; height:64px; }
/* Cartes méthode et valeurs : fond crème (sections passées en blanc) */
.step { background:var(--creme); }
.value { background:var(--creme); }
/* Services : le zoom au survol coupait les angles des vignettes */
.service-card:hover .service-card__media img { transform:none; }
/* Photo Hugo : sans ombre portée */
.about__photo img { box-shadow:none; }
/* Bloc violet : plus d'air à gauche et à droite */
.section--violet.contact-cta .container { padding-inline:clamp(32px,7vw,110px); }
/* E-mail du bloc violet : aucun soulignement, même au survol */
.contact-mail, .contact-mail:hover { border-bottom-color:transparent; }
.section--violet.contact-cta .contact-mail:hover { border-color:transparent; opacity:.85; }
/* Tarifs : la formule recommandée (milieu) surélevée, comme le publié */
.price-card--featured { transform:translateY(-14px); }
.price-card--featured:hover { transform:translateY(-20px); }
/* Pastille « Recommandé » : plus discrète, sans déborder sur le titre */
.price-card--featured::after { font-size:0.62rem; padding:4px 10px; top:14px; right:14px; }
.price-card--featured h3 { padding-right:92px; }
/* FAQ : déroulement animé à l'ouverture/fermeture (navigateurs récents) */
.faq details::details-content { height:0; overflow:clip; transition:height .32s ease, content-visibility .32s allow-discrete; }
.faq details[open]::details-content { height:auto; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size:allow-keywords; }
}

/* ═══════════════════════════════════════════════════
   HEADER CRESCENDO — feuille de style (paliers @media)
   ═══════════════════════════════════════════════════ */

/* ═══ Variables du header ═══ */
:root{--ink:#1C244B;--ink-soft:#3D4568;--muted:#6A7390;--line:rgba(28,36,75,.11);--line-2:rgba(28,36,75,.07);
--magenta:#8C00DF;--or2:#F4CB26;
--font:"Avenir Next LT Pro","Avenir Next","Avenir",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
.cr-hd button{font-family:inherit}
.cr-hd,.cr-hd *{box-sizing:border-box}
.cr-hd a{text-decoration:none}
/* le header remplace celui d'Astra : on neutralise les marges du thème */
.ast-primary-header-bar,#masthead .site-header-primary-section-left{margin:0}
.cr-hd{border-radius:5px}
.fr:not(.tall) .cr-drawer{display:none}
.fr.tall .cr-drawer{position:static;max-height:none;visibility:visible;overflow:visible}
.fr:hover{z-index:9}
.fr>.tag{position:absolute;top:-9px;left:16px;background:#F4F4F8;padding:0 8px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700;z-index:20}
.fr.on-hero{background:radial-gradient(120% 200% at 20% 0%,#F3EDFB 0%,#FBFAFE 62%,#F5F8FE 100%)}
.stage{position:relative;container-type:inline-size}
.note{font-size:13px;color:var(--muted);line-height:1.6;max-width:680px;margin:34px 0 0}
.note b{color:var(--ink);font-weight:700}

/* ═══════════════════════════════════════
   HEADER CRESCENDO — feuille de style
   (dans la planche : @container ; en prod : @media)
   ═══════════════════════════════════════ */
.cr-hd{position:relative;background:#fff;z-index:10}
.cr-hd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line-2);transition:background .3s}
.cr-row{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:24px;padding:0 28px;height:76px;transition:height .3s ease}

.cr-logo{display:flex;align-items:center;line-height:0;flex:0 0 auto}
.cr-logo img{height:33px;width:auto;display:block;transition:height .3s ease}

.cr-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.cr-ni{position:relative}
.cr-nb{display:flex;align-items:center;gap:6px;border:0;background:none;cursor:pointer;color:var(--ink-soft);
  padding:0 15px;height:76px;font-weight:600;font-size:15.5px;white-space:nowrap;position:relative;transition:color .2s,height .3s ease,font-size .2s}
.cr-nb .cv{width:7px;height:7px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.5;transition:transform .25s,opacity .2s}
.cr-nb::after{content:"";position:absolute;left:15px;right:15px;bottom:23px;height:2px;border-radius:2px;background:var(--grad-violet);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.4,.85,.3,1)}
.cr-nb:hover,.cr-ni.open .cr-nb{color:var(--ink)}
.cr-nb:hover::after,.cr-ni.open .cr-nb::after{transform:scaleX(1)}
.cr-ni.open .cr-nb .cv{transform:rotate(-135deg) translateY(2px);opacity:1;color:var(--magenta)}

.cr-mega{position:absolute;top:100%;left:-15px;width:640px;max-width:calc(100vw - 44px);background:#fff;border:1px solid var(--line-2);border-radius:14px;
  box-shadow:0 34px 66px -34px rgba(28,36,75,.42);opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .2s,transform .26s cubic-bezier(.3,.8,.3,1);overflow:hidden}
.cr-mega.sm{width:520px}
.cr-ni:last-child .cr-mega{left:auto;right:-15px}
.cr-ni.open .cr-mega{opacity:1;transform:translateY(0);pointer-events:auto}
.cr-mega-in{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;padding:24px 26px 22px}
.cr-col h4{margin:0 0 12px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:800}
.cr-col a{display:block;padding:8px 0;color:var(--ink);font-weight:650;font-size:14.6px}
.cr-col a span{display:block;font-weight:400;font-size:12.4px;color:var(--muted);margin-top:2px;line-height:1.45}
.cr-col a:hover{color:var(--violet)}
.cr-col a:hover span{color:var(--ink-soft)}
.cr-mega-ft{border-top:1px solid var(--line-2);background:#FAF9FD;padding:13px 26px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cr-mega-ft em{font-style:normal;font-size:12.8px;color:var(--muted)}
.cr-mega-ft .lk{font-size:13.4px;font-weight:700;color:var(--violet);display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.cr-mega-ft .lk .ar{width:6px;height:6px;border-top:1.7px solid currentColor;border-right:1.7px solid currentColor;transform:rotate(45deg)}

.cr-ctas{display:flex;align-items:center;gap:20px;flex:0 0 auto}
.cr-lnk{position:relative;font-size:15.5px;font-weight:600;color:var(--ink-soft);padding:6px 0;white-space:nowrap}
.cr-lnk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--grad-violet);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.4,.85,.3,1)}
.cr-lnk:hover{color:var(--ink)}
.cr-lnk:hover::after{transform:scaleX(1)}
.cr-cta{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--or);border-radius:999px;background:#fff;
  font-weight:700;font-size:14.6px;padding:11px 21px;white-space:nowrap;
  transition:background .25s,border-color .25s,box-shadow .25s,transform .22s,padding .3s,font-size .3s}
.cr-cta i{font-style:normal;color:var(--or);transition:color .25s,text-shadow .25s}
.cr-cta .ar{width:6px;height:6px;border-top:1.7px solid var(--or);border-right:1.7px solid var(--or);transform:rotate(45deg);transition:border-color .25s}
.cr-cta:hover{background:var(--grad-or);border-color:transparent;transform:translateY(-1px);box-shadow:0 12px 24px -14px rgba(224,138,0,.85)}
.cr-cta:hover i{color:#fff;text-shadow:0 1px 1px rgba(120,70,0,.32)}
.cr-cta:hover .ar{border-color:#fff}

/* état scrollé */
.cr-hd.scr::after{background:var(--line)}
.cr-hd.scr{box-shadow:0 10px 26px -22px rgba(28,36,75,.45)}
.cr-hd.scr .cr-row{height:62px}
.cr-hd.scr .cr-nb{height:62px}
.cr-hd.scr .cr-nb::after{bottom:16px}
.cr-hd.scr .cr-logo img{height:28px}
.cr-hd.scr .cr-cta{padding:10px 18px;font-size:14px}

/* burger */
.cr-bg{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line);border-radius:11px;background:#fff;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:0 0 auto}
.cr-bg i{width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .28s,opacity .2s}
.cr-bg.open i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.cr-bg.open i:nth-child(2){opacity:0}
.cr-bg.open i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* tiroir mobile */
.cr-drawer{position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--line-2);
  padding:8px 22px 26px;max-height:0;overflow:hidden;visibility:hidden;
  transition:max-height .42s cubic-bezier(.3,.85,.3,1),visibility .42s}
.cr-drawer.open{max-height:78vh;overflow-y:auto;visibility:visible}
.cr-acc{border-bottom:1px solid var(--line-2)}
.cr-acc>button{width:100%;display:flex;align-items:center;border:0;background:none;cursor:pointer;text-align:left;
  padding:16px 2px;font-weight:700;font-size:16.5px;color:var(--ink)}
.cr-acc>button::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--magenta);border-bottom:2px solid var(--magenta);
  transform:rotate(45deg) translateY(-2px);transition:transform .32s cubic-bezier(.3,.85,.3,1)}
.cr-acc.op>button{color:var(--violet)}
.cr-acc.op>button::after{transform:rotate(-135deg) translateY(2px)}
.cr-sub{overflow:hidden;max-height:0;transition:max-height .38s cubic-bezier(.3,.85,.3,1)}
.cr-sub-in{padding-bottom:8px}
.cr-sub a{display:block;padding:10px 2px 10px 15px;font-weight:600;font-size:14.8px;color:var(--ink-soft);
  opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .34s cubic-bezier(.3,.85,.3,1)}
.cr-acc.op .cr-sub a{opacity:1;transform:none}
.cr-acc.op .cr-sub a:nth-child(1){transition-delay:.05s}
.cr-acc.op .cr-sub a:nth-child(2){transition-delay:.09s}
.cr-acc.op .cr-sub a:nth-child(3){transition-delay:.13s}
.cr-acc.op .cr-sub a:nth-child(4){transition-delay:.17s}
.cr-acc.op .cr-sub a:nth-child(5){transition-delay:.21s}
.cr-acc.op .cr-sub a:nth-child(6){transition-delay:.25s}
.cr-dlnk{display:flex;align-items:center;border-bottom:1px solid var(--line-2);padding:16px 2px;font-weight:700;font-size:16.5px;color:var(--ink)}
.cr-dlnk:hover{color:var(--violet)}
.cr-dcta{display:grid;margin-top:22px}
.cr-dcta .cr-cta{justify-content:center;padding:15px 20px;font-size:15.5px}

/* ── paliers (planche : @container / prod : @media, mêmes valeurs) ── */
@media (max-width:1160px){
  .cr-row{gap:16px;padding:0 24px}
  .cr-nb{padding:0 12px;font-size:14.8px}
  .cr-nb::after{left:12px;right:12px}
  .cr-ctas{gap:16px}
  .cr-lnk{font-size:14.8px}
  .cr-cta{font-size:14px;padding:10px 18px}
}
@media (max-width:1010px){
  .cr-nav,.cr-ctas{display:none}
  .cr-bg{display:flex}
  .cr-row{height:70px;padding:0 22px}
  .cr-hd.scr .cr-row{height:64px}
  .cr-logo img{height:30px}
  .cr-hd.scr .cr-logo img{height:27px}
}
@media (max-width:520px){
  .cr-row{padding:0 18px;height:64px}
  .cr-hd.scr .cr-row{height:60px}
  .cr-logo img{height:26px}
  .cr-hd.scr .cr-logo img{height:24px}
  .cr-drawer{padding:6px 18px 24px}
  .cr-acc>button,.cr-dlnk{font-size:16px;padding:15px 2px}
}