/* Artilona - site commercial (artilona.com).
   Bleu electrique #2346f0 + Inter : l'identite fixee en juillet.
   Les images de l'appli et des sites viennent de vraies captures
   (Outils de verification Artilona/vitrine), jamais de maquettes. */

/* Police Inter hebergee sur le site (polices/, licence SIL OFL 1.1) :
   aucun echange avec Google au chargement des pages. Une seule police
   "variable" couvre toutes les graisses, de 100 a 900. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("polices/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;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("polices/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;
}

:root {
  --bleu: #2346f0;
  --bleu-fonce: #1a35c4;
  --bleu-pale: #eef1fe;
  --bleu-ligne: #d6ddfd;
  --jaune: #ffc93c;
  --encre: #0b1220;
  --texte: #1d2433;
  --gris: #5b6475;
  --gris-clair: #8a93a6;
  --ligne: #e6e9f0;
  --fond: #ffffff;
  --fond-doux: #f6f8fc;
  --nuit: #0a1022;
  --nuit-2: #121a33;
  --vert: #12a150;
  --rayon: 20px;
  --ombre: 0 1px 2px rgba(11, 18, 32, 0.04), 0 8px 24px rgba(11, 18, 32, 0.06);
  --ombre-forte: 0 2px 6px rgba(11, 18, 32, 0.06), 0 24px 60px rgba(11, 18, 32, 0.14);
  --largeur: 1180px;
  --entete: 72px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--entete) + 12px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: var(--bleu); text-decoration: none; }
a:hover { color: var(--bleu-fonce); }
button { font: inherit; }
:focus-visible { outline: 3px solid rgba(35, 70, 240, 0.45); outline-offset: 3px; border-radius: 8px; }

h1, h2, h3, h4 { color: var(--encre); margin: 0; line-height: 1.12; letter-spacing: -0.025em; }
h1 { font-size: clamp(2.35rem, 5.4vw, 4.1rem); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.8rem); font-weight: 800; }
h3 { font-size: 1.22rem; font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0; }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .conteneur { padding: 0 16px; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer;
  font-weight: 650; font-size: 1rem; letter-spacing: -0.005em; white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.bouton svg { width: 20px; height: 20px; flex: none; }
.bouton-plein { background: var(--bleu); color: #fff; box-shadow: 0 8px 22px rgba(35, 70, 240, 0.32); }
.bouton-plein:hover { background: var(--bleu-fonce); color: #fff; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(35, 70, 240, 0.38); }
.bouton-clair { background: #fff; color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--ligne); }
.bouton-clair:hover { color: var(--bleu); box-shadow: inset 0 0 0 1.5px var(--bleu-ligne); }
.bouton-blanc { background: #fff; color: var(--bleu); }
.bouton-blanc:hover { color: var(--bleu-fonce); transform: translateY(-1px); }
.bouton-petit { min-height: 42px; padding: 0 18px; font-size: 0.95rem; }
.bouton-lecture .rond {
  width: 30px; height: 30px; border-radius: 50%; background: var(--bleu); color: #fff;
  display: grid; place-items: center; margin-left: -10px;
}
.bouton-lecture .rond svg { width: 14px; height: 14px; margin-left: 2px; }

/* ---------- En-tete ---------- */
.entete {
  position: sticky; top: 0; z-index: 50; height: var(--entete);
  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 0.2s ease, box-shadow 0.2s ease;
}
.entete.defile { border-bottom-color: var(--ligne); box-shadow: 0 4px 20px rgba(11, 18, 32, 0.04); }
.entete .conteneur { height: 100%; display: flex; align-items: center; gap: 28px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.28rem; color: var(--encre); letter-spacing: -0.03em; }
.logo:hover { color: var(--encre); }
.logo-marque { width: 36px; height: 36px; border-radius: 10px; background: #123e9b; display: grid; place-items: center; overflow: hidden; box-shadow: 0 6px 16px rgba(18, 62, 155, 0.3); }
.logo-marque svg { width: 100%; height: 100%; color: #fff; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { color: var(--gris); font-weight: 550; font-size: 0.97rem; padding: 8px 12px; border-radius: 10px; white-space: nowrap; }
.nav a:hover { color: var(--encre); background: var(--fond-doux); }
.entete-actions { display: flex; align-items: center; gap: 10px; }
.burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--ligne); background: #fff; cursor: pointer; place-items: center; }
.burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 2px; background: var(--encre); border-radius: 2px; position: relative; transition: transform 0.2s ease, background 0.2s ease; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.menu-ouvert .burger span { background: transparent; }
.menu-ouvert .burger span::before { transform: translateY(6px) rotate(45deg); }
.menu-ouvert .burger span::after { transform: translateY(-6px) rotate(-45deg); }

/* Menu : "Accueil" et "Votre metier" (liste deroulante des metiers). */
.nav a[aria-current="page"] { color: var(--encre); font-weight: 650; }
.nav-metier { position: relative; }
.nav-deroulant {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer;
  color: var(--gris); font-weight: 550; font-size: 0.97rem; padding: 8px 12px; border-radius: 10px; white-space: nowrap;
}
.nav-deroulant:hover, .nav-deroulant[aria-expanded="true"] { color: var(--encre); background: var(--fond-doux); }
.nav-deroulant.actif { color: var(--encre); font-weight: 650; }
.nav-deroulant svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.nav-deroulant[aria-expanded="true"] svg { transform: rotate(180deg); }
.metiers {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; min-width: 320px; list-style: none; margin: 0; padding: 8px;
  background: #fff; border-radius: 18px; box-shadow: var(--ombre-forte); border: 1px solid var(--ligne);
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease;
}
.metiers.ouverte { opacity: 1; transform: none; pointer-events: auto; }
.nav .metiers a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--encre); font-weight: 400; white-space: normal; }
.nav .metiers a:hover, .nav .metiers a[aria-current="page"] { background: var(--fond-doux); }
.metiers strong { display: block; font-weight: 700; font-size: 1rem; }
.metiers small { display: block; color: var(--gris); font-size: 0.86rem; line-height: 1.35; }
.metiers-note { padding: 8px 12px 6px; color: var(--gris-clair); font-size: 0.86rem; }
.metier-icone { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--jaune); color: var(--encre); display: grid; place-items: center; }
.metier-icone svg { width: 20px; height: 20px; }
.metier-icone.gris { background: var(--fond-doux); color: var(--gris); }

