/* ============================================================
   KORDIX STUDIO · thème commun (toutes les pages sauf l'admin), chargé après kordix.css
   Principe : casser le look « site générique » par les FORMES, sans changer la marque ni le fond sombre violet.
     · grandes surfaces  = « feuille » (deux coins très ronds, deux presque droits), en alternance
     · boutons, puces, questions, liens = pastilles
     · icônes, flèches, badges = cercles
     · titres en Bricolage Grotesque (licence OFL), texte courant en Sora
   Le texte français ne change pas (traductions). Pas de lueur floue : un grain léger à la place.
   ============================================================ */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/bricolage-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/bricolage-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --titre: "Bricolage Grotesque", "Sora", system-ui, sans-serif;
  --encre: #09090F; --sur: #FFFFFF; --v: 110 91 255;
  --s1: #11111A; --s2: #14141D; --s3: #101018; --s4: #1C1C28;
  --feuille: 72px 20px 72px 20px; --feuille-inv: 20px 72px 20px 72px;
  --feuille-s: 44px 14px 44px 14px; --feuille-s-inv: 14px 44px 14px 44px;
  --R: 72px; --Rs: 40px; --rr: 18px;   /* connexion des cartes : grand rayon aux extrémités, petit rayon aux jonctions */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
html:has(body) { overflow-x: clip; }
body { overflow-x: clip; background: var(--encre); }
/* grain léger à la place du halo (le halo de kordix.css est remplacé) */
body::before { inset: 0; z-index: 55; opacity: 0.07; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
::selection { background: var(--violet); color: var(--sur); }
.nav { background: rgba(9, 9, 15, 0.8); }

/* ---------- titres ---------- */
h1, h2, h3 { font-family: var(--titre); }
h1 { letter-spacing: -0.04em; }
h2 { letter-spacing: -0.035em; }
.prix, .formule .prix, .hero-points b, .etapes-accueil b, .faq summary, .carte.sur-mesure h3 { font-family: var(--titre); }

/* ---------- boutons : pastilles, ombre dure qui se décolle au survol ---------- */
.btn:not(.btn-lien) { border-radius: 999px; padding-inline: 26px; }
.btn-petit { padding-inline: 18px; }
.btn:not(.btn-lien):not(.btn-ghost):not(.btn-clair):not(.btn-danger) { color: var(--sur); transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.2s; box-shadow: 0 0 0 0 var(--blanc); }
.btn:not(.btn-lien):not(.btn-ghost):not(.btn-clair):not(.btn-danger):hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 var(--blanc); }
.btn:not(.btn-lien):not(.btn-ghost):not(.btn-clair):not(.btn-danger):active { transform: none; box-shadow: none; }

/* ---------- titres de section : empilés, plus grands ; surtitre masqué (le titre suffit) ---------- */
.section-tete { display: block; }
.section-tete h2 { max-width: 18ch; font-size: clamp(34px, 4.8vw, 62px); line-height: 1; }
.section-tete p { margin-top: 14px; max-width: 48ch; }
.section-tete .label { display: none; }

/* ---------- haut de page des services : mot en galet, points clés en pastilles ---------- */
.hero h1 { font-size: clamp(40px, 5.4vw, 76px); line-height: 0.98; font-weight: 800; }
.hero h1 em { position: relative; display: inline-block; color: var(--sur); font-style: normal; z-index: 0; }
.hero h1 em::after { content: ""; position: absolute; z-index: -1; left: -0.12em; right: -0.12em; top: 0.1em; bottom: 0.02em; border-radius: 0.3em; background: var(--violet); }
.hero-points { flex-wrap: wrap; gap: 10px; margin-top: 36px; border: 0; border-radius: 0; }
.hero-points div, .hero-points div:last-child { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 10px 22px; border: 1px solid var(--bord-2); border-radius: 999px; }
.hero-points b { font-size: 19px; letter-spacing: -0.02em; }
.hero-points span { font-size: 13.5px; color: var(--gris); }

/* ---------- cartes : coins adoucis, et des « feuilles » là où ça compte ---------- */
.carte { border-radius: 28px; }
/* cartes qui se « connectent » : les coins extérieurs du groupe sont très ronds, les coins qui se touchent restent petits */
.grille-avantages .carte { padding: 26px 28px; border-radius: var(--rr); }
.grille-avantages .carte:nth-child(1) { border-radius: var(--Rs) var(--rr) var(--rr) var(--rr); }
.grille-avantages .carte:nth-child(2) { border-radius: var(--rr) var(--Rs) var(--rr) var(--rr); }
.grille-avantages .carte:nth-child(3) { border-radius: var(--rr) var(--rr) var(--rr) var(--Rs); }
.grille-avantages .carte:nth-child(4) { border-radius: var(--rr) var(--rr) var(--Rs) var(--rr); }
.formules .carte.formule, .realisations .carte.realisation { border-radius: var(--rr); }
.formules .carte.formule { padding: 34px 32px 30px; }
.formules .carte.formule:first-child, .realisations .carte.realisation:first-child { border-radius: var(--R) var(--rr) var(--rr) var(--R); }
.formules .carte.formule:last-child, .realisations .carte.realisation:last-child { border-radius: var(--rr) var(--R) var(--R) var(--rr); }
.realisations .carte.realisation:only-child { border-radius: var(--R); }
.formule .badge { border-radius: 999px; }
.modules .carte.module { border-radius: 40px; padding-inline: 28px; }
.module .p, .carte.module .p { border-radius: 999px; }
.puces span { border-radius: 999px; }
.autres-services .carte { border-radius: 999px; padding-inline: 26px; }
.besoins .carte { border-radius: 999px; }
.carte.base { border-radius: var(--feuille-s); }

