/* Site public de Virtuo360, v11 (refonte du 29 octobre 2026).
   Source du design : la maquette Claude Design « Virtuo360, refonte du site »
   (https://claude.ai/artifact/WSSAGLZSDoYVjjkEmrmZ6Q, version 27).
   Geist pour le texte, Geist Mono pour les surtitres, du blanc, une bande Nuit
   par page, et le bleu du logo pour le chemin pointillé. Les briques sont
   décrites dans partiels/GABARIT.md. */

:root {
  --encre: #14171B;
  --texte: #3B4047;
  --gris: #646970;
  --gris-titre: #8A8F96;
  --filet: #E7E7E4;
  --filet-2: #ECECEA;
  --champ: #D9D9D6;
  --surface: #F4F4F2;
  --surface-2: #F7F7F6;
  --bleu: #0F75BD;
  --bleu-voile: rgba(15, 117, 189, 0.14);
  --nuit: #0B0F14;
  --nuit-2: #141A21;
  --nuit-3: #1B232C;
  --nuit-filet: #232B35;
  --nuit-filet-2: #39424D;
  --nuit-texte: #ECEEF0;
  --nuit-doux: #A9B1BA;
  --nuit-gris: #7E8792;
  --nuit-mono: #9BA4AE;
  --ciel: #5AA9E6;
  --ciel-2: #7DBBEA;
  --vert: #1F9D55;
  --police: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; color: var(--texte); font-family: var(--police); font-size: 16px; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: var(--encre); text-decoration: none; }
a:hover { color: var(--bleu); }
h1, h2, h3, h4, p, figure, ol, ul { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
[hidden] { display: none !important; }
.lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--encre); color: #FFFFFF; padding: 10px 16px; border-radius: 8px; }
.evitement:focus { top: 12px; color: #FFFFFF; }

/* ---------- mise en page ---------- */
.conteneur { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.conteneur-etroit { max-width: 820px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.section { padding-top: 112px; padding-bottom: 112px; }
.filet-haut { border-top: 1px solid var(--filet); }
.pile { display: flex; flex-direction: column; }
.rangee { display: flex; flex-wrap: wrap; }
.tete-section { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 64px; }
.tete-section > .h2 { flex: 1 1 520px; }
.tete-section > p { flex: 1 1 320px; max-width: 420px; font-size: 17px; line-height: 1.6; }

/* ---------- textes ---------- */
.surtitre { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bleu); }
.surtitre-gris { color: var(--gris); }
.h1 { font-weight: 500; font-size: clamp(42px, 5.1vw, 74px); line-height: 1.04; letter-spacing: -0.035em; color: var(--encre); }
.h1-moyen { font-size: clamp(42px, 4.8vw, 67px); }
.h2 { font-weight: 500; font-size: clamp(32px, 3.5vw, 48px); line-height: 1.04; letter-spacing: -0.03em; color: var(--encre); }
.h2-appel { font-size: clamp(35px, 4vw, 54px); }
.h3 { font-size: 21px; font-weight: 500; line-height: 1.3; color: var(--encre); }
.doux { color: var(--gris-titre); }
.lead { font-size: 18px; line-height: 1.6; }
.petit { font-size: 15px; }
.num { font-family: var(--mono); font-size: 13px; color: var(--bleu); }

/* ---------- boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 999px; font-size: 15px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.bouton-plein { background: var(--encre); color: #FFFFFF; }
.bouton-plein:hover { background: #2A3038; color: #FFFFFF; }
.bouton-contour { border-color: var(--encre); color: var(--encre); background: #FFFFFF; }
.bouton-contour:hover { background: var(--encre); color: #FFFFFF; }
.bouton-grand { height: 52px; padding: 0 28px; font-size: 16px; }
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-size: 15px; font-weight: 500; color: var(--encre); }
.lien-fleche svg { transition: transform .2s ease; }
.lien-fleche:hover svg { transform: translateX(3px); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* ---------- navigation ---------- */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--filet); }
.nav-barre { max-width: 1240px; margin: 0 auto; padding: 0 24px; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; }
.nav-marque { display: flex; align-items: center; height: 44px; flex: none; }
.nav-marque img { height: 30px; width: auto; }
.nav-liens { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.nav-liens a { display: inline-flex; align-items: center; height: 44px; color: var(--texte); white-space: nowrap; text-underline-offset: 8px; text-decoration-thickness: 1.5px; }
.nav-liens a:hover, .nav-liens a[aria-current="page"] { color: var(--encre); text-decoration: underline; text-decoration-color: var(--bleu); }
.nav-droite { display: flex; align-items: center; gap: 12px; flex: none; }
.nav-langue { font-size: 14px; color: var(--gris); display: inline-flex; align-items: center; height: 44px; padding: 0 8px; }
.nav-devis { height: 44px; padding: 0 20px; }
.nav-burger { display: none; width: 44px; height: 44px; border: 0; background: none; padding: 0; align-items: center; justify-content: center; color: var(--encre); cursor: pointer; }
.nav-burger .ferme { display: none; }
.nav[data-ouvert="true"] .nav-burger .ouvre { display: none; }
.nav[data-ouvert="true"] .nav-burger .ferme { display: block; }
.nav-tiroir { display: none; padding: 8px 16px 24px; border-top: 1px solid var(--filet); flex-direction: column; background: #FFFFFF; }
.nav-tiroir a { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--filet); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--encre); }
.nav-tiroir a.nav-tiroir-langue { border-bottom: 0; font-size: 15px; font-weight: 400; color: var(--gris); }
@media (max-width: 900px) {
  .nav-barre { padding: 0 16px; }
  .nav-liens, .nav-langue { display: none; }
  .nav-devis { padding: 0 16px; font-size: 14px; }
  .nav-burger { display: flex; }
  .nav[data-ouvert="true"] .nav-tiroir { display: flex; }
}

