/* ============================================================
   HOSTERZZ — Page d'accueil
   Les jetons (palette miel, typographie) et les composants communs
   (boutons, champs, étiquette, logo, badges) vivent dans styles.css,
   partagé par tout le site. Ce fichier ne contient que la mise en
   page de l'accueil : premier écran et démonstrations, rail des
   étapes, produit, rapport, index des métiers, pied de page.
   ============================================================ */

:root {
  --rayon: 4px;
  --gouttiere: clamp(20px, 4vw, 56px);
  --largeur: 1240px;
}

body { font-size: 16px; }
.logo .hz-logo-svg { height: 26px; width: auto; display: block; }

/* Le surligneur se trace à l'arrivée (classe posée par la page). */
.js-anim .surligne { background-size: 0% .26em; transition: background-size 1s cubic-bezier(.65,0,.35,1) .3s; }
.js-anim.pret .surligne { background-size: 100% .26em; }

/* ── Pastilles d'état (produit) ── */
.etat { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .03em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; white-space: nowrap; }
.etat::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.etat-ok { color: var(--vert); background: var(--vert-voile); }
.etat-attente { color: var(--miel-encre); background: var(--miel-voile); }
.etat-neutre { color: var(--gris-texte); background: var(--creme); }

/* ============================================================
   PAGE D'ACCUEIL
   ============================================================ */
.cadre { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }
.fond-blanc { background: var(--blanc); }

/* ── En-tête ── */
.site-header, .site-header.solid { position: sticky; top: 0; background: color-mix(in srgb, var(--creme) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--lin); box-shadow: none; z-index: 50; }
.site-header .wrap { max-width: var(--largeur); padding: 0 var(--gouttiere); height: 68px; }
.site-header.hz-hero .logo, .site-header.hz-hero:not(.solid) .logo { color: var(--anthracite); }
.site-header .nav-links { display: flex; align-items: center; gap: 2px; }
.site-header .nav-link, .site-header.solid .nav-link, .site-header .hz-navlink { color: var(--anthracite); font-weight: 550; font-size: 15px; padding: 8px 12px; border-radius: 0; background: none; white-space: nowrap; }
.site-header .nav-link:hover, .site-header.solid .nav-link:hover { color: var(--miel-encre); background: none; }
.site-header .nav-links .btn { margin-left: 8px; }
.site-header.hz-hero:not(.solid) .hz-burger { color: var(--anthracite); }
.site-header .btn-ghost, .site-header.solid .btn-ghost, .site-header:not(.solid) .btn-ghost { background: var(--anthracite); color: var(--anthracite); border: 0; --fond-btn: var(--creme); }
.site-header .btn-ghost:hover { color: var(--anthracite); }

/* ── Premier écran ────────────────────────────────────────────────
   À gauche, la promesse et la recherche ; à droite, la même mission
   vue par chacun des trois métiers, dans l'interface réelle. Les
   onglets tournent seuls et se pilotent au clic. */
.une { position: relative; padding: clamp(36px, 5vw, 72px) 0 clamp(48px, 6vw, 88px); overflow: clip; }
.une-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.une-texte { grid-column: 1 / span 6; display: flex; flex-direction: column; }
.une-metiers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 22px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-texte); }
.une-metiers b { font-weight: 500; color: var(--anthracite); }
.une-metiers i { width: 8px; height: 9px; background: var(--miel); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.une h1 { font-size: clamp(40px, 4.4vw, 66px); line-height: 1.02; margin: 0 0 20px; max-width: 13ch; }
.une-chapo { font-size: clamp(16.5px, 1.25vw, 18.5px); line-height: 1.55; color: var(--body-txt); max-width: 46ch; margin-bottom: 26px; }
.une-zone { max-width: 620px; }
.une-zone .hz-zone { margin: 0; max-width: none; }
.une-zone form { gap: 6px !important; background: var(--blanc); border: 1.5px solid var(--anthracite); padding: 5px; flex-wrap: nowrap !important; }
.une-zone form .input { border: 0; background: transparent; font-size: 16px; min-width: 0 !important; padding-left: 12px; }
.une-zone form .input:focus { box-shadow: none; }
.une-zone form .btn { flex: none; }
.une-zone .hz-zone-res { margin-top: 10px; border: 1px solid var(--lin); border-left: 3px solid var(--miel); background: var(--blanc); border-radius: 0; }
.une-preuves { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 24px 0 0; padding: 16px 0 0; border-top: 1px solid var(--lin); font-size: 14px; color: var(--gris-texte); }
.une-preuves li { display: inline-flex; align-items: center; gap: 8px; }
.une-preuves li::before { content: ''; width: 12px; height: 12px; flex: none; background: var(--vert);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3 4.8 9 10 3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3 4.8 9 10 3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat; }

/* La scène : une fenêtre de l'application, coin coupé, posée sur un
   aplat miel décalé qui la signe sans la charger. */
.scene { grid-column: 7 / span 6; position: relative; }
.scene::before { content: ''; position: absolute; left: 18%; right: -28px; top: 14%; bottom: 28px; background: var(--miel);
  clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%); }