/* Menu replie sous 900 px (liens + deux boutons d'en-tete ne tiennent plus). */
@media (max-width: 900px) {
  .nav {
    position: fixed; inset: var(--entete) 0 auto 0; flex-direction: column; gap: 0; padding: 12px 16px 20px;
    background: #fff; border-bottom: 1px solid var(--ligne); box-shadow: 0 20px 40px rgba(11, 18, 32, 0.08);
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .nav a { padding: 14px 12px; font-size: 1.05rem; border-bottom: 1px solid var(--fond-doux); border-radius: 0; }
  .menu-ouvert .nav { transform: none; opacity: 1; pointer-events: auto; }
  /* "Votre metier" : la liste s'ouvre PAR-DESSUS les boutons du bas, qui ne
     bougent pas (demande de Charles), et chaque metier reste cliquable. */
  .nav-deroulant { width: 100%; justify-content: space-between; padding: 14px 12px; font-size: 1.05rem; border-radius: 0; border-bottom: 1px solid var(--fond-doux); }
  .nav-deroulant:hover, .nav-deroulant[aria-expanded="true"] { background: none; }
  .metiers { top: calc(100% + 6px); left: 0; right: 0; min-width: 0; }
  .nav .metiers a { padding: 10px 12px; border-bottom: 0; font-size: 1rem; }
  .burger { display: grid; }
  .entete-actions { margin-left: auto; }
}
@media (max-width: 420px) {
  /* Logo, bouton et menu doivent tenir sur un telephone de 360 px. */
  .entete .conteneur { gap: 10px; }
  .entete-actions { gap: 8px; }
  .entete-actions .bouton { padding: 0 14px; font-size: 0.9rem; }
}

/* ---------- Accroche ---------- */
.accroche { position: relative; padding: 64px 0 40px; overflow: hidden; }
.accroche::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 900px; z-index: -1;
  background:
    radial-gradient(600px 380px at 78% 30%, rgba(35, 70, 240, 0.13), transparent 70%),
    radial-gradient(520px 320px at 10% 10%, rgba(255, 201, 60, 0.14), transparent 70%),
    linear-gradient(180deg, #f7f9ff 0%, #fff 70%);
}
.accroche-grille { display: grid; grid-template-columns: 1.02fr 1fr; gap: 48px; align-items: center; }
.pastille {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--bleu-ligne), 0 4px 14px rgba(35, 70, 240, 0.08);
  color: var(--bleu); font-weight: 650; font-size: 0.9rem; margin-bottom: 22px;
}
.pastille .eclair { width: 24px; height: 24px; border-radius: 50%; background: var(--jaune); display: grid; place-items: center; color: var(--encre); }
.pastille .eclair svg { width: 13px; height: 13px; }
.accroche h1 em { font-style: normal; color: var(--bleu); }
.accroche .sous-titre { margin-top: 22px; font-size: 1.2rem; color: var(--gris); max-width: 540px; }
.accroche-boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.garanties { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding: 0; list-style: none; color: var(--gris); font-size: 0.95rem; font-weight: 550; }
.garanties li { display: inline-flex; align-items: center; gap: 8px; }
.garanties svg { width: 18px; height: 18px; color: var(--vert); flex: none; }