/* ---------- en-têtes de page ---------- */
.entete { padding-top: 96px; padding-bottom: 64px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 40px 64px; }
.entete-texte { flex: 1 1 620px; display: flex; flex-direction: column; gap: 24px; }
.entete-cote { flex: 1 1 340px; max-width: 420px; display: flex; flex-direction: column; gap: 28px; }
.entete-media { padding-top: 96px; padding-bottom: 112px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 56px 72px; }
.entete-media > .pile { flex: 1 1 520px; gap: 28px; }

/* ---------- médias ---------- */
.cadre { border-radius: 16px; overflow: hidden; background: var(--surface); }
.cadre img, .cadre video { width: 100%; height: 100%; object-fit: cover; }
.r-16-9 { aspect-ratio: 16 / 9; }
.r-16-10 { aspect-ratio: 16 / 10; }
.r-4-3 { aspect-ratio: 4 / 3; }
.r-4-5 { aspect-ratio: 4 / 5; }
.cadre-nuit { background: var(--nuit); }
.ancre-gauche { object-position: left center; }
.ancre-droite { object-position: right center; }
.ancre-haut { object-position: center top; }
.navigateur { border-radius: 14px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; border: 1px solid var(--filet); }
.navigateur-barre { height: 30px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #FFFFFF; border-bottom: 1px solid var(--filet); }
.navigateur-barre i { width: 8px; height: 8px; border-radius: 999px; background: var(--champ); }
.navigateur-barre span { margin-left: 10px; font-family: var(--mono); font-size: 11px; color: var(--gris); }
.telephone { position: relative; aspect-ratio: 414 / 860; border-radius: 36px; background: var(--nuit); padding: 9px; box-shadow: 0 40px 70px -36px rgba(11, 15, 20, 0.55); }
.telephone-ecran { position: relative; width: 100%; height: 100%; border-radius: 28px; overflow: hidden; background: #FFFFFF; }
.telephone-ecran .ecran-long { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 414 / 898; }
.telephone-ecran .ecran-long img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pouls { position: absolute; left: 43.7%; top: 46.5%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 999px; border: 2px solid #1F7AE0; opacity: 0; pointer-events: none; }
.etiquette-lieu { position: absolute; left: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 12px; border-radius: 999px; background: rgba(11, 15, 20, 0.72); color: #FFFFFF; font-size: 14px; font-weight: 500; }

/* ---------- cartes et colonnes ---------- */
.colonnes { display: flex; flex-wrap: wrap; gap: 40px 32px; }
.colonne { flex: 1 1 280px; border-top: 1px solid var(--encre); padding-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.colonne p { font-size: 16px; line-height: 1.6; }
.carte { flex: 1 1 360px; background: #FFFFFF; border: 1px solid var(--filet); border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.puce { height: 30px; padding: 0 12px; border-radius: 999px; background: var(--surface); color: var(--texte); font-size: 13px; display: inline-flex; align-items: center; }
.pastille { font-family: var(--mono); font-size: 12px; color: var(--texte); background: var(--surface); padding: 5px 10px; border-radius: 999px; }
.coche { flex: none; margin-top: 4px; }
.liste-coches { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.liste-coches li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--texte); }

/* ---------- bande Nuit ---------- */
.nuit { background: var(--nuit); color: var(--nuit-texte); }
.nuit .h2, .nuit .h3 { color: #FFFFFF; }
.nuit .doux { color: var(--nuit-gris); }
.nuit p { color: var(--nuit-doux); }
.nuit .surtitre-nuit { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nuit-mono); }
.nuit .colonne { border-top-color: var(--nuit-filet-2); }
.carte-nuit { background: var(--nuit-2); border: 1px solid var(--nuit-filet); border-radius: 16px; overflow: hidden; }
.nuit .bouton-contour { background: transparent; border-color: var(--nuit-filet-2); color: #FFFFFF; }
.nuit .bouton-contour:hover { background: #FFFFFF; color: var(--nuit); }

/* ---------- conversation du concierge ---------- */
.conversation { background: #FFFFFF; border: 1px solid var(--filet); border-radius: 20px; box-shadow: 0 40px 80px -48px rgba(20, 23, 27, 0.45); overflow: hidden; display: flex; flex-direction: column; color: var(--encre); }
.conversation-tete { padding: 18px 22px; border-bottom: 1px solid var(--filet-2); display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 500; }
.en-ligne { display: inline-flex; align-items: center; gap: 10px; }
.en-ligne::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--vert); }
.conversation-corps { position: relative; background: var(--surface-2); overflow: hidden; }
.scene { position: absolute; inset: 0; padding: 28px 22px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; }
.bulle { margin: 0; padding: 12px 16px; font-size: 15px; line-height: 1.5; }
.bulle-q { align-self: flex-end; max-width: 78%; border-radius: 16px 16px 4px 16px; background: var(--encre); color: #FFFFFF; }
.bulle-r { border-radius: 16px 16px 16px 4px; background: #FFFFFF; border: 1px solid var(--filet-2); color: var(--encre); }
.reponse { position: relative; align-self: flex-start; max-width: 86%; }
.points { position: absolute; left: 0; top: 0; display: flex; gap: 5px; padding: 15px 16px; border-radius: 16px 16px 16px 4px; background: #FFFFFF; border: 1px solid var(--filet-2); visibility: hidden; opacity: 0; }
.points span { width: 7px; height: 7px; border-radius: 999px; background: #9BA1A8; }
.ouvert-visite { align-self: flex-start; display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 14px; border-radius: 12px; background: #FFFFFF; border: 1px solid var(--filet-2); font-size: 14px; color: var(--texte); }
.saisie { position: relative; padding: 12px 12px 12px 22px; border-top: 1px solid var(--filet-2); display: flex; align-items: center; gap: 10px; }
.saisie input { flex: 1; min-width: 0; height: 44px; border: 0; outline: none; background: transparent; font: inherit; font-size: 15px; color: var(--encre); }
.saisie .frappe { position: absolute; left: 22px; right: 70px; top: 50%; transform: translateY(-50%); background: #FFFFFF; font-size: 15px; line-height: 44px; color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; visibility: hidden; opacity: 0; }
.envoyer { width: 44px; height: 44px; flex: none; border-radius: 999px; border: 0; background: var(--encre); color: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* ---------- carrousel de logos ---------- */
.logos { padding: 64px 0 88px; display: flex; flex-direction: column; align-items: center; gap: 36px; }
.logos-fenetre { width: 100%; max-width: 1240px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.logos-piste { display: flex; align-items: center; width: max-content; height: 64px; animation: defiler-logos 52s linear infinite; }
.logos-piste:hover { animation-play-state: paused; }
.logos-piste img { width: auto; margin-right: 72px; flex: none; filter: grayscale(1); opacity: 0.55; transition: filter .3s ease, opacity .3s ease; }
.logos-piste img:hover { filter: none; opacity: 1; }
@keyframes defiler-logos { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- appel final ---------- */
.appel { padding-bottom: 128px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.appel-chemin { display: flex; flex-direction: column; align-items: center; }
.appel-chemin::before { content: ''; width: 0; height: 88px; border-left: 2px dotted var(--bleu); }
.appel-chemin::after { content: ''; width: 12px; height: 12px; border-radius: 999px; background: var(--bleu); box-shadow: 0 0 0 6px var(--bleu-voile); }
.appel .h2 { margin-top: 8px; }
.appel p { max-width: 540px; font-size: 18px; line-height: 1.6; }

/* ---------- étapes reliées par le chemin ---------- */
.etape-tete { display: flex; align-items: center; gap: 12px; }
.etape-num { width: 32px; height: 32px; flex: none; border-radius: 999px; background: var(--bleu); color: #FFFFFF; font-family: var(--mono); font-size: 13px; display: flex; align-items: center; justify-content: center; }
.etape-fil { flex: 1; position: relative; height: 2px; }
.etape-fil::before { content: ''; position: absolute; left: 0; right: 0; top: 0; border-top: 2px dotted var(--bleu); opacity: 0.4; }
.etape-trait { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--bleu); transform-origin: left center; }

/* ---------- formulaire ---------- */
.formulaire { background: #FFFFFF; border: 1px solid var(--filet); border-radius: 20px; padding: 40px; display: flex; flex-direction: column; gap: 24px; }
.champ { flex: 1 1 220px; display: flex; flex-direction: column; gap: 8px; }
.champ label, .champ legend { font-size: 14px; font-weight: 500; color: var(--encre); }
.champ input, .champ textarea { height: 48px; padding: 0 14px; border: 1px solid var(--champ); border-radius: 10px; background: var(--surface-2); font: inherit; font-size: 16px; color: var(--encre); }
.champ textarea { height: auto; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.champ input:focus, .champ textarea:focus { outline: 2px solid var(--bleu); outline-offset: 1px; }
.choix { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border: 1px solid var(--champ); border-radius: 999px; font-size: 15px; color: var(--encre); cursor: pointer; }
.choix input { width: 16px; height: 16px; accent-color: var(--encre); margin: 0; }
.formulaire-erreur { font-size: 15px; color: #B42318; }

/* ---------- pied de page ---------- */
.pied { background: var(--nuit); color: var(--nuit-texte); }
.pied a { color: var(--nuit-texte); }
.pied a:hover { color: var(--ciel-2); }
.pied-corps { padding-top: 80px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 64px; }
.pied-haut { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px; }
.pied-marque { flex: 1 1 320px; max-width: 400px; display: flex; flex-direction: column; gap: 24px; }
.pied-marque img { height: 30px; width: auto; align-self: flex-start; }
.pied-devise { font-weight: 500; font-size: 25px; line-height: 1.12; color: var(--nuit-texte); letter-spacing: -0.01em; }
.pied-devise span { color: var(--nuit-gris); }
.pied-colonnes { display: flex; flex-wrap: wrap; gap: 32px 48px; }
.pied-colonne { display: flex; flex-direction: column; gap: 14px; font-size: 15px; }
.pied-colonne p { margin-bottom: 4px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nuit-mono); }
.pied-bas { border-top: 1px solid var(--nuit-filet); padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--nuit-mono); }
.pied-bas a { color: var(--nuit-mono); }

/* ---------- mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .logos-piste { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- téléphone ---------- */
@media (max-width: 640px) {
  .section { padding-top: 80px; padding-bottom: 80px; }
  .entete, .entete-media { padding-top: 64px; }
  .formulaire { padding: 24px; }
  .carte { padding: 24px; }
  .logos-piste img { margin-right: 48px; }
}