.appli { position: relative; background: var(--blanc); border: 1px solid var(--lin); box-shadow: var(--ombre-produit);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.appli-barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--lin); }
.appli-barre .logo-mini { width: 18px; height: 20px; background: var(--miel); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); flex: none; }
.appli-barre .mono { color: var(--gris-texte); text-transform: uppercase; }
.appli-barre .gauche { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* Onglets des métiers : un sélecteur segmenté, la jauge sous l'onglet
   actif indique la rotation automatique. */
.vues-onglets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--lin); }
.vues-onglets button { position: relative; font-family: var(--f-texte); font-size: 14.5px; font-weight: 650; color: var(--gris-texte); background: none; border: 0; padding: 13px 10px 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: color .15s, background-color .15s; }
.vues-onglets button + button { border-left: 1px solid var(--lin); }
.vues-onglets button:hover { color: var(--anthracite); background: var(--miel-voile); }
.vues-onglets button[aria-selected="true"] { color: var(--anthracite); background: var(--blanc); }
.vues-onglets button::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--miel); transform: scaleX(0); transform-origin: left; }
.vues-onglets button[aria-selected="true"]::after { transform: scaleX(1); }
.vues.auto .vues-onglets button[aria-selected="true"]::after { animation: jauge var(--duree, 5.5s) linear forwards; }
@keyframes jauge { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.vues-onglets button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--anthracite); }
.vues-onglets .ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: square; flex: none; }
.vue { padding: 18px; min-height: 392px; }
.vue[hidden] { display: none; }
.vue.entre { animation: vue-entre .45s cubic-bezier(.22,1,.36,1); }
@keyframes vue-entre { from { opacity: 0; transform: translateY(6px); } }
.scene-legende { margin-top: 44px; position: relative; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--gris-texte); text-align: right; padding-right: 2px; }

/* Éléments d'interface communs aux vues */
.ui-titre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 12px; margin-bottom: 14px; }
.ui-titre .mono { display: block; color: var(--gris-texte); text-transform: uppercase; margin-bottom: 3px; }
.ui-titre b { font-size: 17px; letter-spacing: -0.01em; }
.ui-carte { border: 1px solid var(--lin); border-radius: var(--rayon); padding: 14px; background: var(--blanc); }
.ui-carte + .ui-carte { margin-top: 10px; }
.ui-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ui-sous { font-size: 13.5px; color: var(--gris-texte); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; font-size: 14px; background: var(--miel-pale); color: var(--anthracite); }
.avatar.a2 { background: #E4DED2; color: #1F1D1A; }
.avatar.a3 { background: #1F1D1A; color: #F6F2EA; }
.ui-pers { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ui-pers b { display: block; font-size: 14.5px; }
.interrupteur { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.interrupteur i { width: 30px; height: 18px; border-radius: 9px; background: var(--miel); position: relative; }
.interrupteur i::after { content: ''; position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }

/* Le créneau : la barre horaire entre départ et arrivée. */
.creneau { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin: 12px 0 4px; font-family: var(--f-mono); font-size: 11px; color: var(--gris-texte); text-transform: uppercase; letter-spacing: .03em; }
.creneau-barre { position: relative; height: 18px; border-left: 1.5px solid var(--anthracite); border-right: 1.5px solid var(--anthracite);
  background: repeating-linear-gradient(90deg, var(--lin) 0 1px, transparent 1px 12.5%); }
.creneau-barre::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--anthracite); }
.creneau-barre i { position: absolute; left: 12%; width: 56%; top: 3px; bottom: 3px; background: var(--miel); transform-origin: left; }
.vue.entre .creneau-barre i { animation: creneau .9s cubic-bezier(.65,0,.35,1) .15s both; }
@keyframes creneau { from { transform: scaleX(0); } }

/* Le fil d'une mission : Demande → Acceptée → Réalisée → Notée,
   les quatre étapes réelles de mes-missions.html. */
.fil { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 14px 0 0; padding: 0; }
.fil li { position: relative; padding-top: 18px; font-size: 12.5px; font-weight: 600; color: var(--gris-texte); }
.fil li::before { content: ''; position: absolute; left: 0; top: 4px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--lin-fonce); background: var(--blanc); z-index: 1; }
.fil li::after { content: ''; position: absolute; left: 9px; right: 0; top: 8px; height: 1.5px; background: var(--lin); }
.fil li:last-child::after { display: none; }
.fil li.fait { color: var(--anthracite); }
.fil li.fait::before { background: var(--vert); border-color: var(--vert); }
.fil li.fait::after { background: var(--vert); }

/* Le tampon : la mission est validée. */
.tampon { position: absolute; right: 14px; top: 12px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--miel-encre); border: 2px solid currentColor; padding: 3px 7px; outline: 1px solid currentColor; outline-offset: 2px; transform: rotate(-7deg); }
.vue.entre .tampon { animation: tampon .5s ease .7s both; }
@keyframes tampon { 0% { opacity: 0; transform: rotate(-7deg) scale(1.6); } 60% { opacity: 1; transform: rotate(-7deg) scale(.94); } 100% { opacity: 1; transform: rotate(-7deg) scale(1); } }

