/* Site de vente Pilot Box + Pilot Box Web.
   ⚠️ Fichier EXTERNE servi par notre origine : la CSP du site n'a pas 'unsafe-inline'
   (même règle que les pages légales de l'app, CLAUDE.md §4). Aucun style dans un <style>. */

@font-face { font-family: "Sora"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("/fonts/sora-latin.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; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("/fonts/sora-latin-ext.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: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/inter-latin.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; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/inter-latin-ext.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; }

:root {
  --nuit: #070c1a;
  --nuit-2: #0d1730;
  --nuit-3: #16264d;
  --bleu: #2f6bff;
  --bleu-fonce: #1f4fd6;
  --cyan: #22d3ee;
  --orange: #ff7a1a;
  --orange-fonce: #e2620a;
  --encre: #0e1a2b;
  --encre-2: #3d4b60;
  --encre-3: #64748b;
  --fond: #ffffff;
  --fond-doux: #f4f7fc;
  --fond-chaud: #fff7f0;
  --trait: #e3e9f3;
  --vert: #0f9d6e;
  --rayon: 16px;
  --ombre: 0 18px 50px rgba(14, 26, 43, .10);
  --ombre-forte: 0 30px 80px rgba(3, 8, 24, .35);
  --degrade-social: linear-gradient(90deg, #2f6bff, #22d3ee);
  --degrade-web: linear-gradient(90deg, #ff7a1a, #ffb020);
  --degrade-nuit: linear-gradient(160deg, #060912 0%, #0a1730 35%, #143178 75%, #2f6bff 120%);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px; line-height: 1.6; color: var(--encre); background: var(--fond);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: "Sora", "Inter", sans-serif; line-height: 1.15; letter-spacing: -.02em; }
h1 { font-size: clamp(34px, 5.2vw, 58px); font-weight: 700; }
h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; margin-bottom: 16px; }
h3 { font-size: 21px; font-weight: 650; margin-bottom: 8px; }
p + p { margin-top: 12px; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.lien-evitement { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; color: var(--encre); padding: 10px 16px; border-radius: 8px; }
.lien-evitement:focus { left: 16px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.etroit { max-width: 760px; }
section { padding: 96px 0; }
.section-douce { background: var(--fond-doux); }
.section-chaude { background: var(--fond-chaud); }
.section-nuit { background: var(--degrade-nuit); color: #e8eefc; }
.surtitre { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bleu); margin-bottom: 14px; }
.web .surtitre, .surtitre.web { color: var(--orange-fonce); }
.section-nuit .surtitre { color: var(--cyan); }
.chapeau { font-size: 19px; color: var(--encre-2); max-width: 680px; }
.section-nuit .chapeau { color: #b9c6e4; }
.centre { text-align: center; }
.centre .chapeau { margin-left: auto; margin-right: auto; }
.entete-section { margin-bottom: 52px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 16px/1.2 "Sora", sans-serif; text-decoration: none; cursor: pointer;
  padding: 15px 26px; border-radius: 12px; border: 0; transition: transform .15s, box-shadow .15s, background .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; }
.btn-social { background: var(--degrade-social); color: #fff; box-shadow: 0 10px 30px rgba(47, 107, 255, .35); }
.btn-web { background: var(--degrade-web); color: #1d1205; box-shadow: 0 10px 30px rgba(255, 122, 26, .30); }
.btn-clair { background: #fff; color: var(--nuit); }
.btn-contour { background: transparent; color: var(--encre); border: 1.5px solid var(--trait); }
.btn-contour:hover { border-color: var(--encre-3); }
.section-nuit .btn-contour, .hero .btn-contour { color: #fff; border-color: rgba(255, 255, 255, .3); }
.btn-petit { padding: 10px 16px; font-size: 14px; border-radius: 10px; }
.boutons { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.reassurance { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font-size: 14px; color: var(--encre-3); }
.reassurance span { display: inline-flex; align-items: center; gap: 6px; }
.reassurance svg { width: 16px; height: 16px; color: var(--vert); }
.hero .reassurance, .section-nuit .reassurance { color: #b9c6e4; }
.hero .reassurance svg, .section-nuit .reassurance svg { color: #5eead4; }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(7, 12, 26, .92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.08); }
.entete .wrap { display: flex; align-items: center; gap: 24px; height: 72px; }
.logo img { height: 46px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a { color: #cdd7ee; text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: 8px; }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.07); }
.entete-actions { display: flex; align-items: center; gap: 10px; }
.entete-tel { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.entete-tel svg { width: 16px; height: 16px; color: var(--cyan); }
.connexion { position: relative; }
.connexion summary { list-style: none; cursor: pointer; color: #cdd7ee; font-size: 15px; padding: 8px 12px; border-radius: 8px; }
.connexion summary::-webkit-details-marker { display: none; }
.connexion[open] summary, .connexion summary:hover { color: #fff; background: rgba(255,255,255,.07); }
.connexion-menu { position: absolute; right: 0; top: 46px; background: #fff; border-radius: 12px; box-shadow: var(--ombre-forte); padding: 8px; min-width: 260px; }
.connexion-menu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--encre); font-weight: 600; font-size: 15px; }
.connexion-menu a:hover { background: var(--fond-doux); }
.connexion-menu img { width: 28px; height: 28px; }
.connexion-menu small { display: block; font-weight: 400; color: var(--encre-3); font-size: 13px; }
.menu-mobile { display: none; }

/* ---------- Héros ---------- */
.hero { background: var(--degrade-nuit); color: #fff; padding: 84px 0 96px; overflow: hidden; position: relative; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.hero h1 { margin-bottom: 22px; }
.hero-accueil h1 { font-size: clamp(34px, 5.2vw, 55px); }
.hero h1 em { font-style: normal; background: var(--degrade-social); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero.web h1 em { background: var(--degrade-web); -webkit-background-clip: text; background-clip: text; }
.hero .chapeau { color: #c3cfea; margin-bottom: 32px; }
.hero .surtitre { color: var(--cyan); }
.hero.web .surtitre { color: #ffb020; }
.hero-visuel { position: relative; }
.hero-photo { border-radius: 22px; box-shadow: var(--ombre-forte); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.hero-visuel .telephone { position: absolute; width: 38%; right: -4%; bottom: -12%; }
.hero-visuel .navigateur + .telephone { width: 30%; right: -3%; bottom: -16%; }

/* ---------- Cadres d'appareils ---------- */
.navigateur { border-radius: 14px; overflow: hidden; background: #0b1220; box-shadow: var(--ombre-forte); border: 1px solid rgba(255,255,255,.08); }
.navigateur::before { content: ""; display: block; height: 30px; background: #1a2440 radial-gradient(circle at 18px 15px, #ff5f57 5px, transparent 6px), radial-gradient(circle at 36px 15px, #febc2e 5px, transparent 6px), radial-gradient(circle at 54px 15px, #28c840 5px, transparent 6px); background-color: #1a2440; }
.navigateur img { width: 100%; height: auto; }
.telephone { border-radius: 34px; padding: 9px; background: #05070d; box-shadow: var(--ombre-forte), inset 0 0 0 2px #2a3350; }
.telephone img { border-radius: 26px; width: 100%; height: auto; }
.cadre-clair { border-radius: 14px; overflow: hidden; box-shadow: var(--ombre); border: 1px solid var(--trait); }

/* ---------- Bande de confiance ---------- */
.confiance { background: var(--nuit-2); color: #dfe7f8; padding: 22px 0; }
.confiance ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 36px; }
.confiance li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.confiance svg { width: 20px; height: 20px; color: var(--cyan); flex: none; }

/* ---------- Réseaux ---------- */
.reseaux { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 8px; }
.reseau { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--trait); font-size: 14px; font-weight: 600; color: var(--encre-2); }
.reseau svg { width: 18px; height: 18px; }
.reseau.facebook svg { color: #1877f2; } .reseau.instagram svg { color: #d6249f; } .reseau.linkedin svg { color: #0a66c2; }
.reseau.google svg { color: #4285f4; } .reseau.tiktok svg { color: #000; } .reseau.youtube svg { color: #ff0000; }
.reseau.snapchat svg { color: #e6c600; } .reseau.bluesky svg { color: #0085ff; } .reseau.threads svg { color: #000; } .reseau.pinterest svg { color: #e60023; }
/* Logos des réseaux dans les cartes d'offres (mêmes couleurs que .reseau) */
.coches li > span:has(.logos-offre) { text-align: left; }
.logos-offre { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; max-width: 210px; }
.logos-offre span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; border: 1px solid var(--trait); }
.coches .logos-offre svg { width: 18px; height: 18px; margin: 0; }
.logos-offre .facebook svg { color: #1877f2; } .logos-offre .instagram svg { color: #d6249f; } .logos-offre .linkedin svg { color: #0a66c2; }
.logos-offre .google svg { color: #4285f4; } .logos-offre .tiktok svg { color: #000; } .logos-offre .youtube svg { color: #ff0000; }
.logos-offre .snapchat svg { color: #e6c600; } .logos-offre .bluesky svg { color: #0085ff; } .logos-offre .threads svg { color: #000; } .logos-offre .pinterest svg { color: #e60023; }

/* ---------- Grilles et cartes ---------- */
.grille-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grille-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.carte { background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon); padding: 28px; box-shadow: 0 4px 18px rgba(14,26,43,.04); }
.carte p { color: var(--encre-2); }
.picto { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: #eaf1ff; color: var(--bleu); margin-bottom: 16px; }
.picto svg { width: 24px; height: 24px; }
.picto.web { background: #fff0e4; color: var(--orange-fonce); }

/* ---------- Problème ---------- */
.probleme { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.probleme img { border-radius: 20px; box-shadow: var(--ombre); aspect-ratio: 4 / 3; object-fit: cover; }
.liste-couts { list-style: none; margin-top: 26px; display: grid; gap: 14px; }
.liste-couts li { display: flex; gap: 12px; color: var(--encre-2); }
.liste-couts svg { width: 22px; height: 22px; color: var(--orange-fonce); flex: none; margin-top: 2px; }

/* ---------- Aiguillage ---------- */
.choix { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.choix-carte { position: relative; border-radius: 22px; padding: 36px; background: #fff; border: 1px solid var(--trait); box-shadow: var(--ombre); display: flex; flex-direction: column; overflow: hidden; }
.choix-carte::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--degrade-social); }
.choix-carte.web::before { background: var(--degrade-web); }
.choix-carte .produit { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.choix-carte .produit img { width: 44px; height: 44px; }
.choix-carte .produit strong { font-family: "Sora", sans-serif; font-size: 15px; letter-spacing: .02em; color: var(--encre-3); }
.choix-carte h3 { font-size: 25px; }
.choix-carte > p { color: var(--encre-2); margin-bottom: 18px; }
.coches { list-style: none; display: grid; gap: 10px; margin-bottom: 26px; }
.coches li { display: flex; gap: 10px; align-items: flex-start; }
.coches svg { width: 20px; height: 20px; color: var(--vert); flex: none; margin-top: 3px; }
.section-nuit .coches svg { color: #5eead4; }
.choix-pied { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; border-top: 1px solid var(--trait); }
.a-partir { font-size: 14px; color: var(--encre-3); }
.a-partir strong { display: block; font: 700 26px/1.1 "Sora", sans-serif; color: var(--encre); }

/* ---------- Étapes ---------- */
.etapes { counter-reset: etape; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.etapes.quatre { grid-template-columns: repeat(4, 1fr); }
.etape { position: relative; padding: 28px; border-radius: var(--rayon); background: #fff; border: 1px solid var(--trait); }
.etape::before { counter-increment: etape; content: counter(etape); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--degrade-social); color: #fff; font: 700 17px "Sora", sans-serif; margin-bottom: 16px; }
.web .etape::before { background: var(--degrade-web); color: #1d1205; }
.etape p { color: var(--encre-2); font-size: 16px; }

/* ---------- Lignes fonctionnalité (texte + image alternés) ---------- */
.ligne { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: center; }
.ligne + .ligne { margin-top: 96px; }
.ligne.inverse > :first-child { order: 2; }
.ligne h3 { font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 14px; }
.ligne p { color: var(--encre-2); }
.ligne .etiquette { display: inline-block; font-size: 13px; font-weight: 700; color: var(--bleu); background: #eaf1ff; border-radius: 999px; padding: 4px 12px; margin-bottom: 14px; }
.ligne .etiquette.web { color: var(--orange-fonce); background: #fff0e4; }
.duo-telephones { display: flex; gap: 22px; justify-content: center; align-items: flex-start; }
.duo-telephones .telephone { width: 46%; max-width: 260px; }
.duo-telephones .telephone:nth-child(2) { margin-top: 48px; }
.trio-telephones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; }
.trio-telephones figure { text-align: center; }
.trio-telephones figcaption { margin-top: 14px; font-size: 15px; color: #b9c6e4; }
.empile { position: relative; }
.empile .visuel-flottant { position: absolute; width: 36%; left: -6%; bottom: -10%; border-radius: 14px; box-shadow: var(--ombre-forte); border: 4px solid #fff; }

/* ---------- Démonstration ---------- */
.demo { display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; align-items: start; }
.posts { display: grid; gap: 16px; }
.post { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--trait); border-radius: 14px; padding: 12px; }
.post img { width: 96px; height: 96px; border-radius: 10px; object-fit: cover; }
.post strong { display: block; font: 600 15px/1.35 "Sora", sans-serif; margin-bottom: 4px; }
.post span { font-size: 13px; color: var(--encre-3); }
.avertissement-demo { font-size: 14px; color: var(--encre-3); margin-top: 18px; display: flex; gap: 8px; }
.avertissement-demo svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }


/* ---------- Ensemble ---------- */
.ensemble { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center; }
.ensemble .logos-duo { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.ensemble .logos-duo img { width: 54px; height: 54px; }
.ensemble .logos-duo span { color: var(--cyan); font: 700 24px "Sora", sans-serif; }

/* ---------- Garanties ---------- */
.garanties { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.garantie { text-align: left; padding: 26px; border-radius: var(--rayon); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.garantie svg { width: 30px; height: 30px; color: #5eead4; margin-bottom: 14px; }
.garantie h3 { font-size: 18px; color: #fff; }
.garantie p { font-size: 15px; color: #b9c6e4; }
.section-douce .garantie, .fond-clair .garantie { background: #fff; border-color: var(--trait); }
.section-douce .garantie h3, .fond-clair .garantie h3 { color: var(--encre); }
.section-douce .garantie p, .fond-clair .garantie p { color: var(--encre-2); }
.section-douce .garantie svg, .fond-clair .garantie svg { color: var(--vert); }

/* ---------- Équipe / contact ---------- */
.contact-bloc { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; background: #fff; border: 1px solid var(--trait); border-radius: 22px; padding: 40px; box-shadow: var(--ombre); }
.coordonnees { list-style: none; display: grid; gap: 14px; }
.coordonnees li { display: flex; gap: 12px; align-items: flex-start; }
.coordonnees svg { width: 22px; height: 22px; color: var(--bleu); flex: none; margin-top: 2px; }
.coordonnees a { font-weight: 600; text-decoration: none; }
.gros-tel { font: 700 28px "Sora", sans-serif; text-decoration: none; color: var(--encre); }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--trait); border-radius: 14px; padding: 0 22px; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 32px 20px 0; font: 600 17px "Sora", sans-serif; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 2px; top: 26px; width: 10px; height: 10px; border-right: 2px solid var(--encre-3); border-bottom: 2px solid var(--encre-3); transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 30px; }
.faq details > div { padding: 0 0 22px; color: var(--encre-2); }

/* ---------- Dernier écran ---------- */
.final { text-align: center; }
.final h2 { max-width: 820px; margin: 0 auto 18px; }
.final .boutons { justify-content: center; margin-top: 30px; }
.final .reassurance { justify-content: center; }

/* ---------- Tarifs ---------- */
.bascule { display: inline-flex; padding: 5px; border-radius: 999px; background: var(--fond-doux); border: 1px solid var(--trait); margin-bottom: 36px; }
.bascule button { font: 600 15px "Sora", sans-serif; border: 0; background: transparent; padding: 10px 20px; border-radius: 999px; cursor: pointer; color: var(--encre-2); }
.bascule button[aria-pressed="true"] { background: #fff; color: var(--encre); box-shadow: 0 4px 12px rgba(14,26,43,.1); }
.bascule .remise { color: var(--vert); font-size: 13px; margin-left: 4px; }
.offres { display: grid; gap: 24px; align-items: stretch; }
.offres.deux { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
.offres.trois { grid-template-columns: repeat(3, 1fr); }
.offre { position: relative; background: #fff; border: 1px solid var(--trait); border-radius: 20px; padding: 32px; display: flex; flex-direction: column; }
.offre.vedette { border: 2px solid var(--bleu); box-shadow: 0 20px 50px rgba(47, 107, 255, .18); }
.web .offre.vedette, .offre.vedette.web { border-color: var(--orange); box-shadow: 0 20px 50px rgba(255, 122, 26, .16); }
.offre .pastille { position: absolute; top: -13px; left: 28px; background: var(--degrade-social); color: #fff; font: 700 12px "Sora", sans-serif; letter-spacing: .05em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.web .offre .pastille, .offre.web .pastille { background: var(--degrade-web); color: #1d1205; }
.offre h3 { font-size: 22px; margin-bottom: 4px; }
.offre .pour { font-size: 15px; color: var(--encre-3); margin-bottom: 18px; min-height: 48px; }
.prix { font: 700 44px/1 "Sora", sans-serif; letter-spacing: -.03em; }
.prix small { font: 500 15px "Inter", sans-serif; color: var(--encre-3); letter-spacing: 0; }
.prix-note { font-size: 13px; color: var(--encre-3); margin: 8px 0 22px; min-height: 20px; }
.offre .coches { margin-bottom: 26px; font-size: 15px; }
.offre .btn { margin-top: auto; width: 100%; }
[data-periode="an"] .mois-seul, [data-periode="mois"] .an-seul { display: none; }
.besoins { display: grid; gap: 52px; }
.besoin h3 { font-size: 24px; display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.besoin h3 svg { width: 28px; height: 28px; color: var(--orange-fonce); }
.besoin > p { color: var(--encre-2); margin-bottom: 24px; }
.besoin .offres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.besoin .offres.une { grid-template-columns: minmax(0, 520px); }
.options { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid var(--trait); }
.options th, .options td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--trait); font-size: 15px; }
.options th { background: var(--fond-doux); font-family: "Sora", sans-serif; font-weight: 600; }
.options td:last-child { white-space: nowrap; font-weight: 600; }
.onglets { display: flex; justify-content: center; gap: 10px; margin-bottom: 40px; flex-wrap: wrap; }
.onglets a { text-decoration: none; font: 600 16px "Sora", sans-serif; padding: 12px 22px; border-radius: 12px; border: 1.5px solid var(--trait); display: inline-flex; gap: 10px; align-items: center; }
.onglets a img { width: 26px; height: 26px; }

/* ---------- Formulaire ---------- */
.formulaire { display: grid; gap: 18px; }
.formulaire label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.formulaire input, .formulaire select, .formulaire textarea { font: 16px "Inter", sans-serif; padding: 13px 14px; border-radius: 10px; border: 1.5px solid var(--trait); background: #fff; color: var(--encre); width: 100%; }
.formulaire input:focus, .formulaire select:focus { border-color: var(--bleu); outline: none; box-shadow: 0 0 0 3px rgba(47,107,255,.15); }
.formulaire .facultatif { font-weight: 400; color: var(--encre-3); }
.formulaire .pot-de-miel { position: absolute; left: -9999px; }
.message-ok { padding: 18px 20px; border-radius: 12px; background: #e7f8f1; color: #0b5d43; font-weight: 500; }
.message-erreur { padding: 18px 20px; border-radius: 12px; background: #fdecec; color: #8a1f1f; }

/* ---------- Pied de page ---------- */
.pied { background: var(--nuit); color: #aab7d3; padding: 64px 0 28px; font-size: 15px; }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.pied h4 { color: #fff; font-size: 15px; margin-bottom: 14px; }
.pied ul { list-style: none; display: grid; gap: 9px; }
.pied a { text-decoration: none; }
.pied a:hover { color: #fff; }
.pied .logo img { height: 42px; margin-bottom: 16px; }
.pied-bas { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 13px; }

/* ---------- Barre fixe téléphone ---------- */
.barre-mobile { display: none; }
/* Bandeau de consentement : « Refuser » et « Accepter » ont le MÊME poids visuel (CNIL). */
.consentement { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 70; max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 16px 22px; padding: 16px 20px; background: var(--nuit-2); color: #dbe4f5; border: 1px solid rgba(255,255,255,.14); border-radius: var(--rayon); box-shadow: var(--ombre-forte); font-size: 14px; line-height: 1.5; }
.consentement[hidden] { display: none; }
.consentement p { margin: 0; flex: 1; }
.consentement a { color: var(--cyan); }
.consentement-boutons { display: flex; gap: 10px; flex-shrink: 0; }

/* ---------- Page simple ---------- */
.page-titre { background: var(--degrade-nuit); color: #fff; padding: 72px 0 64px; }
.page-titre .chapeau { color: #c3cfea; }
.page-titre .surtitre { color: var(--cyan); }

/* ======================= Responsive ======================= */
@media (max-width: 1080px) {
  .nav a { padding: 8px 8px; font-size: 14px; }
  .entete-tel span { display: none; }
  .grille-4 { grid-template-columns: repeat(2, 1fr); }
  .etapes.quatre { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .garanties { grid-template-columns: 1fr; }
  section { padding: 72px 0; }
  .nav, .entete-actions .connexion, .entete-tel { display: none; }
  .menu-mobile { display: block; margin-left: auto; }
  .menu-mobile summary { list-style: none; cursor: pointer; color: #fff; padding: 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; }
  .menu-mobile summary::-webkit-details-marker { display: none; }
  .menu-mobile summary svg { width: 22px; height: 22px; }
  .menu-mobile nav { position: absolute; left: 0; right: 0; top: 72px; background: var(--nuit); border-bottom: 1px solid rgba(255,255,255,.1); padding: 12px 16px 20px; display: grid; gap: 4px; }
  .menu-mobile nav a { color: #e3e9f7; text-decoration: none; padding: 12px; border-radius: 10px; font-weight: 500; }
  .menu-mobile nav a:hover { background: rgba(255,255,255,.07); }
  .menu-mobile nav .separateur { height: 1px; background: rgba(255,255,255,.1); margin: 8px 0; }
  .entete-actions .btn { display: none; }
  .hero { padding: 56px 0 72px; }
  .hero .wrap, .probleme, .choix, .ligne, .demo, .ensemble, .contact-bloc { grid-template-columns: 1fr; gap: 40px; }
  .ligne.inverse > :first-child { order: 0; }
  .ligne + .ligne { margin-top: 72px; }
  .hero-visuel { margin-right: 6%; }
  .grille-3, .etapes, .offres.trois { grid-template-columns: 1fr; }
  .offres.deux, .besoin .offres { grid-template-columns: 1fr; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .barre-mobile { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(7,12,26,.96); border-top: 1px solid rgba(255,255,255,.1); }
  .barre-mobile .btn { flex: 1; padding: 13px 10px; font-size: 15px; }
  .consentement { flex-direction: column; align-items: stretch; bottom: calc(82px + env(safe-area-inset-bottom)); }
  .consentement-boutons .btn { flex: 1; }
  body { padding-bottom: 76px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  body { font-size: 16px; }
  .grille-2, .grille-4, .garanties, .etapes.quatre, .trio-telephones { grid-template-columns: 1fr; }
  .trio-telephones { max-width: 280px; }
  .choix-carte, .offre, .contact-bloc { padding: 26px 22px; }
  .boutons .btn { width: 100%; }
  .confiance ul { justify-content: flex-start; }
  .pied-grille { grid-template-columns: 1fr; }
  .post { grid-template-columns: 72px 1fr; }
  .post img { width: 72px; height: 72px; }
  .options td:last-child { white-space: normal; }
  .empile .visuel-flottant { width: 40%; left: -2%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
.barre-mobile .btn-contour { color: #fff; border-color: rgba(255,255,255,.3); }
.espace { height: 40px; }
.sous-tel { margin: 6px 0 20px; color: var(--encre-3); }
.espace-petit { height: 8px; }
.titre-options { font-size: 22px; margin-bottom: 16px; }
.lien-produit { margin-top: 28px; text-align: center; }
.lien-produit a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--bleu); text-decoration: none; }
.lien-produit svg { width: 18px; height: 18px; }
.note-tableau { font-size: 14px; color: var(--encre-3); margin-top: 12px; }
.tableau-social { max-width: 900px; margin: 0 auto; text-align: left; }
.tableau-social td:not(:first-child), .tableau-social th:not(:first-child) { text-align: center; }
.tableau-social td:last-child { white-space: normal; font-weight: 500; }
@media (max-width: 560px) { .tableau-social th, .tableau-social td { padding: 10px 8px; font-size: 13px; } }
.post-carte { background: #fff; border: 1px solid var(--trait); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.post-carte img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.post-carte > div { padding: 18px 20px 22px; }
.post-carte strong { display: block; font: 600 16px/1.35 "Sora", sans-serif; margin: 8px 0; }
.post-carte p { font-size: 15px; color: var(--encre-2); }
.etiquette-visuel { display: inline-block; font-size: 12px; font-weight: 700; color: var(--bleu); background: #eaf1ff; border-radius: 999px; padding: 3px 10px; }
.etiquette-visuel.photo { color: var(--vert); background: #e7f8f1; }
.trio-telephones.clair figcaption { color: var(--encre-2); }
.final .chapeau { margin-left: auto; margin-right: auto; }
.hero-visuel .telephone { width: 34%; right: -9%; bottom: -16%; }
.ligne .navigateur img[src*="zoom-"] { max-height: 640px; object-fit: cover; object-position: top; }
.navigateur::before { background: #1a2440; }
.besoin, .besoin .offre { text-align: left; }
/* ---------- Pages métiers ---------- */
.grille-metiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 28px; }
.metier-carte { display: flex; flex-direction: column; text-decoration: none; background: #fff; border: 1px solid var(--trait); border-radius: 16px; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.metier-carte:hover { transform: translateY(-2px); box-shadow: var(--ombre); }
.metier-carte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.metier-carte span { padding: 14px 16px 18px; font-size: 14px; color: var(--encre-3); }
.metier-carte strong { display: block; font: 600 18px "Sora", sans-serif; color: var(--encre); margin-bottom: 4px; }
.metiers-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.metiers-liens a { text-decoration: none; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--trait); font-weight: 500; font-size: 15px; }
.metiers-liens a:hover { border-color: var(--orange); color: var(--orange-fonce); }
.grille-metiers.trois { grid-template-columns: repeat(3, 1fr); }
.avantages { margin: 18px 0 4px; }
@media (max-width: 1080px) { .grille-metiers { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .grille-metiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grille-metiers, .grille-metiers.trois { grid-template-columns: 1fr 1fr; gap: 12px; } .metier-carte strong { font-size: 16px; } }
.texte-cookies { max-width: 760px; }
.texte-cookies h2 { font-size: 22px; margin: 34px 0 10px; }
.texte-cookies h2:first-child { margin-top: 0; }
.texte-cookies p { color: var(--encre-2); margin: 0 0 12px; }