/* HangarOS · la visite du Pavillon (maquette)
   Palette : Chaux F3F1ED, Béton CFCAC2, Ombre 4E5963, Encre 1D2226 ; marque HangarOS : bleu nuit 182D4C
   (le monogramme), sa version vive 2A4D80 pour les halos, sa version claire A8C0E4 sur fond sombre.
   Typo : Schibsted Grotesk (titres et texte), Geist Mono (heures, relevés). */
:root {
  --chaux: #f3f1ed;
  --beton: #cfcac2;
  --ombre: #4e5963;
  --marque: #182d4c;
  --marque-vif: #2a4d80;
  --marque-clair: #a8c0e4;
  --encre: #1d2226;
  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --affiche: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --marge: clamp(16px, 3.4vw, 48px);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--chaux);
  color: var(--encre);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
::selection { background: var(--marque-clair); color: var(--marque); }

/* ----------------------------------------------------------------- barre du haut */
.barre {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--marge);
  color: var(--encre);
  transition: color .6s ease;
}
.barre.sombre { color: var(--chaux); }
.marque {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 19px/1 var(--sans); letter-spacing: -.01em; text-decoration: none; color: var(--marque);
  transition: opacity .5s ease, color .6s ease;
}
.marque img { width: 30px; height: auto; display: block; }
.marque .clair { display: none; }
.barre.sombre .marque { color: var(--chaux); }
.barre.sombre .marque .fonce { display: none; }
.barre.sombre .marque .clair { display: block; }
.demo {
  font: 500 14px/1 var(--sans); text-decoration: none; white-space: nowrap;
  padding: 11px 18px; border-radius: 999px;
  background: var(--marque); color: var(--chaux);
  transition: background .2s ease, color .6s ease;
}
.demo:hover { background: var(--marque-vif); }
.barre.sombre .demo { background: var(--chaux); color: var(--marque); }
.demo-court { display: none; }
.barre.sombre .demo:hover { background: var(--marque-clair); color: var(--marque); }

/* ----------------------------------------------------------------- le menu
   Un lien par cible (config/showcase.php › cibles). Sur l'accueil, le menu flotte sur le hangar dans une pastille de
   verre ; au-dessus du sombre, il passe au verre fumé. */
.barre-gauche, .barre-droite { display: flex; align-items: center; gap: 18px; }
.menu-racine { display: flex; align-items: center; gap: 2px; margin: 0; padding: 4px; list-style: none; border-radius: 999px; }
.barre-accueil .menu-racine {
  background: rgba(246, 244, 240, .82); border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 8px 24px -14px rgba(29, 34, 38, .35); transition: background .6s ease, border-color .6s ease;
}
.barre.sombre.barre-accueil .menu-racine { background: rgba(29, 34, 38, .62); border-color: rgba(255, 255, 255, .12); }
.page-accueil .barre { transition: color .6s ease, background .4s ease, box-shadow .4s ease; }
.page-accueil .barre.defile {
  background: rgba(243, 241, 237, .84); box-shadow: 0 1px 0 rgba(78, 89, 99, .1);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}
.page-accueil .barre.defile.sombre { background: rgba(11, 20, 36, .5); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.menu-lien {
  display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px;
  font: 500 14px/1 var(--sans); color: var(--marque); text-decoration: none; transition: background .2s ease, color .6s ease;
}
.menu-lien:hover { background: rgba(24, 45, 76, .08); }
.menu-lien[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--marque-vif); }
.barre.sombre .menu-lien { color: var(--chaux); }
.barre.sombre .menu-lien:hover { background: rgba(255, 255, 255, .1); }
.menu-lien:focus-visible { outline: 2px solid var(--marque-vif); outline-offset: 2px; }
.menu-chapeau { margin: 0 0 14px; font: 400 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ombre); }

.menu-mobile { display: none; }
.menu-mobile summary {
  list-style: none; cursor: pointer; font: 500 14px/1 var(--sans); color: var(--marque);
  padding: 10px 12px; border: 1px solid rgba(24, 45, 76, .25); border-radius: 8px; background: rgba(243, 241, 237, .6);
}
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile .fermer, .menu-mobile[open] .ouvrir { display: none; }
.menu-mobile[open] .fermer { display: inline; }
.barre.sombre .menu-mobile summary { color: var(--chaux); border-color: rgba(255, 255, 255, .3); background: rgba(29, 34, 38, .4); }
.menu-mobile-panneau {
  position: fixed; inset: 0; z-index: -1; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(84px + env(safe-area-inset-top)) var(--marge) calc(32px + env(safe-area-inset-bottom));
  background: var(--chaux);
}
.menu-mobile-cible { padding: 4px 0 22px; margin-bottom: 18px; border-bottom: 1px solid rgba(78, 89, 99, .14); }
.menu-mobile-tete { display: block; text-decoration: none; color: inherit; }
.menu-mobile-tete .menu-chapeau { display: block; margin-bottom: 8px; }
.menu-mobile-tete b { display: block; font: 500 22px/1.15 var(--sans); letter-spacing: -.025em; color: var(--marque); }
.menu-mobile-tete[aria-current="page"] b { color: var(--marque-vif); }
.menu-mobile-visite { display: inline-block; font: 500 15px/1.3 var(--sans); color: var(--marque); text-underline-offset: 4px; }
/* menu ouvert : le bandeau passe en clair par-dessus, la page ne défile plus */
html.menu-ouvert, html.menu-ouvert body { overflow: hidden; }
.barre:has(.menu-mobile[open]) { color: var(--encre); background: var(--chaux); -webkit-backdrop-filter: none; backdrop-filter: none; }   /* sinon le flou enferme le panneau fixe dans le bandeau */
.barre:has(.menu-mobile[open]) .marque { color: var(--marque); opacity: 1; }
.barre:has(.menu-mobile[open]) .marque .fonce { display: block; }
.barre:has(.menu-mobile[open]) .marque .clair { display: none; }
.barre:has(.menu-mobile[open]) .menu-mobile summary { color: var(--marque); border-color: rgba(24, 45, 76, .25); background: none; }


/* ----------------------------------------------------------------- l'accueil
   Direction « Heure bleue » : le hangar en fin d'après-midi, en plein écran, la porte ouverte sur l'aérodrome ; à
   l'arrivée, l'ombre se retire depuis la porte (la lumière entre). Le titre sur la charpente, la démo sur le sol.
   Puis les quatre métiers sur fond clair, et la démo sur les reflets. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.accroche {
  position: relative; isolation: isolate; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden;
  color: #fff; background: #0a1222;
}
.accroche-photo {
  position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%;   /* le soleil dans la porte reste dans le cadre */
  animation: accroche-respire 24s ease-out both;
}
@keyframes accroche-respire { from { transform: scale(1.03); } }
.accroche::after {                         /* le bandeau et le bas se lisent sur la photo ; le hangar reste net au milieu */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 13, 24, .62) 0%, rgba(8, 13, 24, .34) 26%, rgba(8, 13, 24, .1) 40%, rgba(8, 13, 24, 0) 50%, rgba(8, 13, 24, 0) 72%, rgba(8, 13, 24, .6) 100%),
    radial-gradient(ellipse 50% 30% at 52% 22%, rgba(8, 13, 24, .3), transparent 72%);   /* le titre sur la charpente : le coucher de soleil reste vif dans la porte */
}
/* l'ombre qui se retire : un voile percé d'un trou ovale centré sur la porte ouverte, qui s'agrandit */
@property --trou { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.accroche-nuit {
  position: absolute; inset: 0; z-index: -2; pointer-events: none; background: #040812;
  -webkit-mask: radial-gradient(ellipse 62% 52% at 22% 34%, transparent calc(var(--trou) - 55%), #000 var(--trou));
  mask: radial-gradient(ellipse 62% 52% at 22% 34%, transparent calc(var(--trou) - 55%), #000 var(--trou));
  animation: hangar-allume 1.8s cubic-bezier(.23, 1, .32, 1) forwards;
}
@keyframes hangar-allume { to { --trou: 260%; } }
.accroche-titre { position: absolute; left: 0; right: 0; top: max(13.5svh, 96px); padding: 0 var(--marge); text-align: center; }
.accroche h1 {
  margin: 0 auto; max-width: none; font: 400 clamp(38px, 4.9vw, 84px)/1.02 var(--affiche); letter-spacing: -.015em;
  text-wrap: balance; text-shadow: 0 1px 2px rgba(6, 11, 22, .35), 0 2px 40px rgba(6, 11, 22, .5);   /* les déliés du Bodoni devant les lampes */
  animation: monte .9s cubic-bezier(.23, 1, .32, 1) .1s both;
}
.accroche-bas {
  position: absolute; left: 0; right: 0; bottom: max(40px, 5svh); display: grid; justify-items: center; gap: 24px;
  padding: 0 var(--marge); text-align: center; animation: monte .9s cubic-bezier(.23, 1, .32, 1) .3s both;
}
.accroche-sous { margin: 20px auto 0; max-width: 46ch; animation: monte .9s cubic-bezier(.23, 1, .32, 1) .2s both; font: 500 clamp(15px, 1.1vw, 17px)/1.45 var(--sans); letter-spacing: .01em; color: rgba(255, 255, 255, .9); text-wrap: balance; text-shadow: 0 1px 18px rgba(6, 11, 22, .5); }
.accroche-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 30px; }
.accroche-journee {
  font: 500 15px/1 var(--sans); color: #fff; text-decoration: none; padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, .45); transition: border-color .3s ease;
}
.accroche-journee i { font-style: normal; display: inline-block; transition: transform .3s ease; }
.accroche-journee:hover { border-bottom-color: #fff; }
.accroche-journee:hover i { transform: translateX(3px); }
.accroche-journee:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 2px; }
/* le titre en Bodoni romain, la voix du carnet de route (la couverture du carnet dans l'application) : deux lignes
   courtes, la seconde dans le bleu clair de la marque */
.accroche h1 span, .accroche h1 em { display: block; }
.accroche h1 em { font-style: normal; color: var(--marque-clair); }
@keyframes monte { from { opacity: 0; transform: translateY(12px); } }
/* tout attend la photo décodée (accueil.js pose .pret) ; revenu sur l'accueil dans la même session, rien ne rejoue */
html.js .accroche:not(.pret) :is(.accroche-nuit, .accroche-photo, h1, .accroche-sous, .accroche-bas) { animation-play-state: paused; }
html.accueil-vu .accroche :is(.accroche-photo, h1, .accroche-sous, .accroche-bas) { animation: none; }
html.accueil-vu .accroche-nuit { display: none; }
@media (prefers-reduced-motion: reduce) {
  .accroche-photo, .accroche h1, .accroche-sous, .accroche-bas { animation: none; }
  .accroche-nuit { display: none; }
}


/* les métiers : la ligne survolée (ou la suivante, toutes les six secondes) montre son lieu et son écran */
.metiers { max-width: 1440px; margin: 0 auto; padding: clamp(80px, 15vh, 160px) var(--marge) clamp(80px, 14vh, 150px); }
.metiers-tete { margin-bottom: clamp(28px, 5vh, 48px); }
.metiers-chapeau, .metier-chapeau { margin: 0 0 16px; font: 400 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ombre); }
.metiers-tete h2 { margin: 0; max-width: 14ch; font: 400 clamp(36px, 3.7vw, 58px)/1.04 var(--affiche); letter-spacing: -.015em; color: var(--marque); text-wrap: balance; }
.metiers-corps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.metiers-liste { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(78, 89, 99, .16); }
.metier {
  position: relative; display: grid; grid-template-rows: auto auto 0fr; padding: 24px 0 24px;
  border-top: 1px solid rgba(78, 89, 99, .16); text-decoration: none; color: inherit;
  transition: grid-template-rows .6s cubic-bezier(.2, .8, .2, 1), padding .6s cubic-bezier(.2, .8, .2, 1);
}
.metier-chapeau { font: 500 14px/1.3 var(--sans); letter-spacing: 0; text-transform: none; }   /* le public, en clair : pas une étiquette technique */
.metier .metier-chapeau { margin-bottom: 8px; }
.metier b { font: 500 clamp(21px, 1.75vw, 27px)/1.18 var(--sans); letter-spacing: -.025em; color: rgba(24, 45, 76, .68); transition: color .3s ease; text-wrap: balance; }
.metier-repli { grid-row: 3; min-height: 0; overflow: hidden; }
.metier-repli > span { display: block; }
.metier-repli .metier-phrase { display: block; margin-top: 12px; max-width: 46ch; font-size: 16px; line-height: 1.55; color: #4a545d; opacity: 1; }
.metier-repli .metier-suite { display: inline-flex; gap: 8px; margin-top: 14px; font: 500 14px/1 var(--sans); color: var(--marque); opacity: 1; }
.metier-repli .metier-suite i { font-style: normal; transition: transform .3s ease; }
.metier.actif { grid-template-rows: auto auto 1fr; padding-bottom: 28px; }
.metier.actif b { color: var(--marque); }
.metier:not(.actif) .metier-repli { opacity: 0; transition: opacity .25s ease; }
.metier.actif .metier-repli { opacity: 1; transition: opacity .5s ease .15s; }
.metier:hover .metier-suite i { transform: translateX(3px); }
.metier:focus-visible { outline: 2px solid var(--marque-vif); outline-offset: 4px; border-radius: 4px; }
.metier-temps { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--marque); transform: scaleX(0); transform-origin: left; }
.metiers.defile .metier.actif .metier-temps { animation: temps 6s linear forwards; }
@keyframes temps { to { transform: scaleX(1); } }

.metiers-scene { position: relative; height: clamp(520px, 78svh, 720px); }
.scene-metier {
  position: absolute; inset: 0; isolation: isolate; display: block; overflow: hidden; border-radius: 28px;
  text-decoration: none; color: #fff; background: #0d1626; box-shadow: 0 50px 90px -60px rgba(15, 23, 42, .7);
  opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s;
}
.scene-metier.actif { opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; }
.scene-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6s cubic-bezier(.2, .6, .2, 1); }
.scene-metier.actif .scene-photo { transform: scale(1); }
[data-scene="camo"] .scene-photo { object-position: 68% 50%; }
[data-scene="ateliers"] .scene-photo { object-position: 40% 50%; }
.scene-metier::after {                       /* l'appareil se pose sur une ombre, pas sur la photo crue */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgba(8, 13, 24, .45) 0%, rgba(8, 13, 24, 0) 45%);
}
.scene-metier .scene-ecran { position: absolute; transform: translateY(40px); opacity: 0; transition: transform .2s ease, opacity .2s ease, translate .35s cubic-bezier(.23, 1, .32, 1); }
.scene-metier.actif .scene-ecran { transform: none; opacity: 1; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1) .15s, opacity .6s ease .15s, translate .35s cubic-bezier(.23, 1, .32, 1); }
.scene-ipad .scene-ecran { left: 12%; bottom: -14%; width: 76%; }
.scene-iphone .scene-ecran { left: calc(50% - var(--l) / 2); bottom: -18%; --l: clamp(180px, 15vw, 236px); }
@media (hover: hover) and (pointer: fine) { .scene-metier.actif:hover .scene-ecran { translate: 0 -8px; } }   /* sa propre transition : pas l'entrée de 1,1 s */
@media (prefers-reduced-motion: reduce) {
  .scene-photo, .scene-metier.actif .scene-photo { transform: none; transition: none; }
  .scene-metier .scene-ecran, .scene-metier.actif .scene-ecran { transform: none; translate: none; }
}
.scene-metier:focus-visible { outline: 2px solid var(--marque-vif); outline-offset: 4px; }
.scene-legende { display: none; }