.accroche-visuel { position: relative; min-height: 540px; }
.accroche-visuel .navigateur { position: absolute; top: 18px; left: 0; right: 40px; }
.accroche-visuel .telephone { position: absolute; right: 0; bottom: -10px; width: 238px; }
.bulle-flottante {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px;
  background: #fff; border-radius: 16px; box-shadow: var(--ombre-forte); font-size: 0.9rem; line-height: 1.3; max-width: 270px;
  animation: flotter 6s ease-in-out infinite;
}
.bulle-flottante strong { display: block; color: var(--encre); font-size: 0.92rem; }
.bulle-flottante span { color: var(--gris); }
.bulle-flottante .icone { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.bulle-flottante .icone svg { width: 20px; height: 20px; }
.bulle-demande { left: 14%; bottom: 0; }
.bulle-demande .icone { background: var(--bleu-pale); color: var(--bleu); }
.bulle-rdv { left: -34px; top: 292px; animation-delay: -3s; }
.bulle-rdv .icone { background: #e7f7ee; color: var(--vert); }
@keyframes flotter { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .bulle-flottante { animation: none; } }

@media (max-width: 1060px) {
  .accroche-grille { grid-template-columns: 1fr; gap: 36px; }
  .accroche-texte { text-align: center; }
  .accroche .sous-titre { margin-left: auto; margin-right: auto; }
  .accroche-boutons, .garanties { justify-content: center; }
  .accroche-visuel { max-width: 640px; width: 100%; margin: 0 auto; min-height: 0; aspect-ratio: 640 / 520; }
}
@media (max-width: 600px) {
  .accroche { padding-top: 36px; }
  .accroche .sous-titre { font-size: 1.07rem; }
  .accroche-boutons .bouton { width: 100%; }
  .accroche-visuel .navigateur { right: 22%; top: 8%; }
  .accroche-visuel .telephone { width: 40%; bottom: 0; }
  .bulle-flottante { font-size: 0.8rem; padding: 9px 12px 9px 9px; gap: 9px; max-width: 200px; }
  .bulle-flottante .icone { width: 30px; height: 30px; border-radius: 9px; }
  .bulle-demande { left: 0; bottom: 3%; max-width: 205px; }
  /* Sur telephone, une seule bulle : deux cachaient tout le site. */
  .bulle-rdv { display: none; }
}

/* ---------- Cadres : navigateur et telephone ---------- */
.navigateur {
  background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--ombre-forte);
  border: 1px solid rgba(11, 18, 32, 0.08);
}
.navigateur-barre { height: 36px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: #f3f5f9; border-bottom: 1px solid var(--ligne); }
.navigateur-barre .points { display: flex; gap: 6px; }
.navigateur-barre .points i { width: 10px; height: 10px; border-radius: 50%; background: #d9dde6; }
.navigateur-barre .points i:nth-child(1) { background: #ff6159; }
.navigateur-barre .points i:nth-child(2) { background: #ffbd2e; }
.navigateur-barre .points i:nth-child(3) { background: #28c941; }
.navigateur-barre .adresse {
  flex: 1; max-width: 360px; margin: 0 auto; height: 22px; border-radius: 7px; background: #fff; border: 1px solid var(--ligne);
  display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: var(--gris); font-weight: 550; overflow: hidden; white-space: nowrap;
}
.navigateur-barre .adresse svg { width: 11px; height: 11px; color: var(--vert); flex: none; }
.navigateur-ecran { position: relative; aspect-ratio: 1440 / 900; overflow: hidden; background: #fff; }
.navigateur-ecran img { width: 100%; height: auto; }
/* Le site defile tout seul, comme si quelqu'un le parcourait. */
.defilement img { animation: defiler 22s ease-in-out infinite; will-change: transform; }
@keyframes defiler {
  0%, 8% { transform: translateY(0); }
  46%, 54% { transform: translateY(calc(-100% + var(--hauteur-ecran, 400px))); }
  92%, 100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .defilement img { animation: none; } }

/* Telephone dessine en CSS : les captures de l'appli (390 x 844) sont
   posees sous une barre d'etat (heure, reseau, batterie) et l'ilot,
   sans script, pour que le cadre tienne meme si le JavaScript echoue. */
/* Les unites cqw se rapportent a .telephone (le conteneur) : le cadre
   est donc dessine sur .telephone-ecran, son enfant, par une bordure. */
.telephone { position: relative; z-index: 2; container-type: inline-size; }
.telephone-ecran {
  position: relative; overflow: hidden; background: #fff; padding-top: 11.2cqw;
  border: 3.4cqw solid #0d1120; border-radius: 15cqw;
  box-shadow: 0 0 0 1.5px #2a3150, 0 30px 70px rgba(11, 18, 32, 0.3);
}
.telephone-ecran::before {
  content: "9:41"; position: absolute; inset: 0 0 auto 0; height: 11.2cqw; display: flex; align-items: center; padding-left: 11cqw;
  font-size: 3.7cqw; font-weight: 650; color: #0b1220; letter-spacing: -0.01em;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 12'%3E%3Cg fill='%230b1220'%3E%3Crect x='0' y='8' width='3' height='4' rx='1'/%3E%3Crect x='5' y='6' width='3' height='6' rx='1'/%3E%3Crect x='10' y='3.5' width='3' height='8.5' rx='1'/%3E%3Crect x='15' y='1' width='3' height='11' rx='1'/%3E%3Cpath d='M31 3.2a9.2 9.2 0 0 1 11 0l-1.3 1.6a7.2 7.2 0 0 0-8.4 0zM33.4 6.2a5.2 5.2 0 0 1 6.2 0l-1.3 1.6a3.2 3.2 0 0 0-3.6 0zM36.5 9.2l1.5 1.9-1.5 1-1.5-1z'/%3E%3Crect x='47.5' y='1.5' width='17' height='9' rx='2.6' fill='none' stroke='%230b1220' stroke-opacity='.4'/%3E%3Crect x='49.2' y='3.2' width='13.2' height='5.6' rx='1.4'/%3E%3Cpath d='M66 4.5v3a1.6 1.6 0 0 0 0-3z' fill-opacity='.45'/%3E%3C/g%3E%3C/svg%3E") no-repeat right 8.5cqw center / 17cqw auto;
  z-index: 1;
}
.telephone-ecran::after {
  content: ""; position: absolute; top: 2.3cqw; left: 50%; width: 28cqw; height: 7.6cqw; transform: translateX(-50%);
  background: #0d1120; border-radius: 999px; z-index: 2;
}
.telephone-ecran.sombre::before { background-color: #0b1220; color: #fff; filter: none; }
.telephone-ecran > img { width: 100%; aspect-ratio: 390 / 844; height: auto; object-fit: cover; object-position: top; }
.telephone-ecran > video { width: 100%; aspect-ratio: 390 / 844; height: auto; object-fit: cover; }

/* ---------- Sections ---------- */
section { position: relative; }
.bloc { padding: 110px 0; }
.bloc-doux { background: var(--fond-doux); }
.bloc-nuit { background: radial-gradient(900px 500px at 80% 0%, rgba(35, 70, 240, 0.35), transparent 60%), var(--nuit); color: #c9d1e6; }
.bloc-nuit h2, .bloc-nuit h3 { color: #fff; }
@media (max-width: 700px) { .bloc { padding: 72px 0; } }

.entete-bloc { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.entete-bloc.a-gauche { margin-left: 0; text-align: left; }
.surtitre { display: inline-block; font-size: 0.82rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bleu); margin-bottom: 14px; }
.bloc-nuit .surtitre { color: #8fa4ff; }
.entete-bloc p { margin-top: 18px; font-size: 1.13rem; color: var(--gris); }
.bloc-nuit .entete-bloc p { color: #aab4cf; }

/* Bandeau des cinq piliers sous l'accroche */
.piliers { padding: 34px 0 20px; }
.piliers ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.piliers li { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--ligne); font-weight: 650; color: var(--encre); font-size: 0.98rem; line-height: 1.25; }
.piliers li span { display: block; font-weight: 500; color: var(--gris); font-size: 0.85rem; margin-top: 2px; }
.piliers .icone { width: 42px; height: 42px; border-radius: 12px; background: var(--bleu-pale); color: var(--bleu); display: grid; place-items: center; flex: none; }
.piliers .icone svg { width: 21px; height: 21px; }
@media (max-width: 1060px) { .piliers ul { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  .piliers ul { grid-template-columns: 1fr; gap: 10px; }
  .piliers li { padding: 12px 14px; }
  .piliers li div span { display: inline; margin: 0 0 0 6px; }
  .piliers li div span::before { content: "· "; }
  .piliers .icone { width: 36px; height: 36px; border-radius: 10px; }
}

/* Constat */
.constat-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.carte { background: #fff; border-radius: var(--rayon); padding: 30px; box-shadow: inset 0 0 0 1px var(--ligne); }
.carte .icone { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 20px; }
.carte .icone svg { width: 24px; height: 24px; }
.carte h3 { margin-bottom: 10px; }
.carte p { color: var(--gris); font-size: 1rem; }
.icone-rouge { background: #fff0ee; color: #e0452f; }
.icone-orange { background: #fff5e3; color: #d98a00; }
.icone-violet { background: #f1edff; color: #6b46e5; }
.constat-reponse {
  margin: 40px auto 0; max-width: 820px; text-align: center; font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 650; color: var(--encre); letter-spacing: -0.015em; line-height: 1.45;
}
.constat-reponse em { font-style: normal; color: var(--bleu); }
@media (max-width: 900px) { .constat-grille { grid-template-columns: 1fr; } }

/* Fonctionnalites : texte + visuel en alternance */
.fonction { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.fonction + .fonction { margin-top: 130px; }
.fonction.inverse .fonction-texte { order: 2; }
.fonction-texte .surtitre { display: inline-flex; align-items: center; gap: 8px; }
.fonction-texte .surtitre svg { width: 18px; height: 18px; }
.fonction-texte h2 { font-size: clamp(1.75rem, 3.1vw, 2.45rem); }
.fonction-texte > p { margin-top: 18px; font-size: 1.1rem; color: var(--gris); }
.liste-coches { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.liste-coches li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 1.01rem; }
.liste-coches li strong { color: var(--encre); }
.liste-coches .coche { width: 26px; height: 26px; border-radius: 50%; background: var(--bleu-pale); color: var(--bleu); display: grid; place-items: center; margin-top: 1px; }
.liste-coches .coche svg { width: 14px; height: 14px; }
.fonction-visuel { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 22px; padding: 30px 0; }
.fonction-visuel::before {
  content: ""; position: absolute; inset: 0 4% 6% 4%; z-index: 0; border-radius: 36px;
  background: linear-gradient(160deg, var(--bleu-pale), #f7f8ff 60%, #fff);
  box-shadow: inset 0 0 0 1px var(--bleu-ligne);
}
.fonction-visuel .telephone { width: 44%; max-width: 262px; }
.fonction-visuel .telephone.recule { transform: translateY(-34px); }
.legende-demo { margin-top: 16px; font-size: 0.82rem; color: var(--gris-clair); text-align: center; }
@media (max-width: 960px) {
  .fonction { grid-template-columns: 1fr; gap: 36px; }
  .fonction.inverse .fonction-texte { order: 0; }
  .fonction + .fonction { margin-top: 90px; }
  .fonction-visuel { max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 480px) { .fonction-visuel { gap: 12px; } .fonction-visuel .telephone.recule { transform: translateY(-18px); } }

/* Etapes de creation du site (3 telephones) */
.trois-etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 10px; }
.trois-etapes figure { margin: 0; text-align: center; }
.trois-etapes .telephone { width: 78%; max-width: 250px; margin: 0 auto; }
.trois-etapes figcaption { margin-top: 22px; }
.trois-etapes figcaption b { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bleu); color: #fff; font-size: 0.9rem; margin-bottom: 10px; }
.trois-etapes figcaption strong { display: block; color: var(--encre); font-size: 1.08rem; }
.trois-etapes figcaption span { display: block; color: var(--gris); font-size: 0.95rem; margin-top: 4px; }
@media (max-width: 820px) {
  .trois-etapes { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 4px 16px; margin: 0 -16px; padding-left: 16px; scrollbar-width: none; }
  .trois-etapes::-webkit-scrollbar { display: none; }
  .trois-etapes figure { scroll-snap-align: center; }
}

/* Galerie des 12 styles */
.styles-choix { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 34px; }
.styles-choix button {
  display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; padding: 9px 16px 9px 10px; border-radius: 999px;
  background: #fff; color: var(--texte); font-weight: 600; font-size: 0.93rem; box-shadow: inset 0 0 0 1.5px var(--ligne);
  transition: box-shadow 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.styles-choix button i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.styles-choix button:hover { box-shadow: inset 0 0 0 1.5px var(--bleu-ligne); }
.styles-choix button[aria-pressed="true"] { background: var(--encre); color: #fff; box-shadow: none; }
.styles-scene { position: relative; display: grid; grid-template-columns: 1fr 250px; gap: 36px; align-items: end; max-width: 1060px; margin: 0 auto; }
.styles-scene .telephone { width: 100%; }
.styles-scene img { transition: opacity 0.25s ease; }
.styles-scene.change img { opacity: 0; }
.styles-infos { max-width: 1060px; margin: 26px auto 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.styles-infos p { color: var(--gris); }
.styles-infos strong { color: var(--encre); }
@media (max-width: 860px) {
  .styles-scene { grid-template-columns: 1fr; }
  .styles-scene .telephone { display: none; }
  .styles-choix { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -16px 26px; padding: 2px 16px 8px; scrollbar-width: none; }
  .styles-choix::-webkit-scrollbar { display: none; }
  .styles-choix button { flex: none; }
}

/* Videos */
.videos-principale { max-width: 980px; margin: 0 auto; }
.lecteur {
  position: relative; border-radius: 24px; overflow: hidden; background: #050915; aspect-ratio: 16 / 9;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.lecteur video, .lecteur img { width: 100%; height: 100%; object-fit: cover; }
.lecteur .lancer {
  position: absolute; inset: 0; display: grid; place-items: center; border: 0; cursor: pointer; background: linear-gradient(180deg, rgba(5, 9, 21, 0) 40%, rgba(5, 9, 21, 0.55));
  color: #fff;
}
.lecteur .lancer .rond { width: 84px; height: 84px; border-radius: 50%; background: var(--bleu); display: grid; place-items: center; box-shadow: 0 0 0 12px rgba(35, 70, 240, 0.25); transition: transform 0.2s ease; }
.lecteur .lancer:hover .rond { transform: scale(1.06); }
.lecteur .lancer svg { width: 30px; height: 30px; margin-left: 5px; }
.lecteur .lancer .duree { position: absolute; left: 24px; bottom: 20px; font-weight: 650; font-size: 0.95rem; text-align: left; }
.lecteur .lancer .duree small { display: block; font-weight: 500; opacity: 0.75; }
/* Grande video : le bouton en bas a gauche, a cote du titre, pour ne
   jamais cacher le texte de l'affiche. */
.videos-principale .lancer { place-items: end start; padding: 28px; }
.videos-principale .lancer .rond { width: 72px; height: 72px; box-shadow: 0 0 0 10px rgba(35, 70, 240, 0.25); }
.videos-principale .lancer .duree { left: 124px; bottom: 36px; }
@media (max-width: 600px) {
  .videos-principale .lancer { padding: 14px; }
  .videos-principale .lancer .rond { width: 52px; height: 52px; box-shadow: 0 0 0 7px rgba(35, 70, 240, 0.25); }
  .videos-principale .lancer .rond svg { width: 22px; height: 22px; }
  .videos-principale .lancer .duree { left: 80px; bottom: 16px; font-size: 0.85rem; }
}
.videos-courtes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 30px; }
.video-courte { background: var(--nuit-2); border-radius: 20px; padding: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07); }
.video-courte .lecteur { aspect-ratio: 9 / 16; border-radius: 14px; box-shadow: none; }
.video-courte h3 { font-size: 1.05rem; margin: 16px 6px 4px; }
.video-courte p { font-size: 0.93rem; color: #aab4cf; margin: 0 6px 6px; }
.videos-note { text-align: center; margin-top: 28px; font-size: 0.9rem; color: #8b95b3; }
@media (max-width: 860px) {
  .videos-courtes { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 70%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 30px -16px 0; padding: 0 16px 10px; scrollbar-width: none; }
  .videos-courtes::-webkit-scrollbar { display: none; }
  .video-courte { scroll-snap-align: center; }
  .lecteur .lancer .rond { width: 66px; height: 66px; }
}

/* Bientot */
/* La petite etiquette posee a cote d'une fonction annoncee mais pas encore
   disponible (09/10/2026 : numero pro, SMS automatiques, messagerie par
   SMS, avis Google). Memes couleurs que ".bientot .etiquette". */
.bientot-pastille { display: inline-block; vertical-align: middle; margin-left: 6px; font-size: 0.68rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; color: #b26a00; background: #fff5e3; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.bientot-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (min-width: 1001px) { .bientot-grille.deux { grid-template-columns: repeat(2, 1fr); } }
.bientot { padding: 26px; border-radius: var(--rayon); background: #fff; box-shadow: inset 0 0 0 1px var(--ligne); }
.bientot .etiquette { display: inline-block; font-size: 0.75rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: #b26a00; background: #fff5e3; padding: 4px 10px; border-radius: 999px; margin-bottom: 16px; }
.bientot h3 { font-size: 1.08rem; margin-bottom: 8px; }
.bientot p { color: var(--gris); font-size: 0.96rem; }
@media (max-width: 1000px) { .bientot-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bientot-grille { grid-template-columns: 1fr; } }

/* Comment ca marche */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: etape; }
.etapes li { position: relative; padding: 34px 30px 30px; border-radius: var(--rayon); background: #fff; box-shadow: var(--ombre); }
.etapes li::before {
  counter-increment: etape; content: counter(etape); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  background: var(--bleu); color: #fff; font-weight: 800; font-size: 1.1rem; margin-bottom: 20px; box-shadow: 0 8px 18px rgba(35, 70, 240, 0.3);
}
.etapes h3 { margin-bottom: 8px; }
.etapes p { color: var(--gris); font-size: 1rem; }
@media (max-width: 900px) { .etapes { grid-template-columns: 1fr; } }

/* Offre */
.offre {
  max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; border-radius: 28px; overflow: hidden;
  box-shadow: var(--ombre-forte); background: #fff;
}
.offre-gauche { padding: 48px; }
.offre-gauche h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.offre-gauche > p { margin-top: 14px; color: var(--gris); font-size: 1.07rem; }
.offre-gauche .liste-coches { margin-top: 28px; }
.offre-droite {
  padding: 48px; color: #d9e0ff; display: flex; flex-direction: column; justify-content: center; gap: 18px;
  background: radial-gradient(500px 300px at 100% 0%, rgba(255, 201, 60, 0.18), transparent 60%), linear-gradient(160deg, #2346f0, #1528a0);
}
.offre-droite h3 { color: #fff; font-size: 1.5rem; letter-spacing: -0.02em; }
.offre-droite ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.offre-droite li { display: flex; gap: 10px; align-items: center; font-weight: 600; color: #fff; }
.offre-droite li svg { width: 20px; height: 20px; color: var(--jaune); flex: none; }
.offre-droite p { font-size: 0.95rem; }
.offre-droite .bouton { align-self: flex-start; margin-top: 8px; }
@media (max-width: 860px) { .offre { grid-template-columns: 1fr; } .offre-gauche, .offre-droite { padding: 34px 26px; } .offre-droite .bouton { align-self: stretch; } }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--ligne); transition: box-shadow 0.2s ease; }
.faq details[open] { box-shadow: inset 0 0 0 1.5px var(--bleu-ligne), var(--ombre); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 60px 22px 24px; font-weight: 650; color: var(--encre); font-size: 1.05rem; position: relative; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 24px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--bleu-pale)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232346f0' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 13px no-repeat;
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 24px 22px; color: var(--gris); }

/* Demande de demo */
.demo { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; }
.demo-texte h2 { color: #fff; }
.demo-texte > p { margin-top: 18px; font-size: 1.12rem; color: #b9c3dd; }
.demo-texte .liste-coches li { color: #dbe2f5; }
.demo-texte .liste-coches .coche { background: rgba(143, 164, 255, 0.16); color: #a9b9ff; }
.formulaire { background: #fff; border-radius: 24px; padding: 34px; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.35); color: var(--texte); }
.formulaire h3 { margin-bottom: 6px; }
/* Sur fond sombre (.bloc-nuit met les titres en blanc), le titre du formulaire reste fonce sur sa carte blanche. */
.bloc-nuit .formulaire h3 { color: var(--encre); }
.formulaire > p { color: var(--gris); font-size: 0.95rem; margin-bottom: 22px; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.champ { display: grid; gap: 6px; }
.champ.large { grid-column: 1 / -1; }
.champ label { font-weight: 600; font-size: 0.9rem; color: var(--encre); }
.champ label small { font-weight: 500; color: var(--gris-clair); }
.champ input, .champ textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--encre); padding: 13px 14px; border-radius: 12px; border: 1.5px solid var(--ligne); background: var(--fond-doux);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.champ textarea { min-height: 96px; resize: vertical; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--bleu); background: #fff; box-shadow: 0 0 0 4px rgba(35, 70, 240, 0.12); }
.champ input:invalid:not(:placeholder-shown) { border-color: #e0452f; }
.consentement { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 0.86rem; color: var(--gris); line-height: 1.45; }
.consentement input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--bleu); flex: none; }
.formulaire .bouton { width: 100%; margin-top: 20px; }
.formulaire-message { margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 0.95rem; display: none; }
.formulaire-message.visible { display: block; }
.formulaire-message.ok { background: #e7f7ee; color: #0b6b36; }
.formulaire-message.erreur { background: #fff0ee; color: #b3321f; }
@media (max-width: 960px) { .demo { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 560px) { .champs { grid-template-columns: 1fr; } .formulaire { padding: 24px 18px; } }

/* Pied de page */
.pied { background: var(--nuit); color: #8b95b3; padding: 56px 0 36px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.95rem; }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.pied .logo { color: #fff; }
.pied p { margin-top: 14px; max-width: 360px; }
.pied h4 { color: #fff; font-size: 0.95rem; margin-bottom: 14px; letter-spacing: 0; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pied a { color: #aab4cf; }
.pied a:hover { color: #fff; }
.pied-bas { margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.07); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.87rem; }
@media (max-width: 760px) { .pied-grille { grid-template-columns: 1fr 1fr; } .pied-grille > div:first-child { grid-column: 1 / -1; } }

/* Fenetre video */
.fenetre { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 20px; background: rgba(5, 9, 21, 0.82); backdrop-filter: blur(6px); }
.fenetre.ouverte { display: grid; }
.fenetre-contenu { position: relative; width: min(1000px, 100%); }
.fenetre-contenu.vertical { width: min(420px, 100%); }
.fenetre video { width: 100%; max-height: 86vh; border-radius: 18px; background: #000; }
.fenetre-fermer { position: absolute; top: -52px; right: 0; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; display: grid; place-items: center; }
.fenetre-fermer svg { width: 20px; height: 20px; }

/* Apparition au defilement */
.apparait { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.apparait.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .apparait { opacity: 1; transform: none; transition: none; } }

/* Pages legales */
.page-legale { padding: 64px 0 90px; }
.page-legale .conteneur { max-width: 820px; }
.page-legale h1 { font-size: clamp(2rem, 4vw, 2.7rem); margin-bottom: 10px; }
.page-legale h2 { font-size: 1.35rem; margin: 40px 0 12px; }
.page-legale p, .page-legale li { color: var(--texte); }
.page-legale p + p { margin-top: 12px; }
.page-legale .maj { color: var(--gris); font-size: 0.95rem; }
.page-legale h3 { font-size: 1.08rem; margin: 28px 0 8px; }
.page-legale ul { margin: 12px 0 0; padding-left: 1.3em; display: grid; gap: 6px; }
.page-legale ul + p { margin-top: 12px; }
.a-completer { background: #fff5e3; color: #8a5300; padding: 1px 6px; border-radius: 6px; font-weight: 600; }
.avertissement { margin: 22px 0 10px; padding: 14px 16px; border-radius: 14px; background: #fff5e3; color: #8a5300; font-size: 0.95rem; }

/* Pages legales : sans menu, le bouton "Retour au site" passe a droite. */
.logo + .entete-actions { margin-left: auto; }

/* Telephones : le bouton de l'en-tete se raccourcit ("Demo") pour tenir a cote du
   logo et de sa phrase "L'application des artisans" ; le bouton du menu ne
   retrecit jamais (a 390 px il sortait de l'ecran). */
.texte-court { display: none; }
@media (max-width: 480px) { .texte-long { display: none; } .texte-court { display: inline; } }
.burger { flex: none; }

/* ---------- Page "Créer mon compte" ---------- */
/* Ordinateur : texte a gauche, formulaire a droite. Telephone et tablette : le
   titre et sa phrase, puis le formulaire, puis les coches et le lien demo. */
.inscription { display: grid; grid-template-columns: 1fr 1.05fr; grid-template-rows: auto 1fr; grid-template-areas: "intro formulaire" "suite formulaire"; column-gap: 56px; align-items: start; }
.inscription-intro { grid-area: intro; }
.inscription-suite { grid-area: suite; }
.inscription > .formulaire { grid-area: formulaire; }
.inscription-texte h1 { font-size: clamp(2rem, 4vw, 2.9rem); margin-top: 8px; }
.inscription-texte .sous-titre { margin-top: 18px; font-size: 1.1rem; color: var(--gris); }
.inscription-texte .liste-coches { margin-top: 26px; }
.gris-note { margin-top: 28px; color: var(--gris); font-size: 0.95rem; }
@media (max-width: 960px) {
  .inscription { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "intro" "formulaire" "suite"; }
  .inscription > .formulaire { margin-top: 30px; }
  .inscription-suite { margin-top: 14px; }
}

/* "Demander une demo" : bouton a gauche de "Creer mon compte" tant qu'il y a
   la place dans l'en-tete (tablette comprise) ; sur telephone, il n'est plus
   que dans le menu. */
@media (max-width: 640px) {
  .bouton-secondaire { display: none; }
}

/* Bas du menu replie : "Creer un compte" (encadre) et "Demander une demo"
   (plein), en vrais boutons, pour les distinguer des liens du menu. Les
   regles ".nav a" (liens soulignes d'un trait) ne doivent pas s'y appliquer. */
.nav-actions { display: none; }
@media (max-width: 900px) {
  .nav .nav-actions { display: grid; gap: 10px; margin-top: 18px; }
  .nav .nav-actions .bouton {
    min-height: 52px; padding: 0 20px; border-bottom: 0; border-radius: 999px;
    font-size: 1rem; font-weight: 650; justify-content: center;
  }
  .nav .nav-actions .bouton-clair { color: var(--encre); background: #fff; box-shadow: inset 0 0 0 1.5px var(--encre); }
  .nav .nav-actions .bouton-plein { color: #fff; background: var(--bleu); }
}

/* ---------- Accueil (Artilona pour tous les artisans) ---------- */
/* Sur telephone, l'en-tete colle suit le decalage sous la barre du systeme. */
.entete { top: env(safe-area-inset-top, 0px); }
.pastille .eclair.logo-rond { background: #123e9b; color: #fff; }
.pastille .eclair.logo-rond svg { width: 20px; height: 20px; }

/* Les quatre atouts : un telephone et une legende chacun. */
.atouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; row-gap: 56px; }
.atouts figure { margin: 0; text-align: center; }
.atouts .telephone { width: 82%; max-width: 230px; margin: 0 auto; }
.atouts figcaption { margin-top: 22px; }
.atout-icone { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--bleu-pale); color: var(--bleu); margin-bottom: 10px; }
.atout-icone svg { width: 20px; height: 20px; }
.atouts figcaption strong { display: block; color: var(--encre); font-size: 1.08rem; }
.atouts figcaption .texte { display: block; color: var(--gris); font-size: 0.95rem; margin-top: 4px; }
@media (max-width: 1000px) { .atouts { grid-template-columns: 1fr 1fr; row-gap: 48px; } }
@media (max-width: 640px) {
  .atouts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 16px; scrollbar-width: none; }
  .atouts::-webkit-scrollbar { display: none; }
  .atouts figure { scroll-snap-align: center; }
}

/* Les metiers : une carte par metier, et une carte "pas encore la". */
.metiers-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 920px; margin: 0 auto; }
.carte-metier { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 30px; border-radius: var(--rayon); background: #fff; box-shadow: var(--ombre); color: var(--texte); transition: transform 0.15s ease, box-shadow 0.2s ease; }
a.carte-metier:hover { color: var(--texte); transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.carte-metier .metier-icone { width: 52px; height: 52px; border-radius: 16px; }
.carte-metier .metier-icone svg { width: 26px; height: 26px; }
.carte-metier h3 { font-size: 1.35rem; }
.carte-metier p { color: var(--gris); font-size: 1rem; }
.carte-metier .dispo { font-size: 0.75rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: #0b7a3b; background: #e7f6ed; padding: 4px 10px; border-radius: 999px; }
.carte-metier .lien { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; color: var(--bleu); font-weight: 650; }
.carte-metier .lien svg { width: 18px; height: 18px; }
.carte-metier.a-venir { background: transparent; box-shadow: none; border: 2px dashed var(--bleu-ligne); }
@media (max-width: 760px) { .metiers-grille { grid-template-columns: 1fr; } }

/* Nom + phrase d'accroche sous le nom, dans l'en-tete. */
.logo-texte { display: flex; flex-direction: column; line-height: 1.1; }
.logo-texte small { margin-top: 2px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0; color: var(--gris); white-space: nowrap; }

/* Petit lien vers la demande de demo, sous les boutons du haut de page et
   dans la section "Creer mon compte" (fond sombre). */
.accroche-demo { margin: 14px 0 0; color: var(--gris); font-size: 0.95rem; }
.accroche-demo a { color: var(--bleu); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.lien-demo-clair { margin-top: 26px; color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; }
.lien-demo-clair a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 900px) { .accroche-demo { text-align: center; } }

/* ============ PAGE NOS SERVICES ============ */
/* Debut de page different de l'accueil : fond sombre et sommaire des
   services, chaque carte menant a son bloc plus bas. */
.services-haut { padding: 84px 0 92px; color: #c9d1e6; background: radial-gradient(1000px 520px at 12% -10%, rgba(35, 70, 240, 0.45), transparent 60%), radial-gradient(700px 420px at 100% 110%, rgba(35, 70, 240, 0.28), transparent 60%), var(--nuit); }
.services-intro { max-width: 800px; }
.services-intro .surtitre { color: #8fa4ff; }
.services-intro h1 { color: #fff; margin-top: 10px; }
.services-intro h1 em { font-style: normal; color: #8fa4ff; }
.services-intro p { margin-top: 20px; font-size: 1.15rem; color: #aab4cf; max-width: 680px; }
.services-sommaire { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.services-sommaire a { display: flex; flex-direction: column; height: 100%; padding: 20px; border-radius: 18px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); color: #aab4cf; font-size: 0.92rem; line-height: 1.35; transition: background 0.2s ease, transform 0.2s ease; }
.services-sommaire a:hover { background: rgba(255, 255, 255, 0.09); transform: translateY(-2px); color: #aab4cf; }
.services-sommaire .numero { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.38); }
.services-sommaire .icone { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin: 10px 0 14px; background: rgba(143, 164, 255, 0.16); color: #a9b9ff; }
.services-sommaire .icone svg { width: 21px; height: 21px; }
.services-sommaire strong { color: #fff; font-size: 1.05rem; margin-bottom: 4px; }
.services-action { margin-top: 36px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; }
.services-action span { color: #aab4cf; font-size: 0.95rem; }
@media (max-width: 1060px) { .services-sommaire { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .services-haut { padding: 54px 0 64px; }
  .services-sommaire { gap: 10px; margin-top: 36px; }
  .services-sommaire a { padding: 16px 14px; font-size: 0.84rem; }
  .services-sommaire strong { font-size: 0.97rem; }
  .services-sommaire .icone { width: 38px; height: 38px; margin: 8px 0 10px; }
  .services-action .bouton { width: 100%; }
  .services-action span { text-align: center; width: 100%; }
}

/* "Dans votre site" : ce que contient le site, en cartes. */
.contenu-site { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.contenu-site li { background: #fff; border-radius: var(--rayon); padding: 24px; box-shadow: inset 0 0 0 1px var(--ligne); }
.contenu-site .icone { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px; background: var(--bleu-pale); color: var(--bleu); }
.contenu-site .icone svg { width: 22px; height: 22px; }
.contenu-site h3 { font-size: 1.05rem; margin-bottom: 6px; }
.contenu-site p { color: var(--gris); font-size: 0.95rem; margin: 0; }
@media (max-width: 1000px) { .contenu-site { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .contenu-site { grid-template-columns: 1fr; } }

/* Accueil, fin de "Ce que vous avez" : vers la page Nos services. */
.vers-services { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.vers-services span { font-size: 0.85rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bleu); }
@media (max-width: 560px) { .vers-services .bouton { width: 100%; } }

/* ============ PAGE ELECTRICIEN (refaite le 25/09/2026) ============ */
/* Haut de page : le texte, et une mosaique de photos du metier. */
.elec-haut { position: relative; padding: 60px 0 36px; background: linear-gradient(180deg, #fff8e6 0%, #fff 68%); overflow: hidden; }
.elec-haut-grille { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.elec-pastille { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px #f5c542; color: #8a5a00; font-weight: 750; font-size: 0.92rem; }
.elec-pastille svg { width: 18px; height: 18px; color: #f59e0b; }
.elec-haut h1 { margin-top: 18px; }
.elec-haut h1 em { font-style: normal; color: var(--bleu); }
.elec-haut .sous-titre { margin-top: 20px; font-size: 1.14rem; color: var(--gris); max-width: 560px; }
.elec-haut .accroche-boutons { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.elec-mosaique { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; transform: rotate(-2deg); }
.elec-mosaique figure { position: relative; margin: 0; aspect-ratio: 1; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 34px rgba(11, 18, 32, 0.16); }
.elec-mosaique figure:nth-child(3n + 2) { transform: translateY(18px); }
.elec-mosaique img { width: 100%; height: 100%; object-fit: cover; display: block; }
.elec-mosaique figcaption { position: absolute; left: 8px; bottom: 8px; right: 8px; padding: 4px 8px; border-radius: 8px; background: rgba(11, 18, 32, 0.62); color: #fff; font-size: 0.72rem; font-weight: 600; line-height: 1.25; }
.elec-chiffres { list-style: none; margin: 56px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.elec-chiffres li { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--ligne); }
.elec-chiffres strong { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.04em; color: var(--bleu); line-height: 1; }
.elec-chiffres span { color: var(--gris); font-size: 0.95rem; line-height: 1.3; }
@media (max-width: 900px) {
  .elec-haut-grille { grid-template-columns: 1fr; gap: 40px; }
  .elec-haut-texte { text-align: center; }
  .elec-haut .sous-titre { margin-left: auto; margin-right: auto; }
  .elec-haut .accroche-boutons, .elec-haut .garanties { justify-content: center; }
  .elec-mosaique { transform: none; max-width: 520px; margin: 0 auto; width: 100%; }
}
@media (max-width: 640px) {
  .elec-chiffres { grid-template-columns: 1fr; margin-top: 44px; }
  .elec-chiffres li { padding: 14px 18px; }
  .elec-chiffres strong { font-size: 2.1rem; min-width: 64px; }
  .elec-mosaique { gap: 7px; }
  .elec-mosaique figcaption { display: none; }
  .elec-mosaique figure:nth-child(3n + 2) { transform: translateY(10px); }
}

/* Les 12 services. */
.elec-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.elec-service { background: #fff; border-radius: var(--rayon); overflow: hidden; box-shadow: inset 0 0 0 1px var(--ligne); display: flex; flex-direction: column; }
.elec-service-photo { position: relative; aspect-ratio: 16 / 10; }
.elec-service-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.elec-badge { position: absolute; left: 12px; top: 12px; padding: 5px 11px; border-radius: 999px; background: #fff; color: var(--teinte); font-size: 0.78rem; font-weight: 750; box-shadow: 0 4px 12px rgba(11, 18, 32, 0.18); }
.elec-service-corps { padding: 20px 22px 18px; display: flex; flex-direction: column; flex: 1; }
.elec-service h3 { font-size: 1.1rem; margin-bottom: 8px; }
.elec-service p { color: var(--gris); font-size: 0.95rem; margin: 0; }
.elec-service .elec-cibles { margin-top: 10px; font-size: 0.84rem; font-weight: 600; color: var(--encre); }
.elec-service details { margin-top: auto; padding-top: 14px; }
.elec-service summary { cursor: pointer; font-weight: 650; font-size: 0.92rem; color: var(--bleu); list-style: none; }
.elec-service summary::-webkit-details-marker { display: none; }
.elec-service summary::after { content: " +"; }
.elec-service details[open] summary::after { content: " \2212"; }
.elec-service ul { margin: 10px 0 0; padding-left: 18px; color: var(--gris); font-size: 0.9rem; }
.elec-service li { margin-top: 4px; }
@media (max-width: 1000px) { .elec-services { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .elec-services { grid-template-columns: 1fr; } }

/* Le mur de photos. */
.elec-photos-grille { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; }
.elec-photos-texte { position: sticky; top: 110px; }
.elec-photos-texte h2 { margin-top: 10px; }
.elec-photos-texte p { color: #aab4cf; margin-top: 16px; font-size: 1.08rem; }
.elec-photos-texte .liste-coches { margin-top: 24px; }
.elec-photos-texte .liste-coches li { color: #c9d1e6; }
.elec-photos-texte .liste-coches strong { color: #fff; }
.elec-mur { columns: 3; column-gap: 10px; }
.elec-mur figure { position: relative; margin: 0 0 10px; break-inside: avoid; border-radius: 14px; overflow: hidden; }
.elec-mur img { width: 100%; display: block; }
.elec-mur figure:nth-child(4n + 1) img { aspect-ratio: 3 / 4; object-fit: cover; }
.elec-mur figcaption { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 7px; background: rgba(10, 16, 34, 0.65); color: #fff; font-size: 0.74rem; font-weight: 600; }
@media (max-width: 900px) {
  .elec-photos-grille { grid-template-columns: 1fr; gap: 36px; }
  .elec-photos-texte { position: static; }
}
@media (max-width: 560px) { .elec-mur { columns: 2; column-gap: 8px; } .elec-mur figure { margin-bottom: 8px; } }

/* Les textes du metier : un extrait de site. */
.elec-textes-grille { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.elec-textes-texte p { color: var(--gris); margin-top: 16px; font-size: 1.08rem; }
.elec-textes-texte h2 { margin-top: 10px; }
.elec-textes-texte .liste-coches { margin-top: 24px; }
.elec-extrait { border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px rgba(11, 18, 32, 0.14), inset 0 0 0 1px var(--ligne); }
.elec-extrait-barre { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--fond-doux); border-bottom: 1px solid var(--ligne); font-size: 0.8rem; color: var(--gris); }
.elec-extrait-barre .points { display: inline-flex; gap: 5px; }
.elec-extrait-barre .points i { width: 9px; height: 9px; border-radius: 50%; background: #d4d8e0; }
.elec-extrait-corps { padding: 24px 26px 26px; font-size: 0.9rem; color: var(--gris); max-height: 560px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
.elec-extrait-titre { font-size: 1.45rem; font-weight: 800; color: var(--encre); letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.elec-extrait-titre em { font-style: normal; color: #f06624; }
.elec-extrait-sous { margin: 10px 0 0; }
.elec-extrait h4 { margin: 20px 0 8px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: #f06624; }
.elec-extrait p { margin: 0; line-height: 1.55; }
.elec-engagements { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.elec-engagements li { padding: 10px 12px; border-radius: 10px; background: var(--fond-doux); font-size: 0.82rem; line-height: 1.4; }
.elec-engagements strong { display: block; color: var(--encre); font-size: 0.88rem; margin-bottom: 2px; }
.elec-faq { list-style: none; margin: 0; padding: 0; }
.elec-faq li { padding: 9px 0; border-bottom: 1px solid var(--ligne); color: var(--encre); font-weight: 600; font-size: 0.86rem; }
@media (max-width: 900px) { .elec-textes-grille { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 480px) { .elec-engagements { grid-template-columns: 1fr; } .elec-extrait-corps { padding: 18px; } }

/* Particuliers et professionnels. */
.elec-publics { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.elec-public { background: #fff; border-radius: var(--rayon); padding: 28px; box-shadow: inset 0 0 0 1px var(--ligne); }
.elec-public h3 { font-size: 1.25rem; }
.elec-public > p { color: var(--gris); margin-top: 8px; }
.elec-public ul { list-style: none; margin: 18px 0 0; padding: 0; }
.elec-public li { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--ligne); font-size: 0.95rem; }
.elec-public li strong { color: var(--encre); }
.elec-public li span { color: var(--gris); text-align: right; }
@media (max-width: 800px) { .elec-publics { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .elec-public li { flex-direction: column; gap: 2px; } .elec-public li span { text-align: left; } }

/* Trois styles pour l'electricite. */
.elec-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.elec-style { margin: 0; }
.elec-style .navigateur { width: 100%; }
.elec-style figcaption { margin-top: 14px; }
.elec-style figcaption strong { display: block; color: var(--encre); font-size: 1.08rem; }
.elec-style figcaption span { display: block; color: var(--gris); font-size: 0.93rem; margin-top: 4px; }
.elec-lien-styles { margin-top: 30px; text-align: center; }
.elec-lien-styles a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--bleu); }
.elec-lien-styles svg { width: 18px; height: 18px; }
@media (max-width: 900px) { .elec-styles { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }

/* Et tout le reste. */
.elec-reste { padding: 0 0 96px; background: var(--fond-doux); }
.elec-reste-carte { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 34px; border-radius: var(--rayon); background: #fff; box-shadow: inset 0 0 0 1px var(--ligne); }
.elec-reste-carte h2 { font-size: 1.5rem; }
.elec-reste-carte p { color: var(--gris); margin-top: 8px; max-width: 620px; }
@media (max-width: 760px) { .elec-reste-carte { flex-direction: column; align-items: stretch; text-align: center; } .elec-reste-carte p { margin-left: auto; margin-right: auto; } }
.elec-chiffres .elec-chiffre-mot strong { font-size: 1.7rem; line-height: 1.05; }
@media (max-width: 640px) { .elec-chiffres .elec-chiffre-mot strong { font-size: 1.5rem; } }

/* ============ PAGE INTROUVABLE (404.html) ============ */
.page-404 { padding: 72px 0 96px; background: linear-gradient(180deg, var(--bleu-pale) 0%, #fff 60%); }
.page-404 .conteneur { max-width: 720px; text-align: center; }
.page-404-code { margin: 0; font-size: clamp(4.5rem, 16vw, 8rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--bleu); opacity: 0.18; }
.page-404 h1 { margin-top: 6px; font-size: clamp(2rem, 4.4vw, 3rem); }
.page-404-texte { margin: 16px auto 0; max-width: 520px; color: var(--gris); font-size: 1.1rem; }
.page-404-boutons { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.page-404-liens { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 12px; text-align: left; }
.page-404-liens a { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; padding: 18px 22px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--ligne); color: var(--encre); text-decoration: none; transition: box-shadow 0.2s, transform 0.2s; }
.page-404-liens a:hover { box-shadow: inset 0 0 0 1.5px var(--bleu-ligne), 0 10px 24px rgba(11, 18, 32, 0.08); transform: translateY(-1px); }
.page-404-liens strong { flex: 1 1 auto; font-size: 1.02rem; }
.page-404-liens span { order: 3; flex-basis: 100%; color: var(--gris); font-size: 0.93rem; }
.page-404-liens svg { width: 20px; height: 20px; color: var(--bleu); flex: none; }
@media (max-width: 480px) { .page-404 { padding: 48px 0 72px; } .page-404-boutons .bouton { flex: 1 1 100%; } }

/* ============ PAGES DU PAIEMENT (bienvenue.html, abonnement.html) ============ */
.formulaire-lien { font-weight: 700; color: inherit; text-decoration: underline; }
.page-paiement { padding: 64px 0 96px; background: linear-gradient(180deg, var(--bleu-pale) 0%, #fff 55%); }
.page-paiement .conteneur { max-width: 640px; }
.page-paiement h1 { font-size: clamp(2rem, 4.4vw, 2.8rem); }
.page-paiement-icone { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 50%; background: #e7f7ee; color: #0b6b36; }
.page-paiement-icone .coche { display: contents; }
.page-paiement-icone svg { width: 28px; height: 28px; }
.page-paiement-texte { margin-top: 16px; color: var(--gris); font-size: 1.1rem; }
.page-paiement-etapes { list-style: none; counter-reset: etape; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; }
.page-paiement-etapes li { counter-increment: etape; position: relative; padding: 18px 20px 18px 64px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--ligne); }
.page-paiement-etapes li::before { content: counter(etape); position: absolute; left: 20px; top: 18px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bleu); color: #fff; font-weight: 800; font-size: 0.95rem; }
.page-paiement-etapes strong { display: block; color: var(--encre); }
.page-paiement-etapes span { display: block; margin-top: 2px; color: var(--gris); font-size: 0.95rem; }
.page-paiement-formulaire { margin-top: 28px; }
.page-paiement-note { margin: 24px 0; color: var(--gris); font-size: 0.93rem; }
@media (max-width: 480px) { .page-paiement { padding: 44px 0 72px; } .page-paiement .bouton { width: 100%; } }

/* Etape "Installez l'application" (bienvenue.html + bienvenue.js), avant le remerciement.
   Tant que le script regarde s'il faut l'afficher, le remerciement attend (filet : 2,5 s). */
.page-paiement [hidden] { display: none !important; }
.avec-js .page-merci.en-attente { visibility: hidden; animation: montrer-tard 0s linear 2.5s forwards; }
@keyframes montrer-tard { to { visibility: visible; } }
.page-appli-icone { background: #fff; color: var(--bleu); box-shadow: var(--ombre); }
.page-appli-qr { display: inline-block; margin-top: 28px; padding: 16px; border-radius: 20px; background: #fff; box-shadow: var(--ombre); }
.page-appli-qr img { display: block; width: 200px; height: 200px; }
.page-appli-stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.bouton-store { display: inline-flex; flex-direction: column; justify-content: center; min-width: 178px; min-height: 56px; padding: 8px 20px; border-radius: 14px; background: var(--encre); color: #fff; font-weight: 700; font-size: 1.2rem; line-height: 1.1; transition: transform 0.15s ease, background 0.15s ease; }
.bouton-store small { font-size: 0.72rem; font-weight: 500; opacity: 0.85; }
.bouton-store:hover { color: #fff; background: #1c2742; transform: translateY(-1px); }
.page-appli .page-paiement-etapes { margin-top: 28px; }
.page-appli-attente { display: flex; align-items: center; gap: 10px; margin-top: 24px; color: var(--gris); font-size: 0.95rem; }
.page-appli-attente::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--vert); animation: pulsation 1.6s ease-in-out infinite; }
@keyframes pulsation { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }
/* "Je le ferai plus tard" : presque invisible, apparait apres 4 secondes (choix de Charles). */
.page-appli-plus-tard { display: inline-block; margin-top: 40px; color: var(--gris-clair); font-size: 0.8rem; opacity: 0.6; animation: fondu 0.8s ease both; }
.page-appli-plus-tard:hover { opacity: 1; color: var(--gris); }
@keyframes fondu { from { opacity: 0; } }
.page-appli-ok { margin-top: 16px; color: #0b6b36; font-weight: 700; }
.page-appli-ok::before { content: "✓ "; }
@media (prefers-reduced-motion: reduce) { .page-appli-attente::before, .page-appli-plus-tard { animation: none; } }

/* Formulaire de creation de compte, sur ordinateur, une fois l'appli publiee (inscription.js). */
.formulaire > .formulaire-telephone { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 12px 14px; border-radius: 12px; background: var(--bleu-pale); color: var(--bleu-fonce); font-weight: 700; font-size: 0.95rem; line-height: 1.35; }
.formulaire-telephone svg { flex: none; width: 22px; height: 22px; }

/* Parrainage (03/10/2026). Bandeau d'invitation en haut de page et phrase
   "Invité par..." au-dessus du bouton d'envoi (inscription.js : le
   parrainage passe par le lien seul, sans case a remplir) ; page "Mon
   parrainage" (parrainage.html). */
.bandeau-parrain { padding: 10px 16px; background: var(--encre); color: #fff; text-align: center; font-size: 0.95rem; line-height: 1.45; }
.bandeau-parrain strong { color: #ffd66b; font-weight: 700; }
.bandeau-parrain a { color: #fff; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.bandeau-parrain a:hover { color: #ffd66b; }
/* ".formulaire" devant : sans lui, la règle ".formulaire > p" (plus haut) reprend
   la main sur la taille et la marge du bas de la phrase. */
.formulaire .parrain-note { margin: 14px 0 0; font-size: 0.88rem; font-weight: 600; line-height: 1.4; }
/* La phrase est suivie du bouton d'envoi : il se rapproche d'elle. */
.formulaire .parrain-note:not([hidden]) + .bouton { margin-top: 16px; }
.parrain-note.ok { color: #0b6b36; }
.parrain-note.erreur { color: #b3321f; }
.parrain-lien { margin-top: 28px; padding: 22px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--ligne); }
.parrain-lien label { display: block; font-weight: 600; font-size: 0.9rem; color: var(--encre); margin-bottom: 8px; }
.parrain-lien input { width: 100%; font: inherit; font-size: 1rem; color: var(--encre); padding: 13px 14px; border-radius: 12px; border: 1.5px solid var(--ligne); background: var(--fond-doux); }
.parrain-lien-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.parrain-lien-actions .bouton { flex: 1 1 180px; }
.parrain-bilan { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.parrain-bilan div { padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--ligne); }
.parrain-bilan b { display: block; font-size: 1.9rem; line-height: 1.1; color: var(--encre); font-variant-numeric: tabular-nums; }
.parrain-bilan span { color: var(--gris); font-size: 0.93rem; }
.parrain-filleuls { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.parrain-filleuls li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--ligne); }
.parrain-filleuls strong { color: var(--encre); }
.parrain-filleuls span { font-size: 0.9rem; color: var(--gris); }
.parrain-filleuls span.gagne { color: #0b6b36; font-weight: 700; }
.page-paiement h2.parrain-titre { margin-top: 36px; font-size: 1.25rem; }