/* ---------- bloc « prêt à te lancer » : un aplat de la couleur de marque ---------- */
.carte.sur-mesure { position: relative; isolation: isolate; overflow: hidden; border: 0; border-radius: 110px 26px 110px 26px; padding: clamp(30px, 5vw, 64px) clamp(34px, 7vw, 100px); background: var(--violet); color: var(--sur); }
.carte.sur-mesure::before { content: ""; position: absolute; z-index: -1; right: -120px; top: 50%; width: 460px; height: 460px; transform: translateY(-50%); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 30px, rgba(255, 255, 255, 0.14) 30px 32px); }
.carte.sur-mesure h3 { font-size: clamp(30px, 4.4vw, 56px); line-height: 1; letter-spacing: -0.035em; color: var(--sur); }
.carte.sur-mesure p { color: color-mix(in srgb, var(--sur) 90%, transparent); }
.carte.sur-mesure .btn { background: var(--encre); color: #fff; box-shadow: none; }
.carte.sur-mesure .btn:hover { background: var(--encre); color: #fff; box-shadow: 4px 4px 0 0 var(--blanc); }

/* ---------- étapes : de grandes lignes, une pastille au survol ---------- */
.etapes-accueil { display: block; counter-reset: none; border-bottom: 1px solid var(--bord-2); }
.etapes-accueil li { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: clamp(18px, 2.4vw, 28px) 0; border: 0; border-top: 1px solid var(--bord-2); border-radius: 56px; background: none; transition: background 0.3s, padding 0.4s var(--ease); }
.etapes-accueil li::before { display: none; }
.etapes-accueil b { margin: 0; font-size: clamp(30px, 5vw, 64px); font-weight: 800; line-height: 1; letter-spacing: -0.045em; transition: color 0.2s; }
.etapes-accueil span { max-width: 34ch; font-size: clamp(15px, 1.4vw, 18px); color: var(--gris); }
.etapes-accueil li::after { content: "↗"; display: grid; place-items: center; width: clamp(44px, 4.4vw, 58px); height: clamp(44px, 4.4vw, 58px); border: 1px solid var(--bord-2); border-radius: 50%; font-size: 20px; color: var(--blanc); transition: background 0.3s, color 0.3s, transform 0.4s var(--ease), border-color 0.3s; }
.etapes-accueil li:hover { background: rgb(var(--v) / 0.12); padding-inline: clamp(24px, 3.4vw, 52px); }
.etapes-accueil b { min-width: 0; overflow-wrap: break-word; text-wrap: balance; }
.etapes-accueil li:hover b { color: var(--violet-2); }
.etapes-accueil li:hover::after { background: var(--violet); border-color: var(--violet); color: var(--sur); transform: rotate(45deg); }

/* ---------- FAQ : questions en capsules qui s'ouvrent en bulles ---------- */
.faq { gap: 12px; }
.faq details { border: 1px solid var(--bord-2); border-radius: 999px; background: none; transition: border-radius 0.35s var(--ease), background 0.3s; }
.faq details[open] { border-radius: 36px; background: var(--s1); }
.faq summary { padding: 20px 30px; font-size: clamp(17px, 1.7vw, 21px); font-weight: 700; letter-spacing: -0.015em; transition: color 0.2s; }
.faq summary:hover { color: var(--violet-2); }
.faq summary::after { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgb(var(--v) / 0.18); font-size: 22px; }
.faq p { padding: 0 30px 26px; }

/* ---------- formulaires : champs adoucis ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { border-radius: 16px; }

@media (max-width: 1040px) {
  .realisations .carte.realisation:first-child { border-radius: var(--R) var(--R) var(--rr) var(--rr); }
  .realisations .carte.realisation:last-child { border-radius: var(--rr) var(--rr) var(--R) var(--R); }
  .realisations .carte.realisation:only-child { border-radius: var(--R); }
}
@media (max-width: 900px) {
  :root { --R: 52px; --Rs: 34px; }
  .formules .carte.formule:first-child { border-radius: var(--R) var(--R) var(--rr) var(--rr); }
  .formules .carte.formule:last-child { border-radius: var(--rr) var(--rr) var(--R) var(--R); }
  :root { --feuille: 48px 16px 48px 16px; --feuille-inv: 16px 48px 16px 48px; --feuille-s: 32px 12px 32px 12px; --feuille-s-inv: 12px 32px 12px 32px; }
  .etapes-accueil li { grid-template-columns: 1fr auto; gap: 8px 16px; border-radius: 28px; }
  .etapes-accueil li span { grid-column: 1; }
  .etapes-accueil li::after { grid-row: 1 / span 2; grid-column: 2; }
  .carte.sur-mesure { border-radius: 60px 20px 60px 20px; }
  .faq summary { padding: 16px 22px; }
  .faq p { padding: 0 22px 22px; }
}
@media (max-width: 680px) {
  .grille-avantages .carte:nth-child(1) { border-radius: var(--Rs) var(--Rs) var(--rr) var(--rr); }
  .grille-avantages .carte:nth-child(2), .grille-avantages .carte:nth-child(3) { border-radius: var(--rr); }
  .grille-avantages .carte:nth-child(4) { border-radius: var(--rr) var(--rr) var(--Rs) var(--Rs); }
}
@media (prefers-reduced-motion: reduce) {
  .btn:not(.btn-lien):hover { transform: none; box-shadow: none; }
}