/* ----------------------------------------------------------------- le fil
   Une visite 50 h du F-GDEM, de l'échéance à la facture : quatre temps, chacun avec son vrai morceau d'écran (à sa
   taille réelle, --w), reliés par un trait. À l'arrivée, le trait se tire d'un jalon à l'autre, une seule fois. */
.fil { max-width: 1240px; margin: 0 auto; padding: clamp(16px, 3vh, 40px) var(--marge) clamp(96px, 16vh, 168px); }
.fil-tete { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 20px clamp(32px, 5vw, 80px); align-items: end; padding-bottom: clamp(32px, 5vh, 52px); }
.fil-tete h2 { margin: 0; max-width: 15ch; font: 400 clamp(32px, 3.1vw, 48px)/1.04 var(--affiche); letter-spacing: -.015em; color: var(--marque); text-wrap: balance; }
.fil-tete p { margin: 0; max-width: 46ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; color: #4a545d; text-wrap: pretty; }
.fil-tete p a { font-weight: 500; color: var(--marque); text-decoration: none; white-space: nowrap; }
.fil-tete p a i { font-style: normal; display: inline-block; transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) { .fil-tete p a:hover i { transform: translateX(3px); } }
.fil-tete p a:focus-visible { outline: 2px solid var(--marque-vif); outline-offset: 3px; border-radius: 4px; }
.fil-etapes { position: relative; isolation: isolate; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(78, 89, 99, .16); }
.etape {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px clamp(32px, 5vw, 80px);
  align-items: center; padding: clamp(22px, 3.4vh, 32px) 0 clamp(22px, 3.4vh, 32px) 48px; border-top: 1px solid rgba(78, 89, 99, .16);
}
.etape::before {                              /* le jalon */
  content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  background: var(--chaux); box-shadow: inset 0 0 0 2px var(--marque);
}
.etape-fin::before { background: var(--marque); }
.etape::after {                               /* le trait, d'un jalon au suivant */
  content: ""; position: absolute; z-index: -1; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--marque); transform-origin: top;
}
.etape:first-child::after { top: 50%; }
.etape:last-child::after { bottom: 50%; }
.etape-texte h3 { margin: 0 0 6px; font: 500 clamp(19px, 1.5vw, 23px)/1.2 var(--sans); letter-spacing: -.02em; color: var(--marque); text-wrap: balance; }
.etape-texte p { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.55; color: #4a545d; text-wrap: pretty; }
.etape-loupe {
  margin: 0; width: min(100%, var(--w, 640px)); padding: 6px; border-radius: 14px; background: #fff; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 18px 40px -26px rgba(15, 23, 42, .4);
}
.etape-loupe img { display: block; width: 100%; height: auto; border-radius: 9px; }
.etape-telephone {                            /* le haut du téléphone, comme posé dans la ligne : coupé en bas seulement, son ombre libre */
  position: relative; height: 196px; padding-top: 4px; clip-path: inset(-60px -400px 0 -400px);
}
.etape-telephone::after { content: ""; position: absolute; left: -200px; right: -200px; bottom: 0; height: 42%; background: linear-gradient(180deg, rgba(243, 241, 237, 0), var(--chaux)); pointer-events: none; }
.etape-telephone .appareil-iphone { --l: 156px; }
.fil-offres {                                /* la bande vers les offres : une ligne, sur la nuit de la marque */
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: clamp(28px, 4vh, 44px); padding: 18px 26px;
  border-radius: 18px; font-size: 16px; line-height: 1.4; color: rgba(255, 255, 255, .76); text-decoration: none;
  background: var(--marque); transition: background .2s ease, transform .16s cubic-bezier(.23, 1, .32, 1);
}
.fil-offres:active { transform: scale(.99); }
.fil-offres b { font: 400 22px/1.2 var(--affiche); letter-spacing: -.005em; color: #fff; }
.fil-offres i { margin-left: auto; font-style: normal; color: #fff; transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) {
  .fil-offres:hover { background: var(--marque-vif); }
  .fil-offres:hover i { transform: translateX(4px); }
}
.fil-offres:focus-visible { outline: 2px solid var(--marque-vif); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  html.js .fil .etape::after { transform: scaleY(0); transition: transform .45s cubic-bezier(.23, 1, .32, 1) calc(var(--i) * 120ms); }
  html.js .fil .etape > * { opacity: 0; transform: translateY(10px); transition: opacity .6s cubic-bezier(.23, 1, .32, 1) calc(var(--i) * 120ms + 60ms), transform .6s cubic-bezier(.23, 1, .32, 1) calc(var(--i) * 120ms + 60ms); }
  html.js .fil.vu .etape::after, html.js .fil.vu .etape > * { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------- la visite, en lecteur
   Un écran plein, qu'on pilote aux flèches : les tronçons de vidéo (#films) jouent entre deux arrêts, la photo 4K de
   l'arrêt (.photo, deux calques pour les fondus) se pose par-dessus quand la caméra s'arrête. */
.visite { position: relative; scroll-margin-top: 0; }
.scene {
  --cache-bas: 0px;
  position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden;
  background: var(--beton); touch-action: pan-y;
}
.films, .films video, .photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.films video, .photo { object-fit: cover; object-position: 50% 50%; display: block; }
.films video { opacity: 0; }
.films video.vu { opacity: 1; }
.photo { opacity: 0; transition: opacity .2s ease; z-index: 1; }
.photo.vue { opacity: 1; transition-duration: .55s; }
@media (prefers-reduced-motion: reduce) {
  .photo { transition: opacity .25s ease, filter .25s ease; }
  .photo:not(.vue) { filter: blur(2px); }
  .photo.vue { transition-duration: .25s; }
}
.photo.devant { z-index: 2; }
.voile { position: absolute; inset: 0; z-index: 3; pointer-events: none; }   /* la carte porte la lisibilité ; voile du soir seul */
.voile::after {                          /* voile du soir : même dessin, en encre */
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease;
  background:
    radial-gradient(ellipse 60% 64% at 0% 100%, rgba(29, 34, 38, .85) 0%, rgba(29, 34, 38, .5) 45%, rgba(29, 34, 38, 0) 100%);
}
.scene.sombre .voile::after { opacity: 1; }

.textes { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

/* La carte de chaque arrêt : la tuile de la page qui en parle (même blanc, même titre, même phrase), posée dans le
   hangar, son vrai appareil qui monte à droite et déborde en bas comme sur les portes de l'accueil. Elle entre quand la
   caméra se pose (.actif), puis l'appareil ; pendant le trajet, aucune carte. */
.panneau {
  position: absolute; left: var(--marge); bottom: calc(clamp(28px, 6vh, 72px) + var(--cache-bas));
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  width: min(920px, 58vw); min-height: clamp(250px, 34vh, 340px); overflow: hidden;
  border-radius: 28px; color: var(--encre);
  background: linear-gradient(165deg, #ffffff 0%, #f4f5f7 100%);
  border: 1px solid rgba(15, 23, 42, .06);
  box-shadow: inset 0 1px 0 #fff, 0 40px 90px -40px rgba(15, 23, 42, .6);
  opacity: 0; transform: translateY(18px); pointer-events: none;
  transition: opacity .2s cubic-bezier(.23, 1, .32, 1), transform .2s cubic-bezier(.23, 1, .32, 1);
}
.panneau.actif { opacity: 1; transform: none; pointer-events: auto; transition: opacity .5s cubic-bezier(.23, 1, .32, 1) .08s, transform .5s cubic-bezier(.23, 1, .32, 1) .08s; }
.panneau.carte-seule { grid-template-columns: minmax(0, 1fr); width: min(520px, calc(100% - 2 * var(--marge))); min-height: 0; }
.carte-texte { position: relative; z-index: 1; padding: 26px 8px 26px 30px; }
.carte-seule .carte-texte { padding: 30px 32px 32px; }
.panneau .repere {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ombre);
}
.panneau .repere b { font-weight: 500; letter-spacing: .04em; color: var(--marque); font-variant-numeric: tabular-nums; }
.panneau h2 { margin: 0 0 10px; font: 600 clamp(22px, 1.8vw, 28px)/1.12 var(--sans); letter-spacing: -.03em; color: var(--marque); text-wrap: balance; }
.carte-seule h2 { font-size: clamp(30px, 3vw, 42px); letter-spacing: -.04em; }
.panneau p.texte { margin: 0; font-size: 15.5px; line-height: 1.5; color: #4a545d; text-wrap: pretty; }
.panneau .suite {
  display: inline-block; margin-top: 14px; font: 500 14px/1.3 var(--sans); color: var(--marque);
  text-decoration: underline; text-decoration-color: rgba(24, 45, 76, .3); text-underline-offset: 4px;
}
.panneau .suite:hover { text-decoration-color: var(--marque); }
.panneau .suite:focus-visible { outline: 2px solid var(--marque-vif); outline-offset: 3px; border-radius: 4px; }
/* l'appareil : posé en haut de sa colonne, il sort de la carte à droite et en bas */
.carte-visuel { position: relative; min-width: 0; }
.carte-visuel .appareil {
  position: absolute; top: 26px; left: 22px;
  opacity: 0; transform: translateY(46px); transition: opacity .2s cubic-bezier(.23, 1, .32, 1), transform .2s cubic-bezier(.23, 1, .32, 1);
}
.panneau.actif .carte-visuel .appareil { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.23, 1, .32, 1) .16s, transform .5s cubic-bezier(.23, 1, .32, 1) .16s; }
.carte-fenetre .appareil-fenetre { width: 640px; }
.carte-ipad .appareil-ipad { width: 600px; }
.carte-iphone .appareil-iphone { left: calc(50% - var(--l) / 2); --l: clamp(160px, 13vw, 200px); }
.carte-visuel .notif-flottante {
  position: absolute; left: auto; right: 22px; top: auto; bottom: 22px; z-index: 3; width: min(300px, 80%);
  opacity: 0; transform: translateY(16px); transition: opacity .2s cubic-bezier(.23, 1, .32, 1), transform .2s cubic-bezier(.23, 1, .32, 1);
}
.panneau.actif .notif-flottante { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.23, 1, .32, 1) .5s, transform .5s cubic-bezier(.23, 1, .32, 1) .5s; }   /* elle arrive après l'écran : c'est un événement */
/* le dossier : les feuilles s'ouvrent en éventail quand la carte arrive, le CRS devant */
.carte-visuel.eventail { min-height: 0; }
.carte-eventail .feuille { top: 26px; width: 34%; }
.carte-eventail .feuille-crs { top: auto; bottom: -40px; width: 52%; }
.panneau.actif .eventail .feuille { transition-delay: .3s; }
.panneau.actif .eventail .feuille-1 { transform: translateX(-50%) rotate(-24deg); }
.panneau.actif .eventail .feuille-2 { transform: translateX(-50%) rotate(-12deg); }
.panneau.actif .eventail .feuille-4 { transform: translateX(-50%) rotate(12deg); }
.panneau.actif .eventail .feuille-5 { transform: translateX(-50%) rotate(24deg); }
.panneau.actif .eventail .feuille-crs { transform: translateX(-50%) rotate(-2deg); opacity: 1; transition-delay: .8s; }
/* le soir : la carte passe en bleu nuit (la sienne porte data-sombre : elle le reste en s'effaçant, quand la scène repart) */
.panneau[data-sombre] {
  color: var(--chaux); background: linear-gradient(165deg, #172a45 0%, #0d1626 100%);
  border-color: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 90px -40px rgba(0, 0, 0, .7);
}
.panneau[data-sombre] h2 { color: #fff; }
.panneau[data-sombre] p.texte, .panneau[data-sombre] .repere { color: var(--beton); }
.panneau[data-sombre] .repere b, .panneau[data-sombre] .suite { color: var(--marque-clair); }
.panneau[data-sombre] .suite { text-decoration-color: rgba(168, 192, 228, .4); }

/* commandes : la flèche du retour, et celle de l'arrêt suivant qui en dit le nom ; au dernier arrêt, la démo */
.commandes {
  position: absolute; right: var(--marge); bottom: calc(clamp(36px, 8vh, 96px) + var(--cache-bas)); z-index: 5;
  display: flex; align-items: center; gap: 10px;
}
.fleche {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px; height: 56px; min-width: 56px; padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .62); border-radius: 999px; cursor: pointer; color: var(--marque);
  background: linear-gradient(140deg, rgba(255, 255, 255, .78), rgba(243, 241, 237, .55));
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 20px 50px -24px rgba(29, 34, 38, .5);
  font: 500 15px/1 var(--sans);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform 160ms cubic-bezier(.23, 1, .32, 1), opacity .3s ease;
}
.fleche svg { width: 20px; height: 20px; flex: none; }
.fleche.precedent { padding: 0; width: 56px; }
@media (hover: hover) and (pointer: fine) { .fleche:hover:not(:disabled) { background: rgba(255, 255, 255, .92); } }
.fleche:active:not(:disabled) { transform: scale(.97); }
.fleche:disabled { opacity: 0; pointer-events: none; }
.fleche.attend { cursor: progress; }
.fleche.attend svg { animation: attend .7s cubic-bezier(.23, 1, .32, 1) infinite alternate; }   /* le tronçon se charge : la flèche tire vers l'avant */
.fleche.precedent.attend svg { animation-name: attend-retour; }
@keyframes attend { to { transform: translateX(4px); } }
@keyframes attend-retour { to { transform: translateX(-4px); } }
.fleche:focus-visible { outline: 2px solid var(--marque-vif); outline-offset: 3px; }
.fleche.suivant { background: var(--marque); color: var(--chaux); border-color: rgba(255, 255, 255, .18); padding: 0 16px 0 22px; }
@media (hover: hover) and (pointer: fine) { .fleche.suivant:hover { background: var(--marque-vif); } }
.suivant-libelle { display: grid; gap: 4px; text-align: left; }
.suivant-libelle small { font: 400 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.suivant-libelle span { font: 500 15px/1 var(--sans); white-space: nowrap; }
.scene.sombre .fleche.precedent { color: var(--chaux); background: rgba(29, 34, 38, .55); border-color: rgba(255, 255, 255, .14); }
.scene.sombre .fleche.suivant { background: var(--chaux); color: var(--marque); }
.aide {
  position: absolute; right: var(--marge); bottom: calc(clamp(36px, 8vh, 96px) + var(--cache-bas) - 30px); z-index: 5; margin: 0;
  font: 400 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(29, 34, 38, .62); transition: opacity .6s ease;
}
.aide kbd { font: inherit; padding: 2px 5px; border-radius: 4px; border: 1px solid rgba(29, 34, 38, .25); background: rgba(255, 255, 255, .5); }
.scene.clavier-vu .aide, .scene.sombre .aide { opacity: 0; }
@media (pointer: coarse) { .aide { display: none; } }

/* rail des lieux, à droite */
.rail {
  position: absolute; right: var(--marge); top: 50%; transform: translateY(-50%); z-index: 5;
  display: grid; gap: 10px; justify-items: end;
}
.rail button {
  all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px;
  font: 400 11px/1 var(--mono); letter-spacing: .04em; color: var(--ombre);
}
.rail button span { opacity: 0; transform: translateX(6px); transition: opacity .2s ease, transform .2s ease; white-space: nowrap; }
.rail button i {
  display: block; width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid currentColor; transition: background .2s ease, transform .2s ease;
}
.rail button[aria-current="step"] { color: var(--marque); }
.rail button[aria-current="step"] i { background: currentColor; transform: scale(1.25); }
.rail button[aria-current="step"] span,
.rail button:focus-visible span { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .rail:hover button span { opacity: 1; transform: none; } }
.rail button:focus-visible { outline: 2px solid var(--marque-vif); outline-offset: 4px; }
.scene.sombre .rail button { color: var(--beton); }
.scene.sombre .rail button[aria-current="step"] { color: var(--marque-clair); }

/* ----------------------------------------------------------------- la fin */
/* le crépuscule : le hangar éclairé au bout du tarmac, le ciel porte le texte, le pied de page se pose sur la nuit */
.fin {
  --photo-h: max(112svh, 820px);            /* le ciel = les 38 % du haut de la photo : le texte y tient */
  color: #fff; padding: clamp(112px, 15svh, 168px) var(--marge) 32px;
  background:
    linear-gradient(180deg, rgba(9, 16, 30, .5) 0%, rgba(9, 16, 30, .08) 26%, rgba(9, 16, 30, 0) 50%, rgba(9, 16, 30, .7) 72%, #0b1424 88%) 0 0 / 100% var(--photo-h) no-repeat,
    url("images/accueil/crepuscule.avif") 62% 0 / max(100%, calc(var(--photo-h) * 16 / 9)) auto no-repeat,
    #0b1424;
}
.fin-grille {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr); gap: 28px clamp(32px, 6vw, 96px); align-items: end;
  max-width: 1240px; margin: 0 auto; min-height: calc(var(--photo-h) * .82 - clamp(112px, 15svh, 168px)); align-content: start;
}
.fin-grille > div:first-child { display: contents; }
.sur-titre { margin: 0 0 18px; font: 400 12px/1 var(--mono); letter-spacing: .06em; color: var(--beton); }
.fin h2 { grid-column: 1; grid-row: 1 / 3; align-self: end; margin: 0; max-width: 14ch; font: 400 clamp(42px, 5.6vw, 90px)/1 var(--affiche); letter-spacing: -.015em; text-wrap: balance; text-shadow: 0 2px 30px rgba(9, 16, 30, .35); }
/* les titres de l'accueil parlent comme l'arrivée : Bodoni romain, la fin de la phrase sur sa ligne, d'un ton plus doux */
.metiers-tete h2 em, .fil-tete h2 em, .fin h2 em { display: block; font-style: normal; }
.metiers-tete h2 em, .fil-tete h2 em { color: var(--ombre); }
.fin h2 em { color: var(--marque-clair); }
.metiers-tete h2 { max-width: 17ch; }
.fil-tete h2 { max-width: 24ch; }
.fin h2 { max-width: 16ch; font-size: clamp(40px, 5vw, 80px); }
.fin-texte { grid-column: 2; grid-row: 1; margin: 0; max-width: 40ch; color: rgba(255, 255, 255, .82); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; }
.fin-action { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.bouton {
  font: 500 16px/1 var(--sans); text-decoration: none; padding: 17px 26px; border-radius: 999px;
  background: #fff; color: var(--marque); transition: background .2s ease, transform .16s cubic-bezier(.23, 1, .32, 1);
}
.bouton:hover { background: var(--marque-clair); }
.bouton:active { transform: scale(.97); }
.bouton:focus-visible, .demo:focus-visible, .marque:focus-visible { outline: 2px solid var(--marque-clair); outline-offset: 3px; }
.fin-note { margin: 0; font: 400 14px/1.4 var(--sans); color: rgba(255, 255, 255, .78); }
.fin-garanties {                             /* ce que le chef d'atelier demande avant de s'engager, sur le sol sombre */
  grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px clamp(24px, 3vw, 48px);
  margin: clamp(56px, 10vh, 112px) 0 0; padding: 24px 0 0; list-style: none;
  border-top: 1px solid rgba(207, 202, 194, .22); font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .8);
  text-shadow: 0 1px 14px rgba(9, 16, 30, .6);
}
.fin-garanties b { font-weight: 500; color: #fff; }
.fin-note a { color: #fff; text-decoration-color: var(--marque-clair); text-underline-offset: 3px; }
.pied {
  max-width: 1240px; margin: 0 auto; padding-top: 28px;
  border-top: 1px solid rgba(207, 202, 194, .25);
  font: 400 13px/1.5 var(--sans); color: var(--beton);
}
.pied-plan { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 28px 40px; }
.pied-plan > div p { margin: 0 0 8px; max-width: 34ch; }
.pied-plan nav { display: grid; gap: 8px; align-content: start; }
.pied-titre { margin: 0 0 6px; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.pied a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; justify-self: start; }
.pied a:hover { color: var(--chaux); border-bottom-color: var(--marque-clair); }

/* ----------------------------------------------------------------- demande de démo (même verre que les cartes) */
html:has(dialog[open]) { overflow: hidden; }
dialog.demande {
  width: min(460px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0;
  background: transparent; color: var(--encre); overflow: visible;
}
dialog.demande::backdrop { background: rgba(29, 34, 38, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.demande[open] { animation: demande-entree .3s cubic-bezier(.23, 1, .32, 1); }
dialog.demande[open]::backdrop { animation: demande-voile .3s ease-out; }
@keyframes demande-entree { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes demande-voile { from { opacity: 0; } }
@keyframes demande-fondu { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog.demande[open] { animation-name: demande-fondu; } }
.demande-carte {
  position: relative; padding: 26px 28px 22px; border-radius: 20px;
  background: linear-gradient(140deg, rgba(255, 255, 255, .94) 0%, rgba(243, 241, 237, .9) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 40px 100px -30px rgba(29, 34, 38, .55);
}
.demande .fermer {
  all: unset; cursor: pointer; position: absolute; top: 10px; right: 10px; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 50%; color: var(--ombre);
}
.demande .fermer svg { width: 16px; height: 16px; }
.demande .fermer:hover { background: rgba(78, 89, 99, .1); color: var(--encre); }
.demande .fermer:focus-visible { outline: 2px solid var(--marque-vif); }
.repere-demande {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ombre);
}
.voyant {
  width: 6px; height: 6px; border-radius: 50%; background: var(--marque-vif);
  box-shadow: 0 0 0 3px rgba(42, 77, 128, .16), 0 0 10px rgba(42, 77, 128, .5);
}
.demande h2 { margin: 0 0 8px; padding-right: 36px; font: 500 clamp(24px, 3vw, 30px)/1.08 var(--sans); letter-spacing: -.032em; text-wrap: balance; }   /* la croix garde sa place ; pas de mot seul en 2e ligne */
.demande .chapeau { margin: 0 0 20px; font-size: 15px; line-height: 1.5; color: var(--ombre); }
.champ { display: grid; gap: 6px; margin-bottom: 12px; }
.champ label { font: 500 14px/1.2 var(--sans); color: var(--encre); }
.champ label small { font-size: inherit; font-weight: 400; color: var(--ombre); }
.champ input {
  font: 400 16px/1.2 var(--sans); color: var(--encre); padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(78, 89, 99, .22); background: rgba(255, 255, 255, .85);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.champ input:focus { outline: none; border-color: var(--marque-vif); box-shadow: 0 0 0 3px rgba(42, 77, 128, .16); }
.erreur { margin: 0; font-size: 13px; color: #a3321f; }
.erreur:empty { display: none; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#anti-robot { margin: 4px 0 12px; }
#anti-robot:empty { display: none; }
.demande button[type=submit] {
  width: 100%; margin-top: 6px; font: 500 16px/1 var(--sans); padding: 17px 18px; border: 0; border-radius: 999px;
  background: var(--marque); color: var(--chaux); cursor: pointer; transition: background .2s ease, color .2s ease;
}
.demande button[type=submit]:hover { background: var(--marque-vif); }
.demande button[type=submit]:disabled { opacity: .6; cursor: progress; }
.demande button[type=submit]:focus-visible { outline: 2px solid var(--marque-vif); outline-offset: 3px; }
.statut { margin: 10px 0 0; font-size: 14px; }
.statut:empty { display: none; }
.statut.echec { color: #a3321f; }
.demande .mention { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--ombre); }
.demande .mention a { color: inherit; }
.merci { display: none; padding: 4px 0 6px; }
.demande form.envoye .champs { display: none; }
.demande form.envoye .merci { display: block; }
.demande [data-pour][hidden] { display: none; }   /* l'autre variante de la fenêtre (demande.js) ; .champ est en grille */

/* le plan du site en fin de visite : à qui s'adresse HangarOS, ce qu'il fait */

/* ----------------------------------------------------------------- pages légales */
.page-texte { background: var(--chaux); }
.page-texte .barre { position: sticky; background: rgba(243, 241, 237, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.page-texte .marque { color: var(--encre); }
.texte-legal { max-width: 720px; margin: 0 auto; padding: clamp(40px, 8vh, 96px) var(--marge) 80px; }
.texte-legal .sur-titre { color: var(--marque-vif); }
.texte-legal h1 { margin: 0 0 12px; font: 500 clamp(34px, 5vw, 56px)/1 var(--sans); letter-spacing: -.035em; }
.texte-legal .maj { margin: 0 0 40px; font: 400 12px/1 var(--mono); letter-spacing: .06em; color: var(--ombre); }
.texte-legal h2 { margin: 40px 0 12px; font: 500 22px/1.2 var(--sans); letter-spacing: -.02em; }
.texte-legal p, .texte-legal li { font-size: 16px; line-height: 1.65; color: #2d353c; }
.texte-legal ul { padding-left: 1.2em; }
.texte-legal dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0; }
.texte-legal dt { font: 400 11px/1.9 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ombre); }
.texte-legal dd { margin: 0; font-size: 16px; line-height: 1.6; }
.texte-legal a { color: var(--encre); text-decoration-color: var(--marque-vif); text-underline-offset: 3px; }
.page-texte .pied, .page-contenu .pied {
  max-width: 1160px; margin: 0 auto; padding: 32px var(--marge) 40px; color: var(--ombre); border-top-color: rgba(78, 89, 99, .18);
}
.page-texte .pied a:hover, .page-contenu .pied a:hover { color: var(--marque); border-bottom-color: var(--marque-vif); }

/* ----------------------------------------------------------------- pages métier et fonction */
.page-contenu { background: var(--chaux); }
.barre-pages { position: sticky; background: rgba(243, 241, 237, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(78, 89, 99, .1); }

.page-contenu main { max-width: 1160px; margin: 0 auto; padding: 0 var(--marge); }
.page-contenu main [id] { scroll-margin-top: 88px; }   /* les ancres des menus : la barre collante ne cache pas le titre */
.page-tete { padding: clamp(40px, 9vh, 104px) 0 clamp(40px, 7vh, 80px); }
.ariane { display: flex; gap: 10px; margin-bottom: 28px; font: 400 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ombre); }
.ariane a { color: inherit; text-decoration: none; }
.ariane a:hover { color: var(--marque); }
.page-tete h1 { margin: 0 0 22px; max-width: 20ch; font: 500 clamp(38px, 5.4vw, 72px)/1.02 var(--sans); letter-spacing: -.04em; color: var(--encre); text-wrap: balance; }
.page-chapeau { margin: 0; max-width: 60ch; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: #3b454e; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 32px; }
.bouton-plein {
  font: 500 16px/1 var(--sans); text-decoration: none; padding: 17px 26px; border-radius: 999px;
  background: var(--marque); color: var(--chaux); transition: background .2s ease;
}
.bouton-plein:hover { background: var(--marque-vif); }
.bouton-lien { font: 500 15px/1 var(--sans); color: var(--marque); text-decoration: underline; text-decoration-color: rgba(24, 45, 76, .3); text-underline-offset: 4px; }
.bouton-lien:hover { text-decoration-color: var(--marque); }

.bloc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(40px, 7vh, 88px) 0; border-top: 1px solid rgba(78, 89, 99, .12); }
.bloc.inverse { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }   /* l'image garde la grande colonne, à gauche */
.bloc.inverse > .bloc-texte { order: 2; }
.bloc-texte h2 { margin: 0 0 16px; font: 500 clamp(26px, 2.8vw, 38px)/1.1 var(--sans); letter-spacing: -.03em; color: var(--encre); text-wrap: balance; }
.bloc-texte p { margin: 0 0 14px; font-size: 17px; line-height: 1.65; color: #3b454e; }
.bloc-texte ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.bloc-texte li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.55; color: #2d353c; }
.bloc-texte li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--marque-vif); box-shadow: 0 0 0 3px rgba(42, 77, 128, .14); }
.bloc-texte a { color: var(--marque); text-underline-offset: 3px; }

.capture { margin: 0; border-radius: 14px; overflow: hidden; background: #0f1419; box-shadow: 0 30px 80px -30px rgba(29, 34, 38, .55), 0 0 0 1px rgba(29, 34, 38, .08); }
.capture-cadre { display: flex; gap: 6px; padding: 10px 12px; background: #1b2128; }
.capture-cadre i { width: 9px; height: 9px; border-radius: 50%; background: #3a434d; }
.capture img { display: block; width: 100%; height: auto; }
.capture figcaption { padding: 10px 14px; font: 400 12px/1.4 var(--mono); color: #aab4bd; background: #1b2128; }

.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; padding: clamp(32px, 6vh, 72px) 0; border-top: 1px solid rgba(78, 89, 99, .12); }
.cartes > h2 { grid-column: 1 / -1; margin: 0 0 8px; font: 500 clamp(26px, 2.8vw, 38px)/1.1 var(--sans); letter-spacing: -.03em; }
.carte {
  padding: 22px 22px 20px; border-radius: 16px;
  background: linear-gradient(140deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .55));
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 18px 40px -26px rgba(29, 34, 38, .35);
}
.carte h3 { margin: 0 0 8px; font: 500 18px/1.25 var(--sans); letter-spacing: -.015em; color: var(--encre); }
.carte p { margin: 0; font-size: 15px; line-height: 1.55; color: #4a545d; }

.faq { max-width: 820px; padding: clamp(40px, 7vh, 88px) 0; border-top: 1px solid rgba(78, 89, 99, .12); }
.faq h2 { margin: 0 0 20px; font: 500 clamp(26px, 2.8vw, 38px)/1.1 var(--sans); letter-spacing: -.03em; }
.faq details { border-bottom: 1px solid rgba(78, 89, 99, .15); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; position: relative; font: 500 17px/1.4 var(--sans); color: var(--encre); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font: 300 26px/1 var(--sans); color: var(--marque-vif); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; font-size: 16px; line-height: 1.65; color: #3b454e; max-width: 68ch; }


/* ----------------------------------------------------------------- page Ateliers : grille en largeur et vrais appareils
   La page prend la largeur (.large sort du gabarit de 1160 px) ; les fonctionnalités sont des tuiles « bento ». Les
   appareils (.appareil-mac, -ipad, -iphone, -fenetre) sont dessinés en CSS autour des vraies captures, jour ou nuit
   selon le réglage du visiteur (x-showcase.ecran). Le carnet reprend la couverture de l'application. */
.large { --large: min(1380px, calc(100vw - 2 * var(--marge))); width: var(--large); margin-left: calc((100% - var(--large)) / 2); }
.atelier-tete {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 4vw, 64px); align-items: center;
  padding: clamp(28px, 6vh, 72px) 0 clamp(36px, 7vh, 80px);
}
.atelier-tete h1 { margin: 0 0 22px; font: 600 clamp(36px, 4vw, 58px)/1.04 var(--sans); letter-spacing: -.04em; color: var(--marque); text-wrap: balance; }
.trio { position: relative; aspect-ratio: 1.42; }
.trio .appareil-mac { position: absolute; right: 6%; top: 0; width: 82%; }   /* le socle déborde de 8 % de chaque côté */
.trio .appareil-ipad { position: absolute; left: 0; bottom: 2%; width: 56%; }
.trio .appareil-iphone { position: absolute; right: 3%; bottom: 0; --l: clamp(96px, 10.5vw, 168px); }

/* les appareils */
.appareil { margin: 0; position: relative; }
.appareil img { display: block; width: 100%; height: auto; }
.appareil-ecran { position: relative; overflow: hidden; }
.appareil-iphone {
  --l: 230px; width: var(--l); padding: calc(var(--l) * .036); border-radius: calc(var(--l) * .17); background: #111214;
  box-shadow: 0 0 0 calc(var(--l) * .006) #3d4045, 0 0 0 calc(var(--l) * .014) #a9adb3, 0 0 0 calc(var(--l) * .017) #6f7378,
    0 50px 80px -34px rgba(15, 23, 42, .55);
}
.appareil-iphone::before, .appareil-iphone::after { content: ""; position: absolute; width: calc(var(--l) * .012); border-radius: 2px; background: #8f9399; }
.appareil-iphone::before { left: calc(var(--l) * -.026); top: 21%; height: 6.5%; box-shadow: 0 calc(var(--l) * .2) 0 #8f9399, 0 calc(var(--l) * .36) 0 #8f9399; }
.appareil-iphone::after { right: calc(var(--l) * -.026); top: 28%; height: 11%; }
.appareil-iphone .appareil-ecran { border-radius: calc(var(--l) * .135); background: var(--barre-jour); }
.iphone-barre {
  position: relative; display: flex; align-items: center; justify-content: space-between; height: calc(var(--l) * .112);
  padding: 0 calc(var(--l) * .085) 0 calc(var(--l) * .1); color: #0b0c0e; font: 600 calc(var(--l) * .05)/1 -apple-system, "SF Pro Text", var(--sans);
}
.iphone-ilot { position: absolute; left: 50%; top: calc(var(--l) * .024); width: calc(var(--l) * .3); height: calc(var(--l) * .085); transform: translateX(-50%); border-radius: 999px; background: #000; }
.iphone-icones { display: flex; align-items: center; gap: calc(var(--l) * .014); }
.iphone-icones svg { height: calc(var(--l) * .043); width: auto; fill: currentColor; }
.appareil-ipad {
  padding: 1.15%; border-radius: 3.6% / 5.2%; background: #141518;
  box-shadow: 0 0 0 1.5px #3b3d42, 0 0 0 3.5px #b8bbc0, 0 0 0 4.5px #7c8086, 0 50px 90px -40px rgba(15, 23, 42, .6);
}
.appareil-ipad::before { content: ""; position: absolute; left: 50%; top: .42%; width: .5%; aspect-ratio: 1; border-radius: 50%; background: #2a2c31; transform: translateX(-50%); }
.appareil-ipad .appareil-ecran { border-radius: 2.6% / 3.8%; }   /* iPad Pro : bordures fines */
.mac-couvercle {
  padding: 1.9% 1.9% 2.4%; border-radius: 3.6% 3.6% 0 0 / 5.6% 5.6% 0 0; background: #0b0b0c;
  box-shadow: 0 0 0 1.5px #2c2d30, 0 0 0 3px #b9bcc0;
}
.mac-couvercle .appareil-ecran { border-radius: .5%; }
.mac-encoche { position: absolute; left: 50%; top: 0; z-index: 2; width: 12%; height: 3.4%; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #0b0b0c; }
.mac-base {
  position: relative; width: 116%; margin-left: -8%; aspect-ratio: 116 / 2.6; border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(180deg, #e9eaec 0%, #cfd1d4 45%, #9c9fa4 100%); box-shadow: 0 40px 60px -30px rgba(15, 23, 42, .5);
}
.mac-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 14%; height: 42%; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #a9acb0, #d7d8db); }
.appareil-fenetre { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 40px 80px -40px rgba(15, 23, 42, .45); }
.fenetre-barre { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; background: #eceef1; }
.fenetre-barre i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.fenetre-barre i:nth-child(2) { background: #febc2e; }
.fenetre-barre i:nth-child(3) { background: #28c840; }
@media (prefers-color-scheme: dark) {
  .appareil-iphone .appareil-ecran { background: var(--barre-nuit); }
  .iphone-barre { color: #fff; }
  .fenetre-barre { background: #24272c; }
  .appareil-fenetre { background: #0b1120; }
}

/* la grille */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; padding: 0 0 clamp(40px, 7vh, 80px); }
.tuile {
  grid-column: span 12; position: relative; display: flex; flex-direction: column; gap: 24px; min-width: 0; overflow: hidden;
  padding: clamp(24px, 2.6vw, 38px); border-radius: 30px; scroll-margin-top: 96px;
  background: linear-gradient(165deg, #ffffff 0%, #f5f6f8 100%); border: 1px solid rgba(15, 23, 42, .06);
  box-shadow: inset 0 1px 0 #fff, 0 30px 60px -48px rgba(15, 23, 42, .4);
}
.tuile-texte h2 { margin: 0 0 10px; font: 600 clamp(24px, 2.1vw, 32px)/1.1 var(--sans); letter-spacing: -.03em; color: var(--marque); text-wrap: balance; }
.tuile-texte p { margin: 0; max-width: 48ch; font-size: 16px; line-height: 1.55; color: #4a545d; }
.tuile-texte .tuile-note { margin-top: 14px; font-size: 15px; }
.tuile-note b { color: var(--marque); }
.tuile-visuel { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 280px; }
@media (min-width: 1025px) {
  .tuile-4 { grid-column: span 4; } .tuile-5 { grid-column: span 5; } .tuile-6 { grid-column: span 6; } .tuile-7 { grid-column: span 7; }
}

/* le bon reçu en tête : l'accueil de l'atelier, les bons à accepter en loupe ; accepter sur la tablette, le planning
   en loupe ; le bon une fois le compte rendu parti */
.scene-accueil-atelier { display: block; min-height: 0; padding: 0 0 54px; }
.scene-accueil-atelier .appareil-fenetre { width: 90%; }
.scene-accueil-atelier .loupe-1 { right: 0; bottom: 0; width: 56%; }
.scene-planifier { justify-content: flex-start; align-items: flex-start; padding: 0 0 72px; }
.scene-planifier .appareil-ipad { width: 80%; }
.scene-planifier .loupe-1 { right: 0; bottom: 0; width: 62%; }
.scene-compte-rendu-atelier { display: block; min-height: 0; padding: 0 0 64px; }
.scene-compte-rendu-atelier .appareil-fenetre { width: 94%; }
.scene-compte-rendu-atelier .loupe-1 { right: 0; bottom: 0; width: 76%; }
/* au pied de l'avion : le DR400 en 3D, et le téléphone du mécanicien */
.scene-avion { min-height: 420px; justify-content: flex-start; background: radial-gradient(ellipse 60% 55% at 38% 62%, #e6ecf4 0%, rgba(230, 236, 244, 0) 70%); border-radius: 22px; }
.avion-3d { width: 74%; height: 440px; --poster-color: transparent; background: transparent; cursor: grab; }
.avion-aide { position: absolute; left: 4px; bottom: 6px; margin: 0; font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8a949e; }
.avion-aide::before { content: "↻ "; }
.scene-avion .appareil-iphone { position: absolute; right: 0; bottom: 0; --l: clamp(130px, 12vw, 176px); }
/* les fiches d'essai : les tuiles de l'application */
.mosaique { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: center; }
.mosaique img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 18px 30px -20px rgba(15, 23, 42, .5); }
/* la recherche dans les manuels : une question dite comme à un collègue, la bonne page trouvée parmi tous les manuels */
.recherche-manuel { flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; }
.rm-barre {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 13px 13px 20px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(99, 102, 241, .35); box-shadow: 0 0 0 5px rgba(99, 102, 241, .08), 0 20px 36px -24px rgba(15, 23, 42, .45);
}
.rm-etoile { color: #6366f1; font-size: 17px; }
.rm-question { font: 500 16px/1.3 var(--sans); color: #1d2226; white-space: nowrap; overflow: hidden; border-right: 2px solid #6366f1; width: 0; max-width: 100%; }
.recherche-manuel.vu .rm-question { animation: rm-taper 1.5s steps(36, end) .2s forwards, rm-curseur .8s step-end 1.8s 2; }
@keyframes rm-taper { to { width: 36ch; } }
@keyframes rm-curseur { 50% { border-color: transparent; } }
.rm-go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: #4338ca; }
.rm-contexte { margin: 2px 0 4px 16px; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #6366f1; opacity: 0; transition: opacity .5s ease 1.8s; }
.recherche-manuel.vu .rm-contexte { opacity: 1; }
.rm-resultat {
  display: grid; gap: 4px; padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px solid rgba(15, 23, 42, .07);
  box-shadow: 0 16px 30px -24px rgba(15, 23, 42, .4); opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease;
}
.recherche-manuel.vu .rm-resultat { opacity: 1; transform: none; }
.recherche-manuel.vu .rm-premier { transition-delay: 2.1s; }
.recherche-manuel.vu .rm-autre:nth-of-type(4) { transition-delay: 2.35s; }
.recherche-manuel.vu .rm-autre:last-child { transition-delay: 2.55s; }
.rm-resultat small { font: 400 10.5px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #6366f1; }
.rm-resultat p { margin: 0; font-size: 14px; line-height: 1.45; color: #1d2226; }
.rm-resultat mark { padding: 0 2px; border-radius: 3px; background: rgba(250, 204, 21, .45); color: inherit; }
.rm-premier { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; border-color: rgba(99, 102, 241, .3); }
.rm-corps { display: grid; gap: 6px; }
.rm-page { display: grid; align-content: start; gap: 5px; height: 84px; padding: 9px 8px; border-radius: 5px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, .1), 0 8px 16px -10px rgba(15, 23, 42, .4); }
.rm-page i { display: block; height: 4px; border-radius: 2px; background: #e3e6ea; }
.rm-page i:nth-child(2) { width: 80%; }
.rm-page i:nth-child(4) { width: 70%; }
.rm-page .rm-surligne { height: 9px; background: rgba(250, 204, 21, .6); }
.rm-ouvrir { justify-self: start; padding: 8px 12px; border-radius: 10px; font: 600 12.5px/1 var(--sans); color: #fff; background: #4338ca; }
.rm-autre { padding: 10px 16px; }
.rm-autre p { color: #4a545d; }
@media (prefers-reduced-motion: reduce) { .rm-question { width: auto; animation: none; border-right: 0; } .rm-resultat, .rm-contexte { transition: none; opacity: 1; } }
/* les icônes de l'application, en tête de tuile : la messagerie (bleue) et le magasin (vert) */
.embleme {
  position: relative; display: inline-grid; place-items: center; width: 58px; height: 58px; margin-bottom: 18px; border-radius: 17px; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 14px 28px -12px rgba(15, 23, 42, .45);
}
.embleme svg { width: 30px; height: 30px; }
.embleme i { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font: 700 12px/1 var(--sans); font-style: normal; color: #fff; background: #ef4444; box-shadow: 0 0 0 3px #fff; }
.embleme-messagerie { background: linear-gradient(135deg, #0ea5e9 0%, #4f46e5 100%); }
.embleme-magasin { background: linear-gradient(135deg, #10b981 0%, #059669 55%, #0f766e 100%); }
/* la messagerie : l'ordinateur et le téléphone, sans se couper */
.duo { justify-content: flex-start; align-items: flex-start; padding: 0 0 40px; }
.duo .appareil-fenetre { width: 80%; }
.duo .appareil-iphone { position: absolute; right: 0; bottom: 0; --l: clamp(130px, 12vw, 180px); }
.notif-flottante {
  position: absolute; right: 22%; top: -18px; z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start;
  width: min(380px, 70%); padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid rgba(15, 23, 42, .07);
  box-shadow: 0 30px 50px -24px rgba(15, 23, 42, .55);
}
.notif-icone { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #059669; background: #d1fae5; }
.notif-icone svg { width: 16px; height: 16px; }
.notif-texte { display: grid; gap: 3px; font-size: 13.5px; line-height: 1.4; color: #4a545d; }
.notif-texte b { font: 600 14px/1.2 var(--sans); color: #1d2226; }
.notif-heure { font: 400 11px/1 var(--mono); color: #9aa3ad; white-space: nowrap; }
/* la facturation : le devis, la facture à l'écran, la facture en PDF */
@media (min-width: 1025px) {
  .tuile-facturation { flex-direction: row; align-items: center; gap: 40px; }
  .tuile-facturation .tuile-texte { flex: 0 0 28%; }
}
.facturation { justify-content: center; padding: 20px 0 30px; }
.facturation .appareil-fenetre { position: relative; z-index: 1; width: 68%; }
.papier { position: absolute; height: auto; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, .07), 0 30px 50px -22px rgba(15, 23, 42, .5); }
.papier-devis { left: 0; top: 0; width: 30%; transform: rotate(-5deg); }
.papier-facture { right: 0; bottom: 0; z-index: 2; width: 32%; transform: rotate(4deg); }
/* le magasin : la sortie au bureau et au téléphone, l'étiquette, le Form 1 déloti */
@media (min-width: 1025px) {
  .tuile-magasin { flex-direction: row; align-items: center; gap: 40px; }
  .tuile-magasin .tuile-texte { flex: 0 0 28%; }
}
.magasin { justify-content: flex-start; align-items: flex-start; padding: 0 0 64px; }
.magasin .appareil-fenetre { width: 60%; }
.magasin .appareil-iphone { position: absolute; left: 52%; bottom: 0; --l: clamp(120px, 10.5vw, 158px); }
.etiquette { position: absolute; left: 4%; bottom: 0; width: 27%; height: auto; border-radius: 10px; background: #fff; transform: rotate(-4deg); box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 24px 40px -18px rgba(15, 23, 42, .5); }
.form1 { position: absolute; right: 1%; top: 4%; width: 27%; margin: 0; transform: rotate(4deg); }
.form1 img { display: block; width: 100%; height: auto; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 30px 50px -22px rgba(15, 23, 42, .55); }
.form1 figcaption { display: inline-block; margin-top: 12px; padding: 7px 12px; border-radius: 999px; font: 500 12px/1 var(--sans); white-space: nowrap; color: #1d4ed8; background: #e8eefc; }
/* les fiches d'essai, façon Apple : la liste à gauche, la grande photo à droite */
@media (min-width: 1025px) {
  .tuile-fiches { flex-direction: row; align-items: stretch; gap: 48px; }
  .fiches-liste { flex: 0 0 36%; }
}
.fiches-liste { display: flex; flex-direction: column; gap: 26px; }
.fiches-choix { display: grid; align-content: start; gap: 4px; margin: 0; padding: 0; list-style: none; }   /* sa hauteur est réservée (onglets.js) : la place en trop reste en bas */
.fiche-choix {
  all: unset; position: relative; box-sizing: border-box; display: grid; gap: 6px; width: 100%; padding: 14px 18px; border-radius: 16px; cursor: pointer;
  transition: background .25s ease;
}
/* le titre replié, comme les métiers de l'accueil : 4,8:1 au moins sur le fond de la tuile */
.fiche-choix b { font: 600 clamp(19px, 1.6vw, 24px)/1.2 var(--sans); letter-spacing: -.02em; color: rgba(24, 45, 76, .68); transition: color .25s ease; }
.fiche-choix span { display: none; font-size: 15px; line-height: 1.5; color: #4a545d; }
.fiche-choix[aria-selected="true"] { background: #fff; box-shadow: 0 1px 0 rgba(15, 23, 42, .04), 0 16px 30px -22px rgba(15, 23, 42, .45); }
.fiche-choix[aria-selected="true"] b { color: var(--marque); }
.fiche-choix[aria-selected="true"] span { display: block; }
.fiche-choix:hover b { color: var(--marque); }
.fiche-choix:focus-visible { outline: 2px solid var(--marque-vif); outline-offset: 2px; }
/* le trait sous l'onglet actif compte le temps avant le suivant (onglets.js pose la période) */
.fiche-choix::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 6px; height: 2px; border-radius: 1px;
  background: var(--marque); transform: scaleX(0); transform-origin: left;
}
.defile .fiche-choix[aria-selected="true"]::after { animation: temps var(--periode, 10s) linear forwards; }
.fiches-photos { position: relative; flex: 1; min-height: 480px; border-radius: 24px; overflow: hidden; background: #0d1626; }
/* une vue cachée quitte aussi l'arbre d'accessibilité et la tabulation (visibility), une fois son fondu fini */
.fiche-photo { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transform: scale(1.04); transition: opacity .8s ease, transform 1.4s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .8s; }
.fiche-photo.active { opacity: 1; visibility: visible; transform: none; transition: opacity .8s ease, transform 1.4s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
/* la vue atteinte au clavier : le cadre se pose autour de la photo, celui de la vue serait rogné par son conteneur */
.fiche-photo:focus-visible { outline: none; }
.fiches-photos:has(> :focus-visible) { outline: 2px solid var(--marque-vif); outline-offset: 4px; }
.fiche-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fiche-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(8, 12, 22, .7) 0%, rgba(8, 12, 22, .15) 45%, rgba(8, 12, 22, .35) 100%); }
.fiche-saisie { position: absolute; right: 5%; bottom: 7%; z-index: 2; width: 64%; transform: translateY(14px); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.fiche-papier { position: absolute; right: 6%; bottom: 8%; z-index: 2; width: 56%; height: auto; border-radius: 3px; background: #fff; transform: rotate(-3deg) translateY(14px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .65); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.fiche-photo.active .fiche-saisie { transform: none; }
.fiche-photo.active .fiche-papier { transform: rotate(-3deg); }
.fiches-suite { padding: 4px 18px 0; font: 600 26px/1 var(--sans); letter-spacing: .1em; color: #c3c9d0; }
.fiche-legende { position: absolute; left: 28px; top: 24px; z-index: 1; display: grid; gap: 6px; margin: 0; font: 600 clamp(24px, 2.2vw, 34px)/1.1 var(--sans); letter-spacing: -.02em; color: #fff; }
.fiche-legende small { font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
/* le dossier en éventail : les feuilles s'ouvrent depuis la pile, le CRS devant */
.eventail { min-height: 400px; }
.feuille {
  position: absolute; left: 50%; top: 4%; width: 38%; height: auto; border-radius: 4px; background: #fff;
  box-shadow: 0 18px 40px -16px rgba(15, 23, 42, .45), 0 0 0 1px rgba(15, 23, 42, .07);
  transform-origin: 50% 120%; transform: translateX(-50%) rotate(0deg); transition: transform 1s cubic-bezier(.2, .8, .2, 1);
}
.eventail.vu .feuille-1 { transform: translateX(-50%) rotate(-24deg); }
.eventail.vu .feuille-2 { transform: translateX(-50%) rotate(-12deg); }
.eventail.vu .feuille-3 { transform: translateX(-50%) rotate(0deg); }
.eventail.vu .feuille-4 { transform: translateX(-50%) rotate(12deg); }
.eventail.vu .feuille-5 { transform: translateX(-50%) rotate(24deg); }
.feuille-crs { top: auto; bottom: 0; width: 56%; transform-origin: 50% 50%; transform: translateX(-50%) translateY(30px) rotate(-2deg); opacity: 0; transition: transform 1s cubic-bezier(.2, .8, .2, 1) .5s, opacity .6s ease .5s; }
.eventail.vu .feuille-crs { transform: translateX(-50%) rotate(-2deg); opacity: 1; }
/* le carnet : la couverture de l'application, bleu nuit et or */
.carnet-scene { min-height: 340px; }
.carnet-livre {
  position: relative; display: flex; flex-direction: column; justify-content: center; width: 230px; aspect-ratio: .72; padding: 0 22px 0 40px;
  border-radius: 6px 16px 16px 6px; background: linear-gradient(158deg, #22375c 0%, #16233d 58%, #0d1626 100%);
  box-shadow: 6px 6px 0 -1px #f3efe4, 11px 11px 0 -2px #e6e0d1, 0 40px 60px -26px rgba(13, 22, 38, .75);
  transform: rotate(-3deg);
}
.carnet-livre::before { content: ""; position: absolute; left: 16px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: rgba(214, 188, 124, .55); }
.carnet-titre { font: 700 15px/1.45 "Bodoni Moda", "Bodoni 72", "Didot", serif; letter-spacing: .16em; text-transform: uppercase; color: #d9bd7c; }
.carnet-regle { width: 64px; height: 1px; margin: 18px 0; background: linear-gradient(90deg, rgba(214, 188, 124, .7), rgba(214, 188, 124, .05)); }
.carnet-nom { font: 500 12px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(253, 230, 138, .7); }
.carnet-pied { position: absolute; left: 44px; bottom: 24px; font: 400 10px/1 var(--mono); letter-spacing: .14em; color: rgba(214, 188, 124, .55); }
/* les clients ; passer à HangarOS */
.solo .appareil-iphone { --l: clamp(170px, 15vw, 220px); }
.route { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.route li { display: grid; gap: 4px; padding-left: 18px; border-left: 2px solid rgba(42, 77, 128, .2); font-size: 15px; line-height: 1.5; color: #4a545d; }
.route b { font: 600 16px/1.3 var(--sans); color: var(--marque); }
.route a { color: var(--marque); text-underline-offset: 3px; }

/* ----------------------------------------------------------------- page Magasin : le gabarit des Ateliers
   La sortie reprend la composition du magasin des Ateliers. Les écrans « carte » (une fenêtre de l'application, une
   fiche d'outil) sont posés sans cadre : leurs coins sont arrondis dans l'image, l'ombre suit leur forme. */
/* l'en-tête : l'étagère du magasin au fond, l'ordinateur devant, le téléphone en main */
.trio-magasin .etagere { position: absolute; left: 0; bottom: 0; height: 100%; width: auto; filter: drop-shadow(0 30px 34px rgba(15, 23, 42, .2)); }
.trio-magasin .appareil-mac { top: 16%; right: 6%; width: 66%; }
.trio-magasin .appareil-iphone { right: 0; }
.appareil-carte img { filter: drop-shadow(0 0 1px rgba(15, 23, 42, .3)) drop-shadow(0 24px 26px rgba(15, 23, 42, .24)); }
.solo .appareil-ipad { width: 94%; }
/* la sortie : la fenêtre en grand (le téléphone est dans l'en-tête), le Form 1 déloti à côté */
.sortie { padding-bottom: 12px; }
.sortie .appareil-fenetre { width: 70%; }
.sortie .form1 { top: 18%; width: 28%; }
/* la réception : la planche d'étiquettes imprimée, une étiquette en grand devant */
.etiquettes { min-height: 320px; }
.papier-planche { left: 0; top: 4%; width: 68%; transform: rotate(-4deg); }
.etiquette-grande {
  position: absolute; right: 0; bottom: 4%; z-index: 2; width: 60%; height: auto; border-radius: 10px; background: #fff;
  transform: rotate(3deg); box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 28px 44px -18px rgba(15, 23, 42, .5);
}
/* neuve, d'occasion ou déposée : la réception d'une pièce d'occasion, et la pose au Kardex avec la dépose */
.occasion { justify-content: flex-end; }
.occasion-pose { width: 46%; }
.occasion-entree { position: absolute; left: 0; top: 50%; z-index: 2; width: 56%; transform: translateY(-50%); }
/* pour le comptable : le tableau de bord financier en grand */
@media (min-width: 1025px) {
  .tuile-comptable { flex-direction: row; align-items: center; gap: 40px; }
  .tuile-comptable .tuile-texte { flex: 0 0 28%; }
}
.comptable { padding: 8px 6% 24px; }   /* le socle du Mac déborde de 8 % de chaque côté */
.comptable .appareil-mac { width: 100%; }
/* l'outillage : trois fiches en pile, l'outil expiré décalé */
.outils { flex-direction: column; align-items: stretch; }
.outil { width: 84%; }
.outil-1 { align-self: flex-start; transform: rotate(-1.2deg); }
.outil-2 { align-self: flex-end; z-index: 2; margin-top: -2%; transform: rotate(1deg); }
.outil-3 { align-self: flex-start; margin-top: -2%; transform: rotate(-.6deg); }
@media (max-width: 720px) {
  .sortie .appareil-fenetre { width: 100%; }
  .sortie .form1 { top: auto; bottom: -10px; width: 36%; }
  .etiquettes { min-height: 230px; }
  .occasion-pose { width: 72%; }
  .occasion-entree { top: auto; bottom: 8%; width: 82%; transform: none; }
  .comptable { padding: 0 6% 12px; }
  .outil { width: 92%; }
}

/* ----------------------------------------------------------------- page Offres : qui achète quoi, en une lecture
   Trois tuiles côte à côte, le nom de l'offre en Bodoni comme les titres de l'accueil, et en bas le morceau d'accueil
   que l'offre est seule à avoir, vu de près ; les trois rôles dessinés en HTML ; la liaison sur le bleu nuit, le même
   bon vu des deux côtés et ses étapes. */
.tuile-offre { gap: 26px; }
.tuile-offre .tuile-texte { display: flex; flex-direction: column; gap: 18px; }
.offre-nom.offre-nom { margin: 0; font: 400 clamp(36px, 3.2vw, 46px)/1 var(--affiche); letter-spacing: -.015em; color: var(--marque); }
.tuile-offre .offre-phrase { margin: -4px 0 0; max-width: 30ch; font: 500 18px/1.4 var(--sans); letter-spacing: -.01em; color: var(--encre); text-wrap: balance; }
.offre-details { display: grid; gap: 14px; margin: 0; }
.offre-details dt { margin: 0 0 5px; font: 400 12px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ombre); }
.offre-details dd { margin: 0; font-size: 15px; line-height: 1.5; color: #4a545d; }
.offre-details ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.offre-details li { position: relative; padding-left: 18px; }
.offre-details li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--marque-vif); }
.tuile-offre .offre-liens { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 2px 0 0; }
.offre-liens a { padding: 10px 0; margin: -10px 0; font: 500 15px/1.3 var(--sans); color: var(--marque); text-decoration: none; }  /* 40 px au doigt, sans bouger la ligne */
.offre-liens a i { font-style: normal; display: inline-block; transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) { .offre-liens a:hover i { transform: translateX(3px); } }
.offre-liens a:focus-visible { outline: 2px solid var(--marque-vif); outline-offset: 3px; border-radius: 4px; }
/* le morceau d'accueil de l'offre, à sa taille de lecture, posé au bas de la tuile */
.offre-loupe { margin-top: auto; }
.offre-loupe .loupe { position: relative; width: 100%; }
.offres-aussi {
  grid-column: span 12; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; margin: 0; padding: 4px 6px 8px;
  font-size: 15px; line-height: 1.45; color: #4a545d;
}
.offres-aussi > span { font: 400 12px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ombre); }
.offres-aussi a { color: inherit; text-decoration: none; }
.offres-aussi a b { margin-right: 6px; font-weight: 600; color: var(--marque); }
.offres-aussi a i { font-style: normal; color: var(--marque); }
.offres-aussi a:hover { color: var(--encre); }
/* les trois rôles : le propriétaire, la gestion, l'atelier ; le bon et le compte rendu entre les deux derniers */
.roles {
  display: grid; align-items: center; margin-top: 6px;
  grid-template-columns: minmax(0, 1fr) clamp(96px, 9vw, 128px) minmax(0, 1fr) clamp(150px, 13vw, 190px) minmax(0, 1fr);
  grid-template-areas: "proprio contrat gestion liaison atelier" ". . integre integre integre";
}
.role { display: grid; gap: 6px; align-content: start; padding: 20px 20px 18px; border-radius: 20px; background: #fff; border: 1px solid rgba(15, 23, 42, .07); box-shadow: 0 18px 34px -28px rgba(15, 23, 42, .45); }
.role-proprietaire { grid-area: proprio; }
.role-gestion { grid-area: gestion; }
.role-atelier { grid-area: atelier; }
.role-ref { font: 400 12px/1.3 var(--mono); letter-spacing: .04em; color: var(--ombre); }
.role b { font: 600 18px/1.25 var(--sans); letter-spacing: -.015em; color: var(--marque); }
.role > span:not(.role-ref) { font-size: 14.5px; line-height: 1.45; color: #4a545d; }
.role em { justify-self: start; margin-top: 8px; padding: 5px 10px; border-radius: 999px; font: 600 12.5px/1 var(--sans); font-style: normal; color: var(--marque); background: rgba(168, 192, 228, .38); }
.role-proprietaire em { color: var(--ombre); background: rgba(207, 202, 194, .45); }
.role-lien { position: relative; display: grid; gap: 30px; align-content: center; padding: 0 10px; font: 500 12.5px/1.25 var(--sans); text-align: center; color: var(--marque); }
.role-lien-contrat { grid-area: contrat; color: var(--ombre); }
.role-lien-liaison { grid-area: liaison; }
.role-lien span { position: relative; display: block; padding-bottom: 9px; }
.role-lien span::after {                     /* le trait, et sa pointe du côté où il va */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor;
  -webkit-mask: linear-gradient(90deg, #000 calc(100% - 1px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 1px), transparent);
}
.role-lien span::before { content: ""; position: absolute; right: -1px; bottom: -3.5px; width: 8px; height: 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.role-lien .retour::before { right: auto; left: -1px; transform: rotate(-135deg); }
.role-integre { grid-area: integre; position: relative; height: 54px; margin: 0 8px; border: 1.5px solid var(--marque-clair); border-top: 0; border-radius: 0 0 18px 18px; transform: translateY(-14px); }
.role-integre i { font-style: normal; }
.role-integre span {
  position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); white-space: nowrap; padding: 7px 14px; border-radius: 999px;
  font: 600 12.5px/1 var(--sans); color: #fff; background: var(--marque);
}
.tuile-roles { padding-bottom: clamp(44px, 4vw, 60px); }
/* la liaison : le bleu nuit de l'arrivée, le titre en Bodoni ; à droite le même bon en tête de son écran, chez le CAMO
   et chez l'atelier ; dessous, ses étapes qui s'allument à l'arrivée */
.tuile-liaison {
  color: #fff; border: 0; gap: 34px;
  background: radial-gradient(ellipse 70% 90% at 85% 0%, rgba(42, 77, 128, .55) 0%, rgba(42, 77, 128, 0) 60%), linear-gradient(160deg, #1b3157 0%, #12223d 55%, #0b1424 100%);
  box-shadow: 0 40px 70px -46px rgba(11, 20, 36, .8);
}
.tuile-liaison .tuile-texte { max-width: 760px; }
.tuile-liaison .tuile-texte h2 { margin: 0 0 14px; font: 400 clamp(30px, 3vw, 44px)/1.08 var(--affiche); letter-spacing: -.015em; color: #fff; }
.tuile-liaison .tuile-texte p { max-width: 62ch; font-size: 17px; color: rgba(255, 255, 255, .8); }
.liaison-haut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 28px clamp(32px, 4vw, 64px); align-items: center; }
.liaison-preuve { display: grid; gap: 18px; }
.liaison-preuve figure { display: grid; gap: 8px; margin: 0; }
.liaison-preuve figcaption { font: 400 12px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--marque-clair); }
.liaison-preuve .loupe { position: relative; width: 100%; }
.liaison-preuve .loupe img { border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 26px 46px -26px rgba(0, 0, 0, .7); }
.tuile-liaison .liaison-suite { margin: 16px 0 0; }
.liaison-suite a { display: inline-block; padding: 10px 0; margin: -10px 0; font: 500 16px/1.3 var(--sans); color: #fff; text-decoration: none; }
.liaison-suite a i { font-style: normal; display: inline-block; transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) { .liaison-suite a:hover i { transform: translateX(3px); } }
.liaison-suite a:focus-visible { outline: 2px solid var(--marque-clair); outline-offset: 3px; border-radius: 4px; }
.tuile-liaison .liaison-gratuite { display: block; margin: 0 0 14px; font: 400 12px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--marque-clair); }
.liaison-etapes { position: relative; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.liaison-etapes::before { content: ""; position: absolute; left: calc(100% / (2 * var(--n, 6))); right: calc(100% / (2 * var(--n, 6))); top: 15px; height: 1.5px; background: rgba(255, 255, 255, .16); }
.liaison-etapes li { position: relative; display: grid; justify-items: center; gap: 4px; padding: 0 4px; text-align: center; counter-increment: etape; }
.liaison-etapes li::before {
  content: counter(etape); position: relative; display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 10px; border-radius: 50%;
  font: 600 12.5px/1 var(--sans); color: rgba(255, 255, 255, .7); background: #12223d; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22);
}
.liaison-etapes b { font: 600 14px/1.25 var(--sans); color: #fff; }
.liaison-etapes small { font: 400 12px/1.3 var(--mono); letter-spacing: .03em; color: rgba(255, 255, 255, .72); }
.liaison-etapes .qui-atelier small { color: var(--marque-clair); }
@media (prefers-reduced-motion: no-preference) {
  .liaison-etapes li::before { transition: background .5s cubic-bezier(.23, 1, .32, 1) calc(var(--i) * 110ms), color .5s ease calc(var(--i) * 110ms), box-shadow .5s ease calc(var(--i) * 110ms); }
}
.liaison-etapes.vu li::before { color: var(--marque); background: #fff; box-shadow: inset 0 0 0 1.5px #fff, 0 0 0 5px rgba(168, 192, 228, .18); }
.liaison-etapes.vu .qui-atelier::before { background: var(--marque-clair); box-shadow: inset 0 0 0 1.5px var(--marque-clair), 0 0 0 5px rgba(168, 192, 228, .18); }
/* avec chaque offre : le programme d'entretien, la reprise, le prix, en colonnes (le gabarit « Passer à HangarOS ») */
.tuile-avec .route { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .roles {
    grid-template-columns: 26px minmax(0, 1fr); row-gap: 0;
    grid-template-areas: ". proprio" ". contrat" "integre gestion" "integre liaison" "integre atelier";
  }
  .role-lien { gap: 10px; justify-items: center; padding: 14px 0; }
  .role-lien span { display: inline-block; padding: 0 0 0 0; }
  .role-lien span::after, .role-lien span::before { display: none; }
  .role-lien-contrat span::before, .role-lien .aller::before { display: block; content: "↓"; position: static; width: auto; height: auto; border: 0; transform: none; margin-bottom: 2px; }
  .role-lien .retour::before { display: block; content: "↑"; position: static; width: auto; height: auto; border: 0; transform: none; margin-bottom: 2px; }
  .role-lien-liaison { grid-template-columns: 1fr 1fr; }
  .role-integre { height: auto; margin: 12px 0; border: 1.5px solid var(--marque-clair); border-right: 0; border-radius: 16px 0 0 16px; transform: none; }
  .role-integre span { left: -12px; bottom: 50%; transform: translateY(50%) rotate(180deg); writing-mode: vertical-rl; padding: 12px 6px; }
  .role-integre i { display: none; }
  .liaison-haut { grid-template-columns: minmax(0, 1fr); }
  .liaison-preuve { max-width: 560px; }
  .liaison-etapes { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .liaison-etapes::before { left: 15px; right: auto; top: 16px; bottom: 16px; width: 1.5px; height: auto; }
  .liaison-etapes li { grid-template-columns: 32px minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 14px; text-align: left; }
  .liaison-etapes li::before { grid-row: span 2; margin: 0; }
}
@media (max-width: 720px) {
  .offres-aussi { flex-direction: column; gap: 8px; }
  .tuile-avec .route { grid-template-columns: minmax(0, 1fr); }
}

/* ----------------------------------------------------------------- page La liaison : le CAMO et son atelier, sur le même bon
   Le schéma de ce qui circule (le CAMO à gauche, l'atelier à droite, les échanges entre les deux, le contrat dessous),
   les tuiles de la liaison sur le gabarit des pages métier, et l'appel double : inviter son atelier, inviter son CAMO. */
.bouton-contour {
  font: 500 16px/1 var(--sans); text-decoration: none; padding: 16px 25px; border-radius: 999px;
  color: var(--marque); box-shadow: inset 0 0 0 1.5px rgba(24, 45, 76, .35); transition: box-shadow .2s ease, background .2s ease;
}
.bouton-contour:hover { background: rgba(24, 45, 76, .06); box-shadow: inset 0 0 0 1.5px var(--marque); }
.bouton-contour-clair {
  font: 500 16px/1 var(--sans); text-decoration: none; padding: 16px 25px; border-radius: 999px;
  color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); transition: background .2s ease;
}
.bouton-contour-clair:hover { background: rgba(255, 255, 255, .1); }
.bouton-contour:focus-visible, .bouton-contour-clair:focus-visible { outline: 2px solid var(--marque-vif); outline-offset: 3px; }
.tuile-liaison .page-actions { margin-top: 0; }

.schema-liaison {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "camo flux atelier" ". contrat .";
  gap: 18px 24px; align-items: center;
}
.cote { display: grid; gap: 4px; padding: 22px 22px 20px; border-radius: 20px; background: #fff; border: 1px solid rgba(15, 23, 42, .07); box-shadow: 0 18px 34px -28px rgba(15, 23, 42, .45); }
.cote-camo { grid-area: camo; }
.cote-atelier { grid-area: atelier; }
.cote b { font: 400 30px/1.05 var(--affiche); letter-spacing: -.01em; color: var(--marque); }
.cote span { font: 600 12.5px/1 var(--sans); color: var(--marque); justify-self: start; margin-top: 8px; padding: 5px 10px; border-radius: 999px; background: rgba(168, 192, 228, .38); }
.cote em { margin-top: 10px; font: 400 11px/1.3 var(--mono); font-style: normal; letter-spacing: .04em; color: var(--ombre); }
.flux { grid-area: flux; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.flux li {
  position: relative; display: grid; gap: 2px; padding: 10px 16px; border-radius: 12px; background: rgba(168, 192, 228, .16);
  border: 1px solid rgba(42, 77, 128, .14); text-align: center;
}
.flux b { font: 600 14px/1.25 var(--sans); color: var(--marque); }
.flux small { font-size: 12.5px; line-height: 1.35; color: #4a545d; }
.flux li::before, .flux li::after { position: absolute; top: 50%; margin-top: -9px; font: 500 15px/18px var(--sans); color: var(--marque-vif); }
.flux .aller::after { content: "→"; right: 10px; }
.flux .retour::before { content: "←"; left: 10px; }
.flux .deux::before { content: "←"; left: 10px; }
.flux .deux::after { content: "→"; right: 10px; }
.contrat-liaison {
  grid-area: contrat; margin: 0; padding: 12px 18px; border-radius: 999px; text-align: center;
  font: 400 12px/1.4 var(--mono); letter-spacing: .03em; color: rgba(255, 255, 255, .78); background: var(--marque);
}
.contrat-liaison b { margin-right: 10px; font: 600 13px/1 var(--sans); letter-spacing: 0; color: #fff; }
/* inviter : l'étape Destinataire du bon, et la fenêtre de la proposition signée par-dessus */
.scene-inviter { display: block; min-height: 0; padding: 0 0 64px; }
.scene-inviter .appareil-fenetre { width: 86%; }
.scene-inviter .loupe-1 { right: 0; bottom: 0; width: 50%; }
/* le contrat, puis ses deux signatures qui le chevauchent ; l'avion lié, juste sous le texte */
.scene-contrat, .scene-avion-lie { flex-direction: column; align-items: stretch; justify-content: flex-start; }
.scene-contrat .loupe, .scene-avion-lie .loupe { position: relative; }
.scene-contrat .loupe-1, .scene-avion-lie .loupe-1 { width: 100%; }
.scene-contrat .loupe-2 { z-index: 4; width: 92%; margin: -48px 0 0 8%; }
/* ce que chacun voit : l'échéancier chez l'atelier, la règle en loupe, les lectures tracées chez le CAMO */
.scene-cloisonnement { display: block; min-height: 0; padding: 0 0 56px; }
.scene-cloisonnement .appareil-fenetre { position: relative; z-index: 1; width: 84%; }
.scene-cloisonnement .loupe-1 { right: 0; top: 22%; width: 48%; }
.scene-cloisonnement .loupe-2 { left: 6%; bottom: 0; width: 50%; }
.scene-accords-liaison { display: block; min-height: 0; padding: 0 0 40px; }
/* les accords : le bon chez le CAMO, sa décision à gauche ; la tablette de l'atelier posée sur le côté du bon */
.scene-accords-liaison .appareil-fenetre { width: 74%; }
.scene-accords-liaison .appareil-ipad { position: absolute; right: 0; bottom: 0; z-index: 2; width: 46%; }
@media (max-width: 720px) {
  .scene-inviter .appareil-fenetre, .scene-cloisonnement .appareil-fenetre { width: 100%; }
  .scene-inviter .loupe-1 { width: 64%; }
  .scene-cloisonnement .loupe-1 { position: relative; top: auto; right: auto; width: 100%; margin-top: 12px; }
  .scene-cloisonnement .loupe-2 { position: relative; left: auto; bottom: auto; width: 100%; margin-top: 12px; }
  .scene-cloisonnement { padding-bottom: 0; }
}
@media (max-width: 1024px) {
  .schema-liaison { grid-template-columns: minmax(0, 1fr); grid-template-areas: "camo" "flux" "atelier" "contrat"; }
  .contrat-liaison { border-radius: 16px; }
  .flux .aller::after { content: "↓"; }
  .flux .retour::before { content: "↑"; }
  .flux .deux::before { content: "↑"; }
  .flux .deux::after { content: "↓"; }
}

/* ----------------------------------------------------------------- page Propriétaires : le gabarit des Ateliers
   L'espace client du propriétaire, surtout sur téléphone. Les notifications sont redessinées en HTML avec les textes
   exacts de l'application ; les cartes de l'espace sont posées en loupes. */
.trio-proprietaire .appareil-mac { top: 4%; right: 8%; width: 86%; }
.trio-proprietaire .appareil-iphone { right: 0; bottom: 0; }
/* son avion : la fiche et le Kardex, deux téléphones côte à côte */
.deux-iphones { gap: clamp(20px, 4vw, 64px); align-items: flex-start; padding: 6px 0 4px; }
.deux-iphones .appareil-iphone { --l: clamp(200px, 19vw, 270px); }
.deux-iphones .appareil-iphone:last-child { margin-top: 64px; }
/* les heures : les déclarations au fond, le téléphone devant */
.scene-heures { justify-content: flex-end; align-items: flex-end; min-height: 520px; }
.scene-heures .declarations { left: 0; top: 4%; z-index: 1; width: 82%; }
.scene-heures .appareil-iphone { position: relative; z-index: 2; margin-right: 4%; --l: clamp(190px, 16vw, 236px); }
/* prévenu à temps : les notifications empilées */
.notifs { flex-direction: column; align-items: stretch; justify-content: center; gap: 12px; }
.notif-carte {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 18px;
  background: rgba(255, 255, 255, .92); border: 1px solid rgba(15, 23, 42, .07); box-shadow: 0 24px 44px -26px rgba(15, 23, 42, .5);
}
.notif-carte:nth-child(2) { margin: 0 -10px 0 18px; }
.notif-carte:nth-child(3) { margin-left: 36px; opacity: .82; }
.notif-calendrier { color: #4f46e5; background: #e0e7ff; }
.notif-devis { color: #0369a1; background: #e0f2fe; }
/* le programme d'entretien : le Form AMP imprimé derrière, le document du PE de l'espace devant */
.scene-pe-proprietaire { display: block; min-height: 0; padding: 34px 0 40px; }
.scene-pe-proprietaire .papier-amp { left: auto; right: 2%; top: 0; width: 30%; transform: rotate(4deg); }
.scene-pe-proprietaire .carte-pe { position: relative; z-index: 2; width: 82%; }
.scene-pe-proprietaire .carte-pe img { border-radius: 14px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .07), 0 34px 60px -30px rgba(15, 23, 42, .5); }
/* les devis et les factures : le devis, son acceptation, la facture */
.devis-factures { min-height: 420px; }
.devis-factures .papier-devis { left: 0; top: 0; width: 46%; }
.devis-factures .papier-facture { right: 0; bottom: 0; width: 44%; }
.devis-factures .accepter { left: 50%; top: 50%; width: 74%; transform: translate(-50%, -50%); }
.devis-factures .accepter img { box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 30px 50px -24px rgba(15, 23, 42, .55); }
@media (max-width: 720px) {
  .deux-iphones .appareil-iphone { --l: 42vw; }
  .deux-iphones .appareil-iphone:last-child { margin-top: 40px; }
  .scene-heures { min-height: 0; padding-top: 30%; }
  .scene-heures .declarations { width: 100%; }
  .notif-carte:nth-child(n) { margin: 0; }
  .scene-pe-proprietaire .papier-amp { width: 40%; }
  .scene-pe-proprietaire .carte-pe { width: 100%; margin-top: 20%; }
  .devis-factures { min-height: 320px; }
  .devis-factures .papier-devis { display: block; width: 64%; }
  .devis-factures .papier-facture { width: 58%; bottom: 0; }
  .devis-factures .accepter { width: 100%; }
}

/* ----------------------------------------------------------------- page Navigabilité : même grille, fenêtres et loupes
   Mêmes tuiles que la page Ateliers. Les « loupes » sont des morceaux de l'interface vus de près (boutons, filtres,
   menu), posés sur la fenêtre d'où ils viennent ; le bon de lancement est redessiné pour rester lisible. */
.tete-seule { grid-template-columns: minmax(0, 1fr); }
.tete-seule .atelier-tete-texte { max-width: 820px; }
@media (min-width: 1025px) {
  .tuile-cote { flex-direction: row; align-items: center; gap: 44px; }
  .tuile-cote .tuile-texte { flex: 0 0 27%; }
  .tuile-cote.inverse { flex-direction: row-reverse; }
}
.loupe { position: absolute; z-index: 3; display: block; margin: 0; }
.loupe img {
  display: block; width: 100%; height: auto; border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 26px 46px -18px rgba(15, 23, 42, .5);
}
.solo .appareil-fenetre { width: 100%; }
/* le Kardex : le tableau, avec l'état, le filtre d'une colonne et les filtres en loupe */
.scene-kardex { display: block; min-height: 0; padding: 44px 0 50px; }
.scene-kardex .appareil-fenetre { position: relative; z-index: 1; width: 84%; }
.scene-kardex .loupe-1 { left: 3%; top: 0; width: 48%; }
.scene-kardex .loupe-2 { right: 0; top: 16%; width: 27%; }
.scene-kardex .loupe-3 { left: 12%; bottom: 0; width: 62%; }
/* une ligne du Kardex : sa fiche, la fenêtre « Dévier les potentiels », la trace de la déviation */
.scene-lignes { display: block; min-height: 400px; padding: 0 0 20px; }
.scene-lignes .loupe { position: absolute; }
.scene-lignes .loupe img { border-radius: 14px; }
.scene-lignes .panneau-1 { position: relative; left: 0; top: 0; width: 66%; margin-bottom: 120px; }
.scene-lignes .panneau-2 { right: 0; top: 6%; z-index: 4; width: 42%; }
.scene-lignes .panneau-3 { left: 6%; bottom: 0; z-index: 5; width: 64%; }
/* les consignes */
.scene-consignes { display: block; min-height: 0; padding: 30px 0 44px; }
.scene-consignes .appareil-fenetre { width: 94%; }
.scene-consignes .loupe-1 { right: 0; top: 0; width: 58%; }
.scene-consignes .loupe-2 { left: 6%; bottom: 10px; width: 40%; }
/* le programme d'entretien : les étapes à gauche (comme les fiches d'essai), l'écran ou le Form AMP imprimé à droite */
@media (min-width: 1025px) {
  .tuile-pe { flex-direction: row; align-items: stretch; gap: 48px; }
  .pe-liste { flex: 0 0 34%; }
}
.pe-liste { display: flex; flex-direction: column; gap: 22px; }
.pe-ecrans {
  position: relative; flex: 1; min-height: 600px; border-radius: 24px; overflow: hidden;
  background: radial-gradient(ellipse 80% 70% at 30% 20%, #eef2f8 0%, #e2e8f1 60%, #d9e0ea 100%);
}
.pe-ecran { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .7s ease, transform 1s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .7s; pointer-events: none; }
.pe-ecran.active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .7s ease, transform 1s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.pe-ecran:focus-visible { outline: none; }   /* comme les fiches d'essai : le cadre du clavier autour de l'écran */
.pe-ecrans:has(> :focus-visible) { outline: 2px solid var(--marque-vif); outline-offset: 4px; }
.pe-ecran > .appareil-fenetre { position: absolute; left: 6%; top: 7%; width: 88%; }
.pe-ecran[data-pe="1"] > .appareil-fenetre { width: 78%; }
.pe-validation { right: 4%; bottom: 5%; width: 40%; }
.pe-validation img { border-radius: 14px; }
.pe-papiers .papier { position: absolute; top: 9%; width: 44%; }
.pe-papiers .papier-amp-3 { left: 52%; transform: rotate(6deg); }
.pe-papiers .papier-amp-2 { left: 30%; transform: rotate(-1deg); z-index: 1; }
.pe-papiers .papier-amp-1 { left: 7%; transform: rotate(-6deg); z-index: 2; }
.pe-annexe .papier-amp-2 { left: 26%; width: 52%; top: 6%; transform: none; z-index: 3; }
.pe-annexe .papier-amp-1 { left: 4%; transform: rotate(-7deg); }
.pe-annexe .papier-amp-3 { left: 54%; transform: rotate(7deg); }
.papier-revue { right: 5%; bottom: -26%; width: 36%; transform: rotate(4deg); z-index: 2; }
/* les visites : la prochaine visite de l'avion devant, le planning de la flotte derrière, « à appeler » en loupe */
.scene-visites { display: block; min-height: 0; padding: 0 0 60px; }
.scene-visites .fenetre-fond { position: absolute; right: 0; top: 0; width: 62%; }
.scene-visites .fenetre-avant { position: relative; z-index: 1; width: 78%; margin-top: 22%; }
.scene-visites .loupe-1 { right: 0; bottom: 0; width: 62%; }
/* le bon de lancement : sa page chez le CAMO, son journal en loupe */
.scene-bon { display: block; min-height: 0; padding: 0 0 40px; }
.scene-bon .appareil-fenetre { width: 84%; }
.scene-bon .loupe-1 { right: 0; top: 12%; width: 34%; }
/* les accords : le bon et la demande de l'atelier, la décision signée en loupe */
.scene-accord { display: block; min-height: 0; padding: 0 0 72px; }
.scene-accord .appareil-fenetre { width: 80%; }
.scene-accord .loupe-1 { right: 0; top: 14%; width: 44%; }
/* l'éligibilité : les deux réponses de HangarOS avant l'envoi (le mécanicien indépendant, la pilote-propriétaire), en
   grand, l'une sous l'autre et juste sous le texte */
.scene-eligibilite { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 18px; }
.scene-eligibilite .loupe { position: relative; }
.scene-eligibilite .loupe-2 { margin-left: 8%; }
/* le compte rendu : sa page chez le CAMO, « Intégrer au dossier » en loupe */
.scene-compte-rendu { display: block; min-height: 0; padding: 0 0 60px; }
.scene-compte-rendu .appareil-fenetre { width: 86%; }
.scene-compte-rendu .loupe-1 { right: 0; bottom: 0; width: 66%; }
/* le CEN : la prorogation proposée, sa date et ce qu'elle donne, puis refusée */
.scene-cen { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 18px; }
.scene-cen .loupe { position: relative; }
.scene-cen .loupe-date { margin-left: 4%; }
.scene-cen .loupe-2 { margin-left: 8%; }
/* les propriétaires : l'ordinateur et le téléphone */
.scene-espace { padding-bottom: 70px; }
/* le tableau de bord en mode édition, et le planning des visites par-dessus */
.scene-tableau { display: block; min-height: 0; padding: 0 0 70px; }
.scene-tableau .fenetre-avant { width: 66%; }
.scene-tableau .panneau-decider { right: 0; top: 10%; z-index: 3; width: 42%; }
/* la flotte ; passer à HangarOS, en colonne sous le texte */
.route-colonne { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 26px; }
@media (max-width: 720px) {
  .scene-kardex { padding: 34px 0 40px; }
  .scene-kardex .appareil-fenetre, .scene-consignes .appareil-fenetre, .scene-bon .appareil-fenetre, .scene-accord .appareil-fenetre, .scene-compte-rendu .appareil-fenetre { width: 100%; }
  .scene-kardex .loupe-3 { display: none; }
  .scene-kardex .loupe-1 { left: 0; top: 0; width: 78%; }
  .scene-kardex .loupe-2 { width: 40%; top: auto; bottom: 0; }
  .scene-lignes { min-height: 0; }
  .scene-lignes .panneau-1 { width: 100%; }
  .scene-lignes .panneau-2 { width: 58%; top: 30%; }
  .scene-lignes .panneau-3 { width: 88%; }
  .scene-bon .loupe-1 { width: 46%; top: auto; bottom: 0; }
  .scene-accord .loupe-1 { width: 70%; }
  .scene-compte-rendu .loupe-1 { width: 88%; }
  .scene-consignes .loupe-1 { width: 82%; }
  .scene-consignes .loupe-2 { width: 58%; left: auto; right: 0; }
  .scene-tableau .fenetre-avant { width: 84%; }
  .scene-tableau .panneau-decider { width: 56%; }
  .pe-ecrans { min-height: 340px; }
  .pe-ecran > .appareil-fenetre, .pe-ecran[data-pe="1"] > .appareil-fenetre { left: 4%; width: 92%; }
  .pe-validation { width: 52%; }
  .scene-visites .fenetre-fond { width: 80%; }
  .scene-visites .fenetre-avant { width: 100%; margin-top: 34%; }
  .scene-visites .loupe-1 { width: 94%; }
}

/* ----------------------------------------------------------------- page Aéroclubs : le bureau du club et l'appli des pilotes */
.scene-planning { display: block; min-height: 0; padding: 0 0 40px; }
.scene-planning .appareil-fenetre { position: relative; z-index: 1; width: 86%; }
.scene-planning .loupe-1 { right: 0; top: 14%; width: 23%; }
.paire-iphone { gap: 4%; padding: 6px 0 0; }
.paire-iphone .appareil-iphone { --l: clamp(150px, 13vw, 210px); }
.paire-iphone .appareil-iphone:last-child { margin-top: 48px; }
.paire-decalee { justify-content: center; }
.paire-decalee .appareil-iphone:first-child { transform: rotate(-4deg); }
.paire-decalee .appareil-iphone:last-child { margin-left: -18%; transform: rotate(3deg); z-index: 1; }
.scene-comptes { display: block; min-height: 0; padding: 0 0 30px; }
.scene-comptes .fenetre-fond { position: absolute; right: 0; top: 0; width: 58%; }
.scene-comptes .fenetre-avant { position: relative; z-index: 1; width: 76%; margin-top: 18%; }
.scene-anomalies { display: block; min-height: 0; padding: 0 0 96px; }
.scene-anomalies .appareil-fenetre { width: 100%; }
.scene-anomalies .loupe-1 { right: 0; bottom: 0; width: 82%; }
@media (max-width: 720px) {
  .scene-planning .appareil-fenetre, .scene-comptes .fenetre-avant { width: 100%; }
  .scene-planning .loupe-1 { width: 36%; top: auto; bottom: 0; }
  .scene-planning { padding-bottom: 90px; }
  .scene-comptes .fenetre-fond { width: 78%; }
  .scene-comptes .fenetre-avant { margin-top: 30%; }
  .paire-iphone .appareil-iphone { --l: 132px; }
  .scene-anomalies .loupe-1 { width: 96%; }
}

@media (max-width: 1024px) {
  .atelier-tete { grid-template-columns: 1fr; }
  .magasin { padding-bottom: 60px; }
}
@media (max-width: 720px) {
  .bento { gap: 14px; }
  .tuile { border-radius: 24px; padding: 22px 18px; }
  .scene-avion { min-height: 300px; }
  .avion-3d { width: 100%; height: 280px; }
  .scene-avion .appareil-iphone { display: none; }   /* sur téléphone, l'avion prend toute la tuile */
  .duo .appareil-iphone { --l: 104px; }
  .magasin .appareil-fenetre, .duo .appareil-fenetre { width: 100%; }
  .magasin { padding-bottom: 90px; }
  .magasin .appareil-iphone { left: auto; right: 0; --l: 104px; }
  .etiquette { width: 46%; bottom: -6px; }
  .form1 { width: 34%; top: -6px; }
  .form1 figcaption { display: none; }
  .route { grid-template-columns: 1fr; }
  .notif-flottante { right: 0; width: 86%; top: -10px; }
  .facturation .appareil-fenetre { width: 100%; }
  .papier-devis { display: none; }
  .papier-facture { width: 44%; bottom: -20px; }
  .fiche-saisie { width: 80%; }
  .fiches-photos { min-height: 310px; }
  .eventail { min-height: 300px; }
  .feuille { width: 44%; }
  .feuille-crs { width: 72%; }
}
@media (prefers-reduced-motion: reduce) {
  .feuille, .feuille-crs { transition: none; }
}

.bandeau-demo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
  margin: clamp(24px, 5vh, 56px) 0 clamp(48px, 9vh, 96px); padding: clamp(28px, 5vw, 52px);
  border-radius: 22px; background: var(--marque); color: var(--chaux);
  box-shadow: 0 40px 90px -40px rgba(24, 45, 76, .8);
}
.bandeau-demo h2 { margin: 0 0 8px; font: 500 clamp(26px, 3vw, 40px)/1.05 var(--sans); letter-spacing: -.035em; }
.bandeau-demo p { margin: 0; color: var(--marque-clair); max-width: 52ch; }
/* téléphone : un libellé long (« Proposer HangarOS à mon atelier ») tient sur une ligne dès 375 px ; plus étroit, il se
   replie en deux lignes égales, sans changer la hauteur d'un bouton d'une ligne */
@media (max-width: 480px) {
  .bandeau-demo { padding-inline: 22px; }
  .bandeau-demo .bouton, .page-actions .bouton-plein { padding: 15px 20px; line-height: 1.25; text-align: center; text-wrap: balance; }
}

/* écrans moyens : les métiers défilent au doigt, une carte chacun */
@media (max-width: 900px) {
  .metiers { padding-right: 0; }
  .metiers-tete { padding-right: var(--marge); }
  .metiers-corps { display: block; }
  .metiers-liste { display: none; }
  .metiers-scene {
    height: auto; display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 420px); gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-right: var(--marge); scrollbar-width: none;
  }
  .metiers-scene::-webkit-scrollbar { display: none; }
  .scene-metier, .scene-metier.actif { position: relative; inset: auto; height: 480px; opacity: 1; visibility: visible; scroll-snap-align: start; border-radius: 22px; }
  .scene-metier .scene-ecran, .scene-metier.actif .scene-ecran { opacity: 1; transform: none; }
  .scene-photo, .scene-metier.actif .scene-photo { transform: none; }
  .scene-metier::after { background: linear-gradient(180deg, rgba(8, 13, 24, .78) 0%, rgba(8, 13, 24, .3) 34%, rgba(8, 13, 24, 0) 56%); }
  .scene-legende { position: absolute; left: 20px; right: 20px; top: 20px; display: grid; gap: 8px; }
  .scene-legende .metier-chapeau { margin: 0; color: rgba(255, 255, 255, .78); }
  .scene-legende b { font: 500 22px/1.15 var(--sans); letter-spacing: -.025em; text-wrap: balance; }
  .scene-ipad .scene-ecran { left: 8%; width: 104%; bottom: -6%; }
  .scene-iphone .scene-ecran { --l: 190px; bottom: -20%; }
}

/* tablettes : la carte prend la largeur du bas, les flèches montent en haut à droite */
@media (max-width: 1099px) {
  .panneau { width: calc(100% - 2 * var(--marge)); }
  .commandes { top: calc(84px + env(safe-area-inset-top)); bottom: auto; }
  .aide, .rail { display: none; }
}

/* le menu des cibles ne tient plus sur une ligne avec la démo : il passe dans le bouton « Menu », comme sur téléphone
   (sous 1 000 px depuis l'entrée « Offres » : les liens passaient sur deux lignes) */
@media (max-width: 1023px) {
  .menu { display: none; }
  .menu-mobile { display: block; }
}

/* ----------------------------------------------------------------- petits écrans */
@media (max-width: 720px) {
  .rail { display: none; }
  .voile::after { background: linear-gradient(0deg, rgba(29, 34, 38, .9) 0%, rgba(29, 34, 38, .6) 40%, rgba(29, 34, 38, 0) 65%); }
  /* la carte prend la largeur : le texte, puis l'appareil dessous, coupé par le bas de la carte */
  .panneau, .panneau.carte-seule {
    left: 12px; right: 12px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom) + var(--cache-bas));
    grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: 22px;
  }
  .carte-texte, .carte-seule .carte-texte { padding: 18px 20px 14px; }
  .panneau .repere { margin-bottom: 10px; }
  .panneau h2 { font-size: 21px; }
  .carte-seule h2 { font-size: 28px; }
  .panneau p.texte { font-size: 14.5px; }
  .panneau .suite { margin-top: 10px; }
  .carte-visuel { height: clamp(130px, 24svh, 210px); }
  .carte-visuel .appareil { top: 4px; left: 20px; }
  .carte-fenetre .appareil-fenetre, .carte-ipad .appareil-ipad { width: 118%; }
  .carte-iphone .appareil-iphone { --l: 150px; left: calc(50% - var(--l) / 2); }
  .carte-visuel .notif-flottante { right: 14px; bottom: 12px; }
  .carte-eventail .feuille { top: 8px; width: 30%; }
  /* téléphone : le ciel est trop étroit pour le texte ; la photo d'abord, le texte dessous, sur la nuit */
  .fin { --photo-h: 560px; padding-top: 392px; background-position: 0 0, 38% 0, 0 0; }
  .fin-grille { grid-template-columns: 1fr; gap: 22px; min-height: 0; padding-bottom: 72px; }
  .fin h2, .fin-texte, .fin-action { grid-column: 1; grid-row: auto; }
  .demo { padding: 10px 12px; font-size: 13px; }
  .demande-carte { padding: 22px 20px 18px; }
  .texte-legal dl { grid-template-columns: 1fr; gap: 2px; }
  .menu { display: none; }
  .menu-mobile { display: block; }
  .barre { gap: 10px; }
  .demo-long { display: none; }                 /* marque, menu et démo tiennent sur un téléphone */
  .demo-court { display: inline; }
  .accroche-photo { object-position: 84% 50%; }      /* sur téléphone, le R44 et sa servante tiennent dans le cadre */
  .accroche-titre { top: calc(104px + env(safe-area-inset-top)); }
  .accroche h1 { font-size: clamp(34px, 10vw, 46px); }
  .accroche-bas { bottom: calc(28px + env(safe-area-inset-bottom)); gap: 20px; }
  .accroche-actions { flex-direction: column; gap: 18px; }
  /* la visite : les commandes montent en haut à droite, la carte garde le bas ; le doigt glisse pour avancer */
  .commandes { top: calc(76px + env(safe-area-inset-top)); bottom: auto; right: 12px; }
  .fleche { height: 48px; min-width: 48px; }
  .fleche.precedent { width: 48px; }
  .fleche.suivant { padding: 0 12px 0 16px; gap: 10px; }
  .suivant-libelle span { font-size: 14px; }
  .bloc, .bloc.inverse { grid-template-columns: minmax(0, 1fr); }
  .bloc.inverse > .bloc-texte { order: 0; }
  .pied-plan { grid-template-columns: 1fr 1fr; }
  .pied-plan > div { grid-column: 1 / -1; }
  .texte-legal dd { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .panneau, .carte-visuel .appareil, .carte-visuel .notif-flottante { transform: none; }
}

/* ----------------------------------------------------------------- l'accueil : la démo sur les reflets
   Le même soir que l'arrivée, cadré serré sur le tarmac mouillé : les lumières du hangar en traînées dorées. */
.page-accueil .fin {
  padding-top: clamp(120px, 20svh, 220px);
  background:
    linear-gradient(180deg, #0b1424 0%, rgba(11, 20, 36, .5) 22%, rgba(11, 20, 36, .3) 50%, rgba(11, 20, 36, .82) 80%, #0b1424 95%),
    linear-gradient(90deg, rgba(11, 20, 36, .7) 0%, rgba(11, 20, 36, 0) 60%),
    url("images/accueil/crepuscule.avif") 44% 100% / max(220%, 2600px) auto no-repeat,
    #0b1424;
}
.page-accueil .fin-grille { min-height: 0; padding-bottom: clamp(88px, 14svh, 160px); }
@media (max-width: 900px) {
  .fin-garanties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fil-tete, .etape { grid-template-columns: minmax(0, 1fr); }
  .etape { padding-left: 40px; }
  .etape-telephone { height: 176px; }
}
@media (max-width: 720px) {
  /* le titre et sa ligne passent sur le ciel : le voile du haut descend plus bas */
  .accroche::after {
    background: linear-gradient(180deg, rgba(8, 13, 24, .8) 0%, rgba(8, 13, 24, .62) 30%, rgba(8, 13, 24, .3) 46%, rgba(8, 13, 24, 0) 58%, rgba(8, 13, 24, 0) 70%, rgba(8, 13, 24, .7) 100%);
  }
  /* un morceau d'écran garde sa taille de lecture : il se coupe à droite au lieu de rapetisser */
  .etape-loupe { width: 100%; -webkit-mask: linear-gradient(90deg, #000 78%, transparent); mask: linear-gradient(90deg, #000 78%, transparent); }
  .etape-loupe img { width: calc(var(--w, 640px) * .82); max-width: none; }
  .etape-loupe.etape-loupe-courte { width: fit-content; -webkit-mask: none; mask: none; }
  .fin-garanties { grid-column: 1; grid-row: auto; grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
  .page-accueil .fin { padding-top: 120px; background-size: 100% 100%, 100% 100%, auto 120%, auto; background-position: 0 0, 0 0, 46% 100%, 0 0; }
  .page-accueil .fin-grille { padding-bottom: 96px; }
}

/* ----------------------------------------------------------------- le bandeau, le même sur toutes les pages
   Celui de l'accueil : la marque et les liens en blanc, les liens au centre, sans pastille, la démo en contour. Sur
   une photo (accueil, journée), il est transparent ; sur les autres pages, et dès qu'on descend sur l'accueil, il se
   pose sur la nuit, en verre. Seul le menu plein écran du téléphone, une fois ouvert, reste clair (règles :has). */
.barre { color: #fff; }
.barre .marque { color: #fff; }
.barre .marque .fonce { display: none; }
.barre .marque .clair { display: block; }
.barre .menu .menu-racine.menu-racine { background: none; border-color: transparent; box-shadow: none; }
.barre .menu-lien { color: rgba(255, 255, 255, .88); }
.barre .menu-lien:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.barre .menu-lien[aria-current="page"] { color: #fff; box-shadow: none; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 7px; }
.barre .menu-lien:focus-visible { outline-color: #fff; }
.barre .demo, .barre.sombre .demo { background: none; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.barre .demo:hover, .barre.sombre .demo:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.barre .menu-mobile summary, .barre.sombre .menu-mobile summary { color: #fff; border-color: rgba(255, 255, 255, .35); background: rgba(11, 20, 36, .25); }
@media (min-width: 1180px) {
  .barre-gauche { flex: 1; }
  .barre .menu { position: absolute; left: 50%; transform: translateX(-50%); }
}
.barre-accueil { background: linear-gradient(180deg, rgba(8, 13, 24, .42), rgba(8, 13, 24, 0)); }
.barre-pages, .page-texte .barre, .page-accueil .barre.defile, .page-accueil .barre.defile.sombre {
  background: rgba(11, 20, 36, .88); border-bottom: 0; box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}
.page-texte .barre .marque { color: #fff; }
.barre:has(.menu-mobile[open]) .demo { background: var(--marque); color: var(--chaux); box-shadow: none; }