.ui-liste { list-style: none; margin: 0; padding: 0; }
.ui-liste li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--lin); font-size: 14px; }
.ui-liste li .mono { color: var(--gris-texte); font-size: 11.5px; min-width: 7.5em; }
.ui-liste li span:nth-child(2) { flex: 1; min-width: 0; }

.ui-offre { border: 1.5px solid var(--anthracite); border-radius: var(--rayon); padding: 14px; position: relative; }
.ui-offre .prix { text-align: right; }
.ui-offre .prix b { display: block; font-size: 20px; letter-spacing: -0.02em; }
.ui-offre .prix span { font-size: 12px; color: var(--gris-texte); }
.ui-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ui-actions span { display: grid; place-items: center; height: 38px; font-weight: 700; font-size: 14px; }
.ui-actions .non { border: 1.5px solid var(--lin-fonce); color: var(--gris-texte); }
.ui-actions .oui { background: var(--miel); color: var(--sur-miel); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.semaine div { border: 1px solid var(--lin); border-radius: 3px; padding: 5px 5px 6px; min-height: 52px; font-family: var(--f-mono); font-size: 10.5px; color: var(--gris-texte); display: flex; flex-direction: column; gap: 4px; }
.semaine div.auj { border-color: var(--anthracite); color: var(--anthracite); }
.semaine i { display: block; height: 6px; border-radius: 2px; background: var(--miel); }
.semaine i.v { background: var(--vert); }
.semaine i.g { background: var(--lin-fonce); }

.ui-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ui-table th { text-align: left; font-family: var(--f-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--gris-texte); padding: 0 0 8px; }
.ui-table td { padding: 10px 8px 10px 0; border-top: 1px solid var(--lin); vertical-align: middle; }
.ui-table td:last-child { text-align: right; padding-right: 0; }
.ui-table td b { font-weight: 650; }
.equipe { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lin); font-size: 13.5px; color: var(--gris-texte); }
.equipe .pile { display: flex; }
.equipe .pile .avatar { width: 28px; height: 28px; font-size: 11.5px; border: 2px solid var(--blanc); }
.equipe .pile .avatar + .avatar { margin-left: -8px; }
.ui-partage { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 10px 12px; background: var(--creme); font-size: 13.5px; }
.ui-partage .mono { color: var(--miel-encre); text-transform: uppercase; font-size: 11px; }

/* ── Plateformes : une ligne typographique entre deux filets ── */
.plateformes { border-top: 1px solid var(--lin); border-bottom: 1px solid var(--lin); background: var(--blanc); }
.plateformes .cadre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; padding-top: 20px; padding-bottom: 20px; }
.plateformes .mono { color: var(--gris-texte); text-transform: uppercase; }
.plateformes ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px clamp(20px, 4vw, 56px); margin: 0; padding: 0; }
.plateformes li { font-family: var(--f-titre); font-weight: 600; font-size: clamp(19px, 2vw, 24px); letter-spacing: -0.02em; color: var(--anthracite); opacity: .78; }

/* ── Sections ─────────────────────────────────────────────────── */
.sec { padding: clamp(64px, 8vw, 116px) 0; }
.sec-tete { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; margin-bottom: clamp(36px, 4.5vw, 60px); }
.sec-tete > div { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: 16px; }
.sec-tete > p { grid-column: 9 / span 4; color: var(--body-txt); font-size: 17px; }
.sec h2 { font-size: clamp(32px, 3.8vw, 54px); max-width: 17ch; }
.sec h2 .surligne { white-space: nowrap; }

/* Comment ça marche : un rail horizontal, des jalons hexagonaux (le
   logo), un trait miel qui se trace quand la section entre à l'écran. */
.rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); position: relative; }
.rail::before, .rail::after { content: ''; position: absolute; left: 0; right: 0; top: 24px; height: 1.5px; background: var(--lin); }
.rail::after { background: var(--miel); transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.65,0,.35,1) .2s; }
.rail.in::after { transform: scaleX(1); }
.rail li { position: relative; z-index: 1; padding-right: 12px; }
.rail .jalon { width: 44px; height: 50px; display: grid; place-items: center; margin-bottom: 20px; background: var(--anthracite); color: var(--creme);
  font-family: var(--f-titre); font-weight: 600; font-size: 20px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.rail li:first-child .jalon { background: var(--miel); color: var(--sur-miel); }
.rail h3 { font-size: 19px; margin-bottom: 6px; }
.rail p { color: var(--body-txt); font-size: 16px; max-width: 32ch; }

.essai { margin-top: clamp(40px, 5vw, 60px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.essai > [data-hz-apercu-ical] { grid-column: 1 / span 8; }
.essai > .essai-cta { grid-column: 10 / span 3; align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.essai-cta .mono { color: var(--gris-texte); text-transform: uppercase; }
/* L'aperçu iCal (apercu-ical.js) devient une feuille posée. */
.hz-ap { margin-top: 0 !important; border-radius: 0 !important; border: 1px solid var(--lin) !important; border-top: 3px solid var(--miel) !important; background: var(--creme) !important; padding: 24px !important; }
.hz-ap h3 { font-family: var(--f-titre) !important; font-weight: 600; letter-spacing: -0.02em; font-size: 24px !important; margin-bottom: 6px !important; }
.hz-ap .sub { font-size: 15px !important; color: var(--gris-texte) !important; }
.hz-ap .input { background: var(--blanc); }
.hz-ap-res .big, .hz-zone-res .big { font-family: var(--f-titre) !important; font-weight: 600; letter-spacing: -0.015em; }
.hz-ap-res li .n, .hz-zone-res .big b { color: var(--miel-encre) !important; }
.hz-zone-res, .hz-att { border-radius: 0 !important; }
.hz-att { background: var(--miel-voile) !important; border: 1px dashed var(--miel-profond) !important; }

/* ── Le produit : trouver, choisir, suivre ── */
.produit { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.produit-recherche { grid-column: 1 / span 7; }
.produit-cote { grid-column: 8 / span 5; display: grid; gap: 24px; }
.panneau { display: flex; flex-direction: column; gap: 12px; }
.panneau-leg { display: flex; align-items: baseline; gap: 10px; }
.panneau-leg .mono { color: var(--miel-encre); }
.panneau-leg b { font-size: 16px; }
.panneau-leg span:last-child { color: var(--gris-texte); font-size: 14.5px; }
.fenetre { background: var(--blanc); border: 1px solid var(--lin); box-shadow: var(--ombre-produit); padding: 18px; }
.res-tete { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--lin); }
.res-tete b { display: block; font-family: var(--f-titre); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
.res-tete span { font-size: 13.5px; color: var(--gris-texte); }
.presta { border: 1px solid var(--lin); border-radius: var(--rayon); padding: 14px; }
.presta + .presta { margin-top: 10px; }
.presta.certifie { border-color: var(--miel); box-shadow: inset 3px 0 0 var(--miel); }
.presta-haut { display: flex; align-items: center; gap: 12px; }
.presta-haut .info { flex: 1; min-width: 0; }
.presta-haut .info b { display: block; font-size: 15.5px; }
.presta-haut .info span { font-size: 13px; color: var(--gris-texte); }
.presta-haut .prix { text-align: right; }
.presta-haut .prix b { display: block; font-size: 17px; }
.presta-haut .prix span { font-size: 12px; color: var(--gris-texte); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.badge-ui { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 2px; background: var(--creme); color: var(--body-txt); }
.badge-ui.miel { background: var(--miel-pale); color: var(--sur-miel); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge-ui.miel { color: var(--miel-clair); } }
:root[data-theme="dark"] .badge-ui.miel { color: var(--miel-clair); }
.badge-ui.ok { background: var(--vert-voile); color: var(--vert); }
.presta-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.presta-act span { font-size: 13.5px; font-weight: 700; padding: 8px 12px; }
.presta-act .voir { border: 1.5px solid var(--lin-fonce); }
.presta-act .demander { background: var(--anthracite); color: var(--creme); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%); }
.profil-tete { display: flex; align-items: center; gap: 14px; }
.profil-tete .avatar { width: 54px; height: 54px; font-size: 20px; }
.profil-tete b { display: block; font-size: 18px; letter-spacing: -0.01em; }
.profil-tete span { font-size: 13.5px; color: var(--gris-texte); }
.profil-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; border-top: 1px solid var(--lin); }
.profil-chiffres div { padding: 10px 0 0; }
.profil-chiffres div + div { border-left: 1px solid var(--lin); padding-left: 12px; }
.profil-chiffres b { display: block; font-size: 17px; }
.profil-chiffres span { font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; color: var(--gris-texte); letter-spacing: .04em; }
.produit-note { margin-top: 18px; font-family: var(--f-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--gris-texte); }

/* ── Rapport : bande anthracite, la rupture forte de la page. Le
   rapport est dessiné comme le vrai document : pièces illustrées,
   heures, points de conduite, signature. Son titre est le seul serif
   de la page : c'est un document papier. ── */
.bande { background: #1F1D1A; color: #F1EBDF; --fond-btn: #1F1D1A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bande { background: #26231F; } }
:root[data-theme="dark"] .bande { background: #26231F; }
.bande h2 { color: inherit; }
.bande p { color: #B4AC9E; }
.bande .hz-intertitre, :root .bande .hz-intertitre, :root:not([data-theme="light"]) .bande .hz-intertitre { background: var(--miel); color: #1F1D1A; }
.bande .hz-intertitre::before { background: #1F1D1A; }
.rapport-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.rapport-grille .sec-texte { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 20px; }
.rapport-grille .sec-texte h2 { max-width: 12ch; }
.rapport-grille .sec-texte p { font-size: 17px; max-width: 42ch; }
.rapport { grid-column: 7 / span 6; background: #FBF8F1; color: #1F1D1A; padding: clamp(18px, 2.4vw, 30px);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); transform: rotate(-1.2deg); }
.rapport-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-bottom: 14px; border-bottom: 1.5px solid #1F1D1A; }
.rapport-tete .mono { display: block; color: #5C564C; text-transform: uppercase; margin-bottom: 4px; }
.rapport-tete b { font-family: var(--f-doc); font-weight: 400; font-size: clamp(20px, 2vw, 26px); }
.signature { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: #7A4E0E; }
.signature svg { width: 82px; height: 30px; stroke: #1F1D1A; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.signature .mono { font-size: 10.5px; text-transform: uppercase; }
.pieces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px 0; }
.pieces figure { margin: 0; }
.pieces svg { display: block; width: 100%; height: auto; background: #F3D9A8; }
.pieces figcaption { display: flex; justify-content: space-between; gap: 6px; padding-top: 7px; font-size: 13px; font-weight: 600; }
.pieces figcaption .mono { font-size: 11px; color: #5C564C; font-weight: 500; }
.conduite { list-style: none; margin: 0; padding: 0; }
.conduite li { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; border-top: 1px solid #E4DED2; font-size: 15px; }
.conduite li span:first-child { color: #5C564C; }
.conduite li i { flex: 1; border-bottom: 1.5px dotted #B4AC9E; transform: translateY(-4px); }
.conduite li b { font-weight: 700; }

/* ── Chiffres réels (masqués sans données) ── */
.stats .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; border-top: 1.5px solid var(--anthracite); }
.stats .stat { text-align: left; padding: 22px 20px 6px 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.stats .stat + .stat { border-left: 1px solid var(--lin); padding-left: 20px; }
.stats .stat .num { font-family: var(--f-titre); font-weight: 600; letter-spacing: -0.03em; font-size: clamp(38px, 4.4vw, 58px); color: var(--anthracite); line-height: 1; }
.stats .stat .lb { font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris-texte); margin-top: 10px; font-weight: 500; }

/* ── Deux colonnes séparées d'un filet, sans cartes ── */
.duo { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--lin); }
.duo > article { padding: clamp(28px, 3.4vw, 44px) clamp(0px, 3vw, 44px) 8px 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.duo > article + article { border-left: 1px solid var(--lin); padding-left: clamp(20px, 3vw, 44px); padding-right: 0; }
.duo h3 { font-family: var(--f-titre); font-weight: 600; font-size: clamp(23px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -0.03em; max-width: 20ch; }
.duo p { color: var(--body-txt); max-width: 46ch; }

/* ── Pour qui : un index plutôt que trois cartes. Une ligne par métier,
   le nom en grand, l'action alignée à droite. Le propriétaire, entrée
   principale, est la ligne miel. ── */
.metiers { border-top: 1.5px solid var(--anthracite); }
.metier { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: 16px clamp(20px, 3vw, 40px); align-items: center;
  padding: clamp(24px, 3vw, 34px) 0; border-bottom: 1px solid var(--lin); transition: background-color .2s ease; }
.metier h3 { font-family: var(--f-titre); font-weight: 600; font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -0.035em; line-height: 1; }
.metier p { color: var(--body-txt); font-size: 17px; max-width: 40ch; }
.metier .actions { justify-self: end; }
.metier-zone { grid-column: 2 / -1; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding-top: 4px; }
.metier-zone .hz-intertitre { background: none; padding-left: 0; clip-path: none; color: var(--gris-texte); }
.metier-zone .hz-intertitre::before { display: none; }
.metier-zone > div { width: 100%; max-width: 560px; }
.metier-zone .hz-zone { margin: 0; }
.metier { --fond-btn: var(--creme); }
.metier:not(.principal):hover { background: linear-gradient(90deg, var(--miel-voile), transparent 70%); }
.metier.principal { background: var(--miel); color: var(--sur-miel); border-bottom-color: var(--miel); margin: 0 calc(var(--gouttiere) * -1); padding-left: var(--gouttiere); padding-right: var(--gouttiere); }
.metier.principal h3 { color: var(--sur-miel); }
.metier.principal p { color: var(--sur-miel); }
.metier.principal .btn-white, .metier.principal .btn-dark { background: #1F1D1A; color: #FBF8F1; }
.metier.principal .btn-white:hover { color: var(--miel-clair); }

/* ── Pied de page anthracite ── */
.site-footer { background: #1F1D1A; color: #E9E3D7; border-top: 0; padding: clamp(48px, 6vw, 72px) 0 28px; }
.site-footer .wrap { max-width: var(--largeur); padding: 0 var(--gouttiere); align-items: flex-start; }
.site-footer .logo { color: #F6F2EA; }
.site-footer .logo .hz-logo-svg { height: 30px; }
.site-footer .muted { color: #B4AC9E; font-size: 14px; }
.footer-villes { width: 100%; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 24px !important; margin: 26px 0 8px !important; padding-top: 26px; border-top: 1px solid #3A352E; font-size: 14.5px !important; }
.footer-villes a { opacity: 1 !important; color: #E9E3D7; }
.footer-villes a:hover { color: #F1B65A; text-decoration: none !important; }
.footer-legal { border-top-color: #3A352E !important; }
.footer-legal a, .footer-legal .copy { color: #B4AC9E !important; }
.footer-legal a:hover { color: #F1B65A !important; }
.footer-legal .sep { color: #5C564C !important; }

/* Le tiroir mobile (nav.js) gardait son ombre hors écran : un voile
   gris bordait la page à droite. L'ombre n'existe que tiroir ouvert. */
.hz-navgroup.hz-drawer { box-shadow: none !important; }
body.hz-nav-open .hz-navgroup.hz-drawer { box-shadow: -26px 0 64px rgba(31,29,26,.22) !important; }

/* ── Révélation au défilement : courte et sobre ── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   MOBILE ET TABLETTE
   ============================================================ */
@media (max-width: 1080px) {
  .une-texte { grid-column: 1 / -1; }
  .une h1 { max-width: 16ch; }
  .scene { grid-column: 1 / -1; margin-top: 48px; max-width: 680px; }
  .sec-tete > div { grid-column: 1 / -1; }
  .sec-tete > p { grid-column: 1 / -1; margin-top: 18px; max-width: 52ch; }
  .produit-recherche, .produit-cote { grid-column: 1 / -1; }
  .produit-cote { grid-template-columns: 1fr 1fr; }
  .rapport-grille .sec-texte { grid-column: 1 / -1; }
  .rapport { grid-column: 1 / -1; margin-top: 40px; max-width: 640px; }
  .essai > [data-hz-apercu-ical] { grid-column: 1 / -1; }
  .essai > .essai-cta { grid-column: 1 / -1; margin-top: 24px; }
  .site-header .nav-link.hide-sm { display: none; }
  .metier { grid-template-columns: minmax(0, 1fr) auto; }
  .metier h3 { grid-column: 1 / -1; }
  .metier-zone { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .site-header .wrap { height: 60px; }
  .logo .hz-logo-svg { height: 23px; }
  .une { padding-top: 28px; }
  .une h1 { font-size: clamp(36px, 10vw, 50px); }
  .une-zone form { flex-direction: column; flex-wrap: wrap !important; gap: 4px !important; padding: 4px; }
  .une-zone form .input { padding: 12px; }
  .une-zone form .btn { width: 100%; }
    .scene { margin-top: 40px; }
  .scene::before { left: 12%; right: -14px; top: 10%; bottom: 30px; }
  .scene-legende { margin-top: 30px; text-align: left; }
  .vues-onglets button { font-size: 13px; padding: 12px 4px 13px; gap: 6px; }
  .vues-onglets .ic { display: none; }
  .vue { padding: 14px; min-height: 0; }
  .appli-barre > .mono { display: none; }
  .ui-liste li .mono { min-width: 0; }
  .fil li { font-size: 11px; }
  .ui-table th:nth-child(2), .ui-table td:nth-child(2) { display: none; }
  .produit-cote { grid-template-columns: 1fr; }
  .presta-haut .prix { display: none; }
  .plateformes .cadre { justify-content: flex-start; }
  .rail { grid-template-columns: 1fr; gap: 30px; padding-left: 64px; }
  .rail::before, .rail::after { left: 21px; right: auto; top: 0; bottom: 0; width: 1.5px; height: auto; }
  .rail::after { transform: scaleY(0); transform-origin: top; }
  .rail.in::after { transform: scaleY(1); }
  .rail li { padding-right: 0; }
  .rail .jalon { position: absolute; left: -64px; top: -6px; margin: 0; }
  .duo { grid-template-columns: 1fr; }
  .duo > article + article { border-left: 0; border-top: 1px solid var(--lin); padding-left: 0; }
  .metier { grid-template-columns: 1fr; gap: 12px; }
  .metier .actions { justify-self: start; }
  .pieces { gap: 6px; }
  .pieces figcaption { flex-direction: column; gap: 0; }
  .rapport { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js-anim .surligne { background-size: 100% .26em; transition: none; }
  .rail::after { transform: none !important; transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .vue.entre, .vue.entre .creneau-barre i, .vue.entre .tampon { animation: none !important; }
}

/* ── Compléments : boutons-liens, recherche du premier écran ── */
.une-zone form .btn { --h: 52px; --fleche: 48px; --c: 11px; --px: 18px; font-size: 15.5px; }

/* ── Proposition 2.1 ──────────────────────────────────────────────── */

/* Gratuit, sans commission : deux faits, posés sous le titre pour être
   lus avant tout le reste, y compris sur mobile. */
.une-gratuit { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; }
.une-gratuit li { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--sur-miel);
  background: var(--miel-pale); padding: 7px 14px 7px 12px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.une-gratuit li::before { content: ''; width: 13px; height: 13px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3 4.8 9 10 3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3 4.8 9 10 3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .une-gratuit li { background: var(--miel); color: #1F1D1A; } }
:root[data-theme="dark"] .une-gratuit li { background: var(--miel); color: #1F1D1A; }

/* Trois entrées nommées : le propriétaire cherche, le prestataire et
   la conciergerie s'inscrivent. Chacun lit son métier avant l'action. */
.entrees { display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
.entree-tete { display: flex; align-items: baseline; gap: 10px; font-weight: 650; font-size: 15px; margin: 0; }
.entree-tete .mono, .entree .mono { text-transform: uppercase; color: var(--miel-encre); font-size: 11.5px; letter-spacing: .06em; }
.entrees-autres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.entree { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; cursor: pointer;
  font: inherit; color: var(--anthracite); background: var(--blanc); border: 1.5px solid var(--lin); border-radius: 0; padding: 12px 40px 13px 14px;
  transition: border-color .15s, background-color .15s; }
.entree b { font-size: 15px; font-weight: 700; line-height: 1.3; }
.entree::after { content: '→'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-family: var(--f-mono); transition: transform .2s ease; }
.entree:hover { border-color: var(--anthracite); background: var(--miel-voile); }
.entree:hover::after { transform: translate(4px, -50%); }
.entree:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--anthracite); }

.demo-bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -12px 0 28px; font-size: 14.5px; color: var(--gris-texte); }

/* Démonstration vidéo : la vidéo d'arrivée, cadrée, lancée au clic. */
.demo-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.demo-texte { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 18px; }
.demo-texte h2 { max-width: 13ch; }
.demo-points { list-style: none; margin: 8px 0 0; padding: 0; }
.demo-points li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 12px; padding: 13px 0; border-top: 1px solid var(--lin); font-size: 16px; color: var(--body-txt); }
.demo-points li .mono { text-transform: uppercase; color: var(--miel-encre); padding-top: 3px; }
.demo-cadre { grid-column: 7 / span 6; margin: 0; position: relative; }
.demo-cadre video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--lin);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.demo-cadre figcaption { margin-top: 12px; color: var(--gris-texte); text-transform: uppercase; }
.demo-lecture { position: absolute; left: 20px; bottom: 54px; display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 15px; color: #1F1D1A; background: #FBF8F1; border: 0; padding: 8px 18px 8px 8px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); transition: background-color .15s; }
.demo-lecture:hover { background: #F3D9A8; }
.demo-lecture:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #1F1D1A; }
.demo-lecture[hidden] { display: none; }
.hexa-lecture { width: 38px; height: 42px; background: var(--miel); position: relative; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.hexa-lecture::after { content: ''; position: absolute; left: 15px; top: 14px; border-left: 11px solid #1F1D1A; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }

@media (max-width: 1080px) {
  .demo-texte, .demo-cadre { grid-column: 1 / -1; }
  .demo-cadre { margin-top: 32px; }
}
@media (max-width: 760px) {
  .une-gratuit { margin-bottom: 18px; }
  .une-metiers { font-size: 10.5px; letter-spacing: .03em; gap: 6px 7px; flex-wrap: nowrap; white-space: nowrap; }
  .appli-barre .gauche .mono { display: none; }
  .une-gratuit li { font-size: 14.5px; }
  .entrees-autres { grid-template-columns: 1fr; }
  .une-chapo { margin-bottom: 22px; }
  .demo-lecture { left: 12px; bottom: 46px; }
  .demo-points li { grid-template-columns: 4.6rem minmax(0, 1fr); }
}
.ui-offre .prix { flex: none; }
.ui-offre .prix span { white-space: nowrap; }

/* ── Proposition 2.2 : la recherche remonte sur mobile ──────────────
   Ordre du document (mobile) : titre → gratuit / sans commission →
   recherche → précision sur ce qui est payant → phrase d'explication →
   entrées prestataire et conciergerie. Sur grand écran, la place le
   permet : la phrase repasse au-dessus de la recherche. */
.entree-proprio { display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
.une-precision { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--gris-texte); max-width: 58ch; }
.une-texte > .entrees-autres { margin-top: 18px; max-width: 620px; }
.une-texte > .une-chapo { margin: 22px 0 0; }
@media (min-width: 761px) {
  .une-texte > .une-chapo { order: 1; margin: 0 0 24px; }
  .une-texte > .entree-proprio { order: 2; }
  .une-texte > .entrees-autres { order: 3; }
  .une-texte > .une-preuves { order: 4; }
}
@media (max-width: 760px) {
  .une-texte > .une-chapo { font-size: 16.5px; }
}