/* ARTLYNXIA — charte IRIS + LILAS + OR (identique à l'app : ui/theme/Color.kt) */
:root {
  --nuit: #1C1650; --iris-fonce: #2A2170; --iris: #5B4BC4; --iris-moyen: #3A2F96;
  --lilas: #8E6BBF; --lilas-clair: #D9C3F0; --lilas-pale: #F4EEFB;
  --or: #E2B53C; --or-pale: #F0E2A8; --or-fonce: #8A6514;
  --texte: #1f1a33; --texte-doux: #4a4560; --fond: #ffffff; --bord: #e4dcf0;
  --rayon: 14px; --largeur: 1160px;
  --ombre: 0 24px 60px rgba(28,22,80,.22);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; }
body {
  margin: 0; font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--texte); background: var(--fond); line-height: 1.6; font-size: 17px; overflow-x: hidden;
}
a { color: var(--iris); }
a:hover { color: var(--iris-fonce); }
img { max-width: 100%; display: block; }
.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 22px; }

/* ---------- En-tête ---------- */
header.site {
  background: rgba(28,22,80,.94); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20;
  border-bottom: 2px solid var(--or);
}
header.site .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marque img { width: 38px; height: 38px; border-radius: 9px; }
.logotype { font-size: 22px; letter-spacing: .5px; white-space: nowrap; }
.logotype .art { font-weight: 300; color: #fff; }
.logotype .lynx { font-weight: 900; color: var(--or); }
.logotype .ia { font-weight: 700; color: var(--lilas-clair); }
.logotype sup { color: #E6D8FF; font-size: .55em; }
nav.principal { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
nav.principal a { color: var(--lilas-clair); text-decoration: none; font-size: 15px; position: relative; }
nav.principal a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--or); transform: scaleX(0); transition: transform .25s; }
nav.principal a:hover { color: #fff; }
nav.principal a:hover::after { transform: scaleX(1); }
nav.principal .nav-cta { border: 1.5px solid var(--or); color: var(--or); padding: 5px 14px; border-radius: 999px; }
nav.principal .nav-cta:hover { background: var(--or); color: var(--nuit); }

/* ---------- Boutons ---------- */
.boutons { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.bouton {
  display: inline-block; padding: 13px 24px; border-radius: 999px; font-weight: 700;
  text-decoration: none; font-size: 16px; border: 2px solid transparent; transition: transform .2s, background .2s, box-shadow .2s;
}
.bouton:hover { transform: translateY(-2px); }
.bouton.or { background: var(--or); color: var(--nuit); box-shadow: 0 8px 24px rgba(226,181,60,.35); }
.bouton.or:hover { background: var(--or-pale); color: var(--nuit); }
.bouton.contour { border-color: var(--lilas-clair); color: #fff; }
.bouton.contour:hover { background: rgba(255,255,255,.1); color: #fff; }
.bouton[aria-disabled="true"] { cursor: default; }
.bouton.grand { font-size: 20px; padding: 16px 32px; }

/* ---------- Héros ---------- */
.heros { position: relative; color: #fff; padding: 80px 0 110px; overflow: hidden; min-height: min(92vh, 880px); display: flex; align-items: center; }
.heros-fond {
  position: absolute; inset: -40px; z-index: 0;
  background: linear-gradient(115deg, rgba(28,22,80,.96) 0%, rgba(42,33,112,.82) 42%, rgba(58,47,150,.25) 100%), url(img/fresque-plantes.jpg) center/cover;
  animation: zoomLent 30s ease-in-out infinite alternate;
}
@keyframes zoomLent { from { transform: scale(1); } to { transform: scale(1.08) translateX(-1.5%); } }
.heros .conteneur { display: grid; grid-template-columns: 1.15fr 1fr; gap: 50px; align-items: center; position: relative; z-index: 1; width: 100%; }
.heros .surtitre { color: var(--or-pale); text-transform: uppercase; letter-spacing: 2.5px; font-size: 13px; font-weight: 600; }
.heros h1 { font-size: 56px; line-height: 1.08; margin: 12px 0 20px; letter-spacing: -.5px; }
.heros h1 em { font-style: normal; color: var(--or); display: block; }
.heros p.chapeau { font-size: 19px; color: var(--lilas-clair); max-width: 560px; }
.pastilles { list-style: none; padding: 0; margin: 26px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.pastilles li { border: 1px solid rgba(217,195,240,.4); border-radius: 999px; padding: 4px 14px; font-size: 14px; color: var(--lilas-clair); background: rgba(255,255,255,.05); }
.pastilles li::before { content: "✓ "; color: var(--or); font-weight: 800; }
.defiler { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 2; width: 26px; height: 42px; border: 2px solid var(--lilas-clair); border-radius: 14px; }
.defiler span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; background: var(--or); border-radius: 2px; animation: molette 1.8s infinite; }
@keyframes molette { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* Apparition au chargement */
.apparait { opacity: 0; transform: translateY(24px); animation: monte .9s cubic-bezier(.2,.7,.2,1) forwards; }
.d1 { animation-delay: .12s; } .d2 { animation-delay: .25s; } .d3 { animation-delay: .4s; } .d4 { animation-delay: .55s; }
@keyframes monte { to { opacity: 1; transform: none; } }

/* ---------- Téléphone (écrans d'app dessinés à la charte) ---------- */
.scene-tel { position: relative; justify-self: center; }
.tel {
  width: 290px; aspect-ratio: 9 / 19.5; background: #0d0a26; border-radius: 42px; padding: 11px;
  box-shadow: var(--ombre), 0 0 0 2px rgba(226,181,60,.45), inset 0 0 0 2px #2b2560; position: relative;
}
.heros .tel { animation: flotter 6s ease-in-out infinite; }
@keyframes flotter { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
.tel::before { content: ""; position: absolute; top: 17px; left: 50%; width: 70px; height: 7px; margin-left: -35px; background: #000; border-radius: 4px; z-index: 3; }
.tel-ecran { width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: #FBF9FE; color: var(--texte); display: flex; flex-direction: column; font-size: 12px; }
.app-barre { background: var(--nuit); color: #fff; padding: 30px 14px 11px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; border-bottom: 2px solid var(--or); }
.app-barre .app-ico { margin-left: auto; color: var(--or); }
.app-retour { opacity: .8; }
.app-chapitres { display: flex; gap: 6px; padding: 8px 10px; background: var(--lilas-pale); font-size: 10.5px; overflow: hidden; white-space: nowrap; }
.app-chapitres > * { padding: 3px 9px; border-radius: 999px; color: var(--iris-fonce); }
.app-chapitres b { background: var(--iris); color: #fff; font-weight: 600; }
.app-photo { position: relative; margin: 10px; border-radius: 12px; overflow: hidden; aspect-ratio: 4/5; box-shadow: 0 4px 14px rgba(28,22,80,.2); }
.app-photo img { width: 100%; height: 100%; object-fit: cover; }
.annot { position: absolute; inset: 0; width: 100%; height: 100%; }
.trace { fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 200; animation: dessin 8s ease-in-out infinite; vector-effect: non-scaling-stroke; }
.annot .trace { stroke-width: 2.5; }
.t1 { stroke: var(--or); } .t2 { stroke: #c9a7ff; animation-delay: 1s; } .t3 { stroke: #fff; animation-delay: 2s; stroke-dasharray: 4 3; }
@keyframes dessin { 0% { stroke-dashoffset: 200; } 30%,85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.t3 { animation-name: dessinCote; }
@keyframes dessinCote { 0%,20% { opacity: 0; } 35%,85% { opacity: 1; } 100% { opacity: 0; } }
.point { fill: var(--iris); stroke: #fff; stroke-width: .8; opacity: 0; animation: pointe 8s infinite; }
.p1 { animation-delay: 2.6s; } .p2 { animation-delay: 2.9s; } .p3 { animation-delay: 3.2s; }
@keyframes pointe { 0% { opacity: 0; } 5%,60% { opacity: 1; } 70%,100% { opacity: 0; } }
.etiq { position: absolute; font-size: 10px; font-weight: 700; background: rgba(28,22,80,.85); color: #fff; padding: 2px 7px; border-radius: 6px; opacity: 0; animation: etiquette 8s infinite; white-space: nowrap; }
.etiq.e1 { top: 31%; left: 8%; animation-delay: 1.6s; border-left: 3px solid var(--or); }
.etiq.e2 { top: 78%; left: 44%; animation-delay: 2.4s; border-left: 3px solid #c9a7ff; }
.etiq.e3 { bottom: 4%; left: 34%; animation-delay: 3s; }
@keyframes etiquette { 0% { opacity: 0; transform: translateY(6px); } 6%,70% { opacity: 1; transform: none; } 80%,100% { opacity: 0; } }
.app-alt { padding: 0 10px; display: grid; gap: 6px; }
.alt { background: #fff; border: 1px solid var(--bord); border-radius: 9px; padding: 7px 10px; display: flex; align-items: center; gap: 8px; font-weight: 600; opacity: 0; animation: alt 8s infinite; }
.alt i { width: 9px; height: 9px; border-radius: 50%; }
.alt em { margin-left: auto; font-style: normal; font-weight: 400; color: var(--texte-doux); font-size: 10.5px; }
.a1 { animation-delay: 3.4s; } .a2 { animation-delay: 3.7s; } .a3 { animation-delay: 4s; }
@keyframes alt { 0% { opacity: 0; transform: translateX(-10px); } 4%,88% { opacity: 1; transform: none; } 96%,100% { opacity: 0; } }
.flotte { position: absolute; background: rgba(255,255,255,.96); color: var(--nuit); border-radius: 14px; padding: 9px 14px; box-shadow: var(--ombre); display: grid; line-height: 1.25; animation: flotter2 7s ease-in-out infinite; }
.flotte b { font-size: 18px; } .flotte span { font-size: 12px; color: var(--texte-doux); }
.f1 { top: 14%; left: -70px; border-left: 4px solid var(--or); }
.f2 { top: 48%; right: -80px; border-left: 4px solid var(--iris); animation-delay: -2s; }
.f3 { bottom: 9%; left: -60px; border-left: 4px solid #d6455d; animation-delay: -4s; }
.f3 b { color: #d6455d; font-size: 15px; }
@keyframes flotter2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Bande de chiffres ---------- */
.bande-chiffres { background: var(--nuit); padding: 38px 0; border-top: 1px solid rgba(226,181,60,.3); }
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.chiffres b { display: block; font-size: 46px; color: var(--or); line-height: 1.1; font-variant-numeric: tabular-nums; }
.chiffres span { color: var(--lilas-clair); font-size: 15px; }

/* ---------- Sections de fonctions ---------- */
section { padding: 90px 0; }
section.teinte { background: var(--lilas-pale); }
section.sombre { background: linear-gradient(160deg, var(--nuit), var(--iris-fonce)); color: #fff; }
section.sombre h2 { color: #fff; }
section.sombre .intro, section.sombre .liste-coche li { color: var(--lilas-clair); }
section.sombre .liste-coche li { border-bottom-color: rgba(217,195,240,.18); }
section.sombre .liste-coche strong { color: #fff; }
section.sombre .liste-coche li::before { color: var(--or); }
h2 { font-size: 38px; line-height: 1.15; margin: 0 0 14px; color: var(--iris-fonce); letter-spacing: -.3px; }
h2 em { font-style: normal; color: var(--lilas); }
section.sombre h2 em { color: var(--or); }
.numero { color: var(--or-fonce); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 13px; margin-bottom: 10px; }
section.sombre .numero { color: var(--or); }
.intro { color: var(--texte-doux); max-width: 720px; margin: 0 0 26px; font-size: 18px; }
.centre { text-align: center; margin-left: auto; margin-right: auto; }
.zigzag { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.zigzag.inverse .visuel { order: 2; }
.visuel { position: relative; display: flex; flex-direction: column; align-items: center; }
.liste-coche { list-style: none; padding: 0; margin: 0; }
.liste-coche li { padding: 9px 0 9px 32px; position: relative; border-bottom: 1px dashed var(--bord); }
.liste-coche li::before { content: "✓"; position: absolute; left: 4px; color: var(--or-fonce); font-weight: 800; }
.legende-visuel { font-size: 13px; color: var(--texte-doux); margin: 12px 0 0; text-align: center; }
section.sombre .legende-visuel { color: var(--lilas-clair); opacity: .8; }

/* Révélation au défilement */
.js .revele { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js .revele.vu { opacity: 1; transform: none; }
.grille .revele:nth-child(2), .grille-outils .revele:nth-child(2), .chiffres .revele:nth-child(2) { transition-delay: .1s; }
.grille .revele:nth-child(3), .grille-outils .revele:nth-child(3), .chiffres .revele:nth-child(3) { transition-delay: .2s; }
.grille-outils .revele:nth-child(4), .chiffres .revele:nth-child(4) { transition-delay: .3s; }
.grille-outils .revele:nth-child(5) { transition-delay: .15s; } .grille-outils .revele:nth-child(6) { transition-delay: .25s; }

/* 01 photo + repères */
.cadre-photo { position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--ombre); max-width: 480px; }
.cadre-photo.inclinee { transform: rotate(-2deg); transition: transform .5s; }
.cadre-photo.inclinee:hover { transform: rotate(0) scale(1.02); }
.repere { position: absolute; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(28,22,80,.85); padding: 4px 10px 4px 6px; border-radius: 999px; }
.repere i { width: 14px; height: 14px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 0 rgba(226,181,60,.7); animation: pulse 2s infinite; }
.r1 { top: 18%; left: 8%; } .r2 { top: 52%; right: 6%; } .r2 i { background: #c9a7ff; animation-delay: .6s; }
.r3 { bottom: 12%; left: 14%; } .r3 i { background: #ff8fa3; animation-delay: 1.2s; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(226,181,60,.7); } 70% { box-shadow: 0 0 0 14px rgba(226,181,60,0); } 100% { box-shadow: 0 0 0 0 rgba(226,181,60,0); } }
.barre-outils { display: flex; gap: 6px; background: var(--nuit); padding: 8px 10px; border-radius: 14px; margin-top: -22px; position: relative; z-index: 2; box-shadow: var(--ombre); }
.barre-outils span { width: 36px; height: 36px; display: grid; place-items: center; color: var(--lilas-clair); border-radius: 9px; font-size: 16px; animation: outilActif 7s infinite; }
.barre-outils span:nth-child(2) { animation-delay: 1s; } .barre-outils span:nth-child(3) { animation-delay: 2s; } .barre-outils span:nth-child(4) { animation-delay: 3s; }
.barre-outils span:nth-child(5) { animation-delay: 4s; } .barre-outils span:nth-child(6) { animation-delay: 5s; } .barre-outils span:nth-child(7) { animation-delay: 6s; }
@keyframes outilActif { 0%,14% { background: var(--iris); color: #fff; } 15%,100% { background: transparent; } }

/* 02 voix */
.carte-voix { background: #fff; border-radius: 22px; padding: 24px; box-shadow: var(--ombre); max-width: 440px; width: 100%; border-top: 4px solid #d6455d; }
.voix-tete { font-weight: 700; color: var(--iris-fonce); display: flex; align-items: center; gap: 10px; }
.rec { width: 12px; height: 12px; border-radius: 50%; background: #d6455d; animation: clignote 1.2s infinite; }
@keyframes clignote { 50% { opacity: .25; } }
.onde { display: flex; align-items: center; gap: 4px; height: 70px; margin: 16px 0; }
.onde i { flex: 1; background: linear-gradient(var(--iris), var(--lilas)); border-radius: 3px; height: 20%; animation: onde 1.1s ease-in-out infinite; }
.onde i:nth-child(3n) { animation-duration: .8s; } .onde i:nth-child(4n) { animation-duration: 1.4s; } .onde i:nth-child(5n+1) { animation-delay: -.4s; } .onde i:nth-child(7n) { animation-delay: -.7s; }
@keyframes onde { 0%,100% { height: 15%; } 50% { height: 95%; } }
.transcription { min-height: 78px; font-size: 16px; color: var(--texte); margin: 0; }
.curseur { color: var(--iris); animation: clignote .9s steps(1) infinite; }
.voix-pied { margin-top: 14px; font-size: 13px; color: var(--texte-doux); background: var(--lilas-pale); padding: 8px 12px; border-radius: 10px; }

/* 03 arbre */
.tel-petit { width: 270px; }
.tel-ecran.clair { background: #FBF9FE; }
.arbre { padding: 10px 8px; display: grid; gap: 4px; }
.noeud { display: flex; align-items: center; gap: 7px; padding: 6px 6px; border-radius: 8px; font-size: 11.5px; }
.js .noeud { opacity: 0; transform: translateX(-8px); }
.vu .noeud { animation: monte .5s forwards; }
.vu .noeud:nth-child(1) { animation-delay: .2s; } .vu .noeud:nth-child(2) { animation-delay: .35s; } .vu .noeud:nth-child(3) { animation-delay: .5s; }
.vu .noeud:nth-child(4) { animation-delay: .65s; } .vu .noeud:nth-child(5) { animation-delay: .8s; } .vu .noeud:nth-child(6) { animation-delay: .95s; } .vu .noeud:nth-child(7) { animation-delay: 1.1s; }
.n0 { font-weight: 700; color: var(--iris-fonce); } .n1 { padding-left: 14px; font-weight: 600; } .n2 { padding-left: 24px; background: #fff; border: 1px solid var(--bord); }
.vign { width: 26px; height: 26px; border-radius: 6px; background-size: cover; background-position: center; flex: none; }
.etat { margin-left: auto; font-size: 9.5px; padding: 2px 7px; border-radius: 999px; color: #fff; font-weight: 600; }
.etat.bon { background: #3c9a6b; } .etat.moyen { background: var(--or-fonce); } .etat.urgent { background: #c43c55; }
.tableau { margin: auto 10px 14px; display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.tableau div { background: var(--nuit); color: var(--lilas-clair); border-radius: 10px; padding: 8px 4px; text-align: center; font-size: 10px; }
.tableau b { display: block; color: var(--or); font-size: 18px; }

/* 04 comparateur */
.comparateur { position: relative; width: 100%; max-width: 520px; aspect-ratio: 4/3; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.45); user-select: none; --pos: 50%; }
.comparateur > img, .comparateur .avant img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparateur .avant { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.comparateur .avant img { filter: sepia(.55) contrast(.82) brightness(.82) saturate(1.2); }
.comparateur > img { filter: contrast(1.05) saturate(1.05); }
.poignee { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; background: var(--or); transform: translateX(-50%); pointer-events: none; }
.poignee span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--or); color: var(--nuit); font-weight: 800; padding: 8px 10px; border-radius: 999px; font-size: 13px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.comparateur input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.badge-comp { position: absolute; top: 12px; background: rgba(28,22,80,.85); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; pointer-events: none; }
.badge-comp.gauche { left: 12px; } .badge-comp.droite { right: 12px; }

/* 05 frise de traitement */
.frise { width: 100%; max-width: 460px; background: #fff; border-radius: 22px; box-shadow: var(--ombre); padding: 22px; border: 1px solid var(--bord); }
.seance { display: flex; justify-content: space-between; align-items: center; background: var(--nuit); color: #fff; border-radius: 14px; padding: 12px 16px; margin-bottom: 18px; flex-wrap: wrap; gap: 8px; }
.chrono { display: flex; align-items: center; gap: 8px; font-size: 22px; font-variant-numeric: tabular-nums; }
.ch-point { width: 10px; height: 10px; border-radius: 50%; background: #4fd18b; animation: clignote 1s infinite; }
.climat { display: flex; gap: 10px; font-size: 12.5px; color: var(--lilas-clair); }
.etapes-anim { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; display: grid; gap: 12px; }
.etapes-anim::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--bord); }
.etapes-anim li { position: relative; display: grid; font-size: 14px; }
.etapes-anim li span { color: var(--texte-doux); font-size: 13px; }
.etapes-anim li::before { content: ""; position: absolute; left: -24px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--bord); }
.etapes-anim li.fait::before { background: var(--iris); border-color: var(--iris); content: "✓"; color: #fff; font-size: 9px; display: grid; place-items: center; }
.etapes-anim li.encours::before { border-color: var(--or); background: var(--or); animation: pulse 1.8s infinite; }
.etapes-anim li.encours b { color: var(--or-fonce); }
.modele-badge { margin-top: 18px; background: var(--lilas-pale); color: var(--iris-fonce); font-weight: 600; font-size: 13px; padding: 9px 12px; border-radius: 10px; border-left: 3px solid var(--lilas); }

/* 06 outils */
.grille-outils { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 20px; }
.outil { background: #fff; border-radius: 20px; padding: 24px; border: 1px solid var(--bord); box-shadow: 0 4px 18px rgba(42,33,112,.06); transition: transform .3s, box-shadow .3s; }
.outil:hover { transform: translateY(-6px); box-shadow: var(--ombre); }
.outil h3 { margin: 14px 0 6px; color: var(--iris-fonce); font-size: 19px; }
.outil p { margin: 0; color: var(--texte-doux); font-size: 15px; }
.outil-photo { background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: flex-end; min-height: 230px; border: none; }
.outil-photo h3 { color: var(--or); } .outil-photo p { color: #fff; }
.jauge, .boussole, .niveau, .laines, .minuteur { height: 86px; display: grid; place-items: center; position: relative; }
.jauge svg { width: 130px; } .jauge path { fill: none; stroke-width: 10; stroke-linecap: round; }
.jauge-fond { stroke: var(--lilas-pale); }
.jauge-val { stroke: var(--or); stroke-dasharray: 158; stroke-dashoffset: 158; animation: jauge 4s ease-in-out infinite alternate; }
@keyframes jauge { to { stroke-dashoffset: 110; } }
.jauge b { position: absolute; bottom: 4px; color: var(--iris-fonce); font-size: 18px; }
.laines { grid-template-columns: repeat(8, 1fr); gap: 4px; align-items: end; justify-items: stretch; padding: 0 10px; }
.laines i { height: 60px; border-radius: 4px; background: #2d55c8; animation: palir 5s ease-in-out infinite alternate; }
.laines i:nth-child(1) { animation-duration: 1.4s; } .laines i:nth-child(2) { animation-duration: 2s; } .laines i:nth-child(3) { animation-duration: 2.8s; } .laines i:nth-child(4) { animation-duration: 3.6s; }
.laines i:nth-child(5) { animation-duration: 4.6s; } .laines i:nth-child(6) { animation-duration: 6s; } .laines i:nth-child(7) { animation-duration: 8s; } .laines i:nth-child(8) { animation-duration: 11s; }
@keyframes palir { to { background: #c7cde6; } }
.boussole { width: 86px; height: 86px; margin: 0 auto; border-radius: 50%; border: 3px solid var(--lilas-clair); background: radial-gradient(var(--lilas-pale), #fff); }
.boussole b { position: absolute; top: 2px; color: var(--iris-fonce); font-size: 12px; }
.aiguille { width: 6px; height: 64px; background: linear-gradient(var(--or) 50%, var(--iris) 50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); animation: boussole 5s ease-in-out infinite; }
@keyframes boussole { 0% { transform: rotate(-35deg); } 30% { transform: rotate(20deg); } 55% { transform: rotate(-8deg); } 75%,100% { transform: rotate(3deg); } }
.niveau { width: 170px; height: 40px; margin: 23px auto; border-radius: 999px; border: 3px solid var(--lilas-clair); background: linear-gradient(90deg, transparent 44%, rgba(91,75,196,.25) 44%, rgba(91,75,196,.25) 56%, transparent 56%), #f7fbe8; }
.bulle { width: 30px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #b9e36b); box-shadow: inset 0 0 0 2px #8fbf3c; animation: bulle 4s ease-in-out infinite; }
@keyframes bulle { 0% { transform: translateX(-55px); } 40% { transform: translateX(30px); } 70%,100% { transform: translateX(0); } }
.minuteur svg { width: 80px; transform: rotate(-90deg); } .minuteur circle { fill: none; stroke: var(--lilas-pale); stroke-width: 6; }
.minuteur .tour { stroke: var(--iris); stroke-dasharray: 164; animation: minute 6s linear infinite; }
@keyframes minute { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 164; } }
.minuteur b { position: absolute; color: var(--iris-fonce); font-size: 15px; }

/* 07 caméras */
.ecran-cam { position: relative; width: 100%; max-width: 440px; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.5); border: 2px solid rgba(226,181,60,.5); background: #000; }
.ecran-cam img { width: 100%; transition: filter .4s; }
.cam-hud { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 9px 12px; font-size: 12px; font-weight: 600; background: linear-gradient(rgba(0,0,0,.6), transparent); color: #fff; }
.cam-hud span:first-child { color: #ff6b81; }
.cam-mode { color: var(--or); }
.cam-minmax { position: absolute; bottom: 10px; right: 10px; display: none; gap: 6px; font-size: 12px; font-weight: 700; }
.cam-minmax span { background: rgba(0,0,0,.7); color: #fff; padding: 3px 8px; border-radius: 6px; }
.ecran-cam.thermique .cam-minmax { display: flex; }
.choix-cam { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; justify-content: center; }
.choix-cam button { font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--lilas-clair); background: transparent; color: #fff; cursor: pointer; transition: background .2s; }
.choix-cam button:hover { background: rgba(255,255,255,.1); }
.choix-cam button.actif { background: var(--or); border-color: var(--or); color: var(--nuit); font-weight: 700; }

.types-cam { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0 0 22px; }
.types-cam figure { margin: 0; position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; border: 1px solid rgba(217,195,240,.25); }
.types-cam img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.types-cam figure:hover img { transform: scale(1.08); }
.types-cam .sim-thermique { filter: url(#fer); }
.types-cam figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; background: linear-gradient(transparent, rgba(28,22,80,.92)); display: grid; line-height: 1.25; }
.types-cam b { color: #fff; font-size: 14px; }
.types-cam em { font-style: normal; font-size: 12px; color: var(--lilas-clair); }

/* 10 3D */
.scene-3d { position: relative; width: 100%; max-width: 520px; border-radius: 22px; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(91,75,196,.35), rgba(28,22,80,0) 70%); border: 1px solid rgba(226,181,60,.3); }
.scene-3d canvas { width: 100%; height: auto; display: block; }
.badge-3d { position: absolute; left: 12px; bottom: 12px; font-size: 12px; color: var(--lilas-clair); background: rgba(0,0,0,.35); padding: 3px 10px; border-radius: 999px; }
.bientot { display: inline-block; margin-left: 8px; background: var(--or); color: var(--nuit); padding: 1px 9px; border-radius: 999px; font-size: 11px; letter-spacing: 1px; }
section.sombre .intro strong { color: #fff; }

/* 08 pile de PDF */
.pile-pdf { position: relative; width: 320px; height: 400px; }
.page { position: absolute; inset: 0; background: #fff; border-radius: 6px; box-shadow: 0 14px 40px rgba(28,22,80,.2); padding: 18px; display: flex; flex-direction: column; gap: 12px; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.vu .pg3 { transform: rotate(-9deg) translate(-40px, 10px); } .vu .pg2 { transform: rotate(-4deg) translate(-18px, 4px); } .vu .pg1 { transform: rotate(3deg) translate(14px, -4px); }
.pg-tete { height: 34px; border-bottom: 2px solid var(--or); display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; color: var(--iris-fonce); }
.pg-logo { background: var(--lilas-pale); border: 1px dashed var(--lilas); padding: 3px 7px; border-radius: 4px; font-size: 9.5px; color: var(--lilas); letter-spacing: 1px; }
.pg-img { height: 150px; border-radius: 4px; background-size: cover; background-position: center; }
.pg-lignes { flex: 1; background: repeating-linear-gradient(#fff 0 9px, #e9e4f2 9px 12px); }
.pg-sign { align-self: flex-end; font-family: "Segoe Script", "Brush Script MT", cursive; color: var(--iris); font-size: 18px; border-top: 1px solid var(--bord); padding-top: 4px; }
.format { position: absolute; font-weight: 800; font-size: 13px; padding: 6px 12px; border-radius: 10px; color: #fff; box-shadow: var(--ombre); animation: flotter2 5s ease-in-out infinite; }
.fm1 { background: #c43c55; top: -12px; right: -30px; } .fm2 { background: #2b5cb8; top: 34%; right: -50px; animation-delay: -1.2s; }
.fm3 { background: #2f8f62; bottom: 22%; left: -60px; animation-delay: -2.4s; } .fm4 { background: var(--iris); bottom: -10px; right: 0; animation-delay: -3.6s; }

/* Bandeau terrain */
.terrain { padding: 0; position: relative; background: var(--nuit); }
.terrain-photos { display: grid; grid-template-columns: 1fr 1fr; }
.terrain-photos figure { margin: 0; height: 420px; overflow: hidden; }
.terrain-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform 6s ease; }
.terrain-photos figure:hover img { transform: scale(1.06); }
.terrain-texte { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); background: rgba(28,22,80,.9); color: #fff; padding: 26px 34px; border-radius: 20px; max-width: 720px; text-align: center; border: 1px solid rgba(226,181,60,.4); backdrop-filter: blur(4px); }
.js .terrain-texte.revele { transform: translate(-50%, 40px); } .js .terrain-texte.revele.vu { transform: translate(-50%, 0); }
.terrain-texte h2 { color: #fff; font-size: 30px; } .terrain-texte h2 em { color: var(--or); }
.terrain-texte p { margin: 0; color: var(--lilas-clair); }

/* 09 IA */
.carte-ia { background: #fff; border-radius: 22px; padding: 22px; box-shadow: var(--ombre); max-width: 460px; width: 100%; border-top: 4px solid var(--lilas); }
.ia-tete { font-weight: 700; color: var(--iris-fonce); display: flex; justify-content: space-between; }
.ia-tete span { font-size: 12px; background: var(--or-pale); color: var(--or-fonce); padding: 2px 10px; border-radius: 999px; }
.ia-flux { min-height: 150px; font-size: 15px; margin: 14px 0; }
.ia-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.ia-sources span { font-size: 12px; background: var(--lilas-pale); color: var(--iris-fonce); padding: 4px 10px; border-radius: 999px; }
.ia-actions { display: flex; gap: 8px; margin-top: 14px; }
.ia-actions span { flex: 1; text-align: center; padding: 9px; border-radius: 10px; font-size: 13px; font-weight: 600; border: 1.5px solid var(--bord); color: var(--iris-fonce); }
.ia-actions .ok { background: var(--iris); color: #fff; border-color: var(--iris); }
.encart { border-left: 4px solid var(--or); background: #fffaf0; padding: 16px 20px; border-radius: 0 var(--rayon) var(--rayon) 0; margin-top: 22px; font-size: 15px; }
.encart.ia { border-left-color: var(--lilas); background: #fff; }

/* Données */
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 22px; margin-top: 30px; }
.carte { background: #fff; border: 1px solid var(--bord); border-radius: 20px; padding: 26px; box-shadow: 0 4px 18px rgba(42,33,112,.06); transition: transform .3s; }
.carte:hover { transform: translateY(-5px); }
.carte h3 { margin: 12px 0 8px; font-size: 19px; color: var(--iris-fonce); }
.carte p { margin: 0; color: var(--texte-doux); font-size: 16px; }
.picto { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--iris), var(--lilas)); font-size: 22px; }

/* Contact */
.contact-final { background: linear-gradient(160deg, rgba(28,22,80,.96), rgba(58,47,150,.9)), url(img/fresque-plantes.jpg) center/cover fixed; color: #fff; text-align: center; padding: 100px 0; }
.contact-bloc h2 { color: #fff; } .contact-bloc h2 em { color: var(--or); }
.contact-bloc p { color: var(--lilas-clair); max-width: 600px; margin: 0 auto 30px; font-size: 18px; }
.contact-lynx { width: 84px; height: 84px; border-radius: 20px; margin: 0 auto 20px; box-shadow: 0 0 0 2px rgba(226,181,60,.6), 0 0 40px rgba(226,181,60,.35); animation: flotter2 5s ease-in-out infinite; }

/* ---------- Pages légales ---------- */
.page-legale { padding: 50px 0 70px; }
.page-legale .conteneur { max-width: 820px; }
.page-legale h1 { font-size: 34px; color: var(--iris-fonce); margin: 0 0 6px; }
.page-legale .maj { color: var(--texte-doux); font-size: 15px; margin-bottom: 30px; }
.page-legale h2 { font-size: 23px; margin-top: 40px; }
.page-legale h2::after { content: ""; display: block; width: 40px; height: 3px; background: var(--or); margin-top: 10px; border-radius: 2px; }
.page-legale table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 14px 0; }
.page-legale th, .page-legale td { border: 1px solid var(--bord); padding: 10px 12px; text-align: left; vertical-align: top; }
.page-legale th { background: var(--lilas-pale); color: var(--iris-fonce); }
.page-legale .resume { background: var(--lilas-pale); border-radius: var(--rayon); padding: 20px 24px; }
.page-legale .resume ul { margin: 8px 0 0; padding-left: 20px; }
.page-legale img { display: inline-block; }

/* ---------- Pied de page ---------- */
footer.site { background: var(--nuit); color: var(--lilas-clair); padding: 34px 0; font-size: 15px; }
footer.site .conteneur { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
footer.site a { color: var(--lilas-clair); text-decoration: none; margin-right: 18px; }
footer.site a:hover { color: #fff; }

/* ---------- Écrans moyens et mobiles ---------- */
@media (max-width: 980px) {
  .heros h1 { font-size: 44px; }
  .zigzag { gap: 40px; }
  .grille-outils { grid-template-columns: repeat(2, 1fr); }
  .f1, .f3 { left: -30px; } .f2 { right: -30px; }
}
@media (max-width: 820px) {
  body { font-size: 16px; }
  .heros { padding: 50px 0 90px; min-height: 0; }
  .heros .conteneur, .zigzag { grid-template-columns: 1fr; }
  .zigzag.inverse .visuel { order: 0; }
  .heros h1 { font-size: 36px; }
  .scene-tel { margin-top: 10px; }
  .tel { width: 250px; }
  .f1 { left: -40px; } .f2 { right: -46px; } .f3 { left: -34px; }
  nav.principal a:not(.nav-cta) { display: none; }
  section { padding: 64px 0; }
  h2 { font-size: 29px; }
  .chiffres { grid-template-columns: repeat(2, 1fr); }
  .chiffres b { font-size: 38px; }
  .grille-outils { grid-template-columns: 1fr; }
  .terrain-photos { grid-template-columns: 1fr; }
  .terrain-photos figure { height: 260px; }
  .terrain-texte { position: relative; left: auto; bottom: auto; transform: none; margin: -40px 16px 0; padding: 22px; }
  .terrain-texte.revele, .terrain-texte.revele.vu { transform: none; }
  .terrain { padding-bottom: 40px; }
  .pile-pdf { width: 250px; height: 320px; }
  .fm2 { right: -24px; } .fm3 { left: -30px; }
  .contact-final { background-attachment: scroll; }
  .page-legale table { font-size: 14px; }
}
@media (max-width: 420px) {
  .flotte { transform: scale(.85); }
  .f1 { left: -18px; } .f2 { right: -22px; } .f3 { left: -14px; }
}


/* Encart compatibilité */
.encart.compat { margin: -6px 0 22px; border-left-color: var(--iris); background: var(--lilas-pale); }

/* Stratigraphie */
.carte-strati { background: #fff; border-radius: 22px; box-shadow: var(--ombre); padding: 20px; width: 100%; max-width: 470px; }
.strati-tete { font-weight: 700; color: var(--iris-fonce); margin-bottom: 14px; }
.strati-corps { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: center; }
.coupe { height: 230px; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; border: 1px solid var(--bord); }
.coupe i { height: var(--h); background: var(--c); position: relative; transform-origin: left; transform: scaleX(0); transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.coupe i::after { content: attr(data-n); position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--t, #fff); white-space: nowrap; }
.coupe i:nth-child(odd) { background-image: radial-gradient(rgba(0,0,0,.08) 1px, transparent 1.5px); background-size: 7px 7px; }
.vu .coupe i { transform: scaleX(1); }
.vu .coupe i:nth-child(5) { transition-delay: .1s; } .vu .coupe i:nth-child(4) { transition-delay: .3s; } .vu .coupe i:nth-child(3) { transition-delay: .5s; }
.vu .coupe i:nth-child(2) { transition-delay: .7s; } .vu .coupe i:nth-child(1) { transition-delay: .9s; }
.harris { width: 100%; }
.h-liens path { fill: none; stroke: var(--lilas); stroke-width: 1.6; stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset 1s 1s; }
.vu .h-liens path { stroke-dashoffset: 0; }
.h-boites rect { fill: var(--nuit); } .h-boites rect.lac { fill: #fff; stroke: var(--or-fonce); stroke-dasharray: 3 2; }
.h-boites text { fill: #fff; font-size: 9px; font-weight: 700; text-anchor: middle; font-family: inherit; }
.h-boites rect.lac + text { fill: var(--or-fonce); }
.strati-pied { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.strati-pied span { font-size: 12px; font-weight: 600; background: var(--lilas-pale); color: var(--iris-fonce); padding: 3px 10px; border-radius: 999px; }

/* Fiche produit + laser */
.carte-produit { background: #fff; border-radius: 20px; box-shadow: var(--ombre); padding: 18px 20px; width: 100%; max-width: 420px; border-top: 4px solid var(--iris); }
.cp-tete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.cp-tete b { color: var(--iris-fonce); font-size: 18px; } .cp-tete span { font-size: 12px; color: var(--texte-doux); }
.cp-ligne { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--bord); font-size: 14px; }
.cp-ligne span { color: var(--texte-doux); } .cp-ligne b { color: var(--texte); text-align: right; }
.pastille-a, .pastille-p { color: #fff !important; padding: 1px 10px; border-radius: 999px; font-size: 12.5px; }
.pastille-a { background: #3c9a6b; } .pastille-p { background: var(--iris); }
.sgh { display: flex; gap: 6px; }
.sgh i { width: 26px; height: 26px; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 900; color: #111; background: #fff; border: 2.5px solid #d22; transform: rotate(45deg); }
.sgh i::first-letter { transform: rotate(-45deg); }
.cp-actions { display: flex; gap: 6px; margin-top: 12px; }
.cp-actions span { flex: 1; text-align: center; font-size: 12.5px; font-weight: 600; padding: 7px 4px; border-radius: 10px; background: var(--lilas-pale); color: var(--iris-fonce); }
.carte-laser { margin-top: -18px; margin-left: 80px; position: relative; z-index: 2; background: var(--nuit); color: var(--lilas-clair); border-radius: 18px; padding: 14px 18px; max-width: 360px; box-shadow: var(--ombre); border: 1px solid rgba(226,181,60,.45); font-size: 14px; }
.carte-laser p { margin: 6px 0 0; }
.laser-tete { color: var(--or); font-weight: 700; }
.faisceau { position: relative; height: 26px; margin-top: 8px; border-bottom: 3px solid #8a7a5a; }
.rayon-laser { position: absolute; left: 0; top: 11px; height: 3px; width: 0; background: linear-gradient(90deg, rgba(80,255,120,.1), #50ff78); box-shadow: 0 0 8px #50ff78; animation: laser 2.6s ease-in infinite; }
.impact { position: absolute; right: 18%; bottom: -3px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 6px #50ff78; opacity: 0; animation: impact 2.6s infinite; }
@keyframes laser { 0% { width: 0; } 45%,100% { width: 82%; } }
@keyframes impact { 0%,44% { opacity: 0; } 50% { opacity: 1; } 70%,100% { opacity: 0; } }

/* Boîte à outils complète */
.boite-outils { margin-top: 30px; background: var(--nuit); border-radius: 22px; padding: 24px 26px; color: var(--lilas-clair); }
.bo-titre { color: #fff; font-weight: 700; font-size: 18px; margin-bottom: 14px; }
.bo-familles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.bo-familles div { display: flex; flex-direction: column; gap: 6px; }
.bo-familles b { color: var(--or); font-size: 14px; letter-spacing: .5px; }
.bo-familles span { font-size: 13.5px; padding: 4px 10px; border-radius: 9px; background: rgba(255,255,255,.07); border: 1px solid rgba(217,195,240,.15); }
.bo-note { margin: 16px 0 0; font-size: 14px; }

/* Flèche pour remonter */
.haut { position: fixed; right: 22px; bottom: 22px; z-index: 30; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: var(--or); color: var(--nuit); font-size: 24px; font-weight: 900; text-decoration: none; box-shadow: 0 8px 24px rgba(28,22,80,.35);
  opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .3s, transform .3s, background .2s; }
.haut.visible { opacity: 1; transform: none; pointer-events: auto; }
.haut:hover { background: var(--or-pale); color: var(--nuit); }

@media (max-width: 980px) { .bo-familles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) {
  .bo-familles { grid-template-columns: 1fr 1fr; }
  .carte-laser { margin-left: 20px; }
  .strati-corps { grid-template-columns: 1fr; } .harris { max-width: 200px; margin: 0 auto; }
  .haut { right: 14px; bottom: 14px; width: 46px; height: 46px; }
}


/* Formules : sans compte / avec compte */
.formules { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; }
.formule { background: #fff; border: 1px solid var(--bord); border-radius: 22px; padding: 26px; box-shadow: 0 4px 18px rgba(42,33,112,.06); }
.formule.premium { background: linear-gradient(160deg, var(--nuit), var(--iris-fonce)); color: var(--lilas-clair); border: 2px solid var(--or); box-shadow: var(--ombre); }
.formule.premium .liste-coche li { border-bottom-color: rgba(217,195,240,.18); color: var(--lilas-clair); }
.formule.premium .liste-coche strong { color: #fff; }
.formule.premium .liste-coche li::before { color: var(--or); }
.f-tete { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.f-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; background: var(--lilas-pale); flex: none; }
.premium .f-ico { background: rgba(226,181,60,.18); }
.f-tete b { display: block; font-size: 20px; color: var(--iris-fonce); }
.premium .f-tete b { color: #fff; }
.f-tete em { font-style: normal; font-size: 13px; color: var(--texte-doux); }
.f-tete em.bientot { color: var(--nuit); margin-left: 0; }
.note-donnees { text-align: center; color: var(--texte-doux); font-size: 15px; margin: 26px auto 0; max-width: 700px; }
@media (max-width: 820px) { .formules { grid-template-columns: 1fr; } }


/* Outils d'annotation */
.outils-annot { margin-top: 44px; background: var(--lilas-pale); border-radius: 22px; padding: 24px 26px; }
.oa-titre { font-weight: 700; color: var(--iris-fonce); font-size: 18px; margin-bottom: 14px; }
.oa-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.oa-liste span { background: #fff; border: 1px solid var(--bord); color: var(--iris-fonce); font-size: 14px; padding: 5px 12px; border-radius: 999px; transition: background .2s, color .2s; }
.oa-liste span:hover { background: var(--iris); color: #fff; }
.oa-note { margin: 14px 0 0; color: var(--texte-doux); font-size: 14.5px; }

/* Motifs de constat */
.motifs { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 20px; }
.motifs span { font-size: 13px; padding: 4px 11px; border-radius: 999px; border: 1px solid rgba(226,181,60,.5); color: var(--or-pale); background: rgba(226,181,60,.08); }

/* Préventif / emballage / transport */
.carte-prev { width: 100%; max-width: 470px; background: #fff; color: var(--texte); border-radius: 22px; padding: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.prev-climat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.prev-jauge { background: var(--lilas-pale); border-radius: 12px; padding: 9px 10px 12px; position: relative; overflow: hidden; display: grid; }
.prev-jauge b { color: var(--iris-fonce); font-size: 16px; } .prev-jauge span { font-size: 11px; color: var(--texte-doux); }
.prev-jauge i { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: linear-gradient(90deg, var(--iris), var(--or)); transition: width 1.2s .3s; }
.vu .prev-jauge i { width: var(--p); }
.caisse { position: relative; margin: 18px auto 14px; width: 210px; }
.caisse-bois { padding: 14px; border-radius: 6px; background: repeating-linear-gradient(90deg, #c99a5b 0 26px, #b98848 26px 28px); box-shadow: inset 0 0 0 3px #8a6230; }
.caisse-mousse { padding: 12px; background: radial-gradient(#e8eef5 2px, #d5dee9 2.5px) 0 0/9px 9px; border-radius: 4px; }
.caisse-oeuvre { height: 110px; background-size: cover; background-position: center; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); transform: translateY(-140px); opacity: 0; transition: transform 1s cubic-bezier(.3,1.4,.5,1) .4s, opacity .4s .4s; }
.vu .caisse-oeuvre { transform: none; opacity: 1; }
.fleche-haut, .fragile { position: absolute; font-size: 10px; font-weight: 900; letter-spacing: 1px; padding: 2px 6px; border-radius: 4px; }
.fleche-haut { right: -64px; top: 6px; color: #b3261e; border: 2px solid #b3261e; background: #fff; }
.fragile { left: -58px; bottom: 10px; color: #fff; background: #b3261e; transform: rotate(-8deg); }
.prev-lignes div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--bord); font-size: 13.5px; }
.prev-lignes span { color: var(--texte-doux); } .prev-lignes b { text-align: right; }
@media (max-width: 820px) { .fleche-haut { right: -40px; } .fragile { left: -36px; } }


/* Types d'œuvres et altérations */
.familles-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.ft { background: #fff; border: 1px solid var(--bord); border-radius: 18px; padding: 18px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.ft b { width: 100%; color: var(--iris-fonce); margin-bottom: 4px; }
.ft span { font-size: 13.5px; padding: 3px 10px; border-radius: 999px; background: var(--lilas-pale); color: var(--iris-fonce); }
.ft:nth-child(3) { grid-row: span 2; }
.chiffres-alt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 18px; text-align: center; }
.chiffres-alt b { display: block; font-size: 42px; color: var(--iris); line-height: 1.1; }
.chiffres-alt span { color: var(--texte-doux); font-size: 15px; }
.defile-alt { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.piste { display: flex; gap: 10px; width: max-content; animation: defile 60s linear infinite; }
.piste span { white-space: nowrap; font-size: 14px; font-weight: 600; padding: 6px 14px 6px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--bord); color: var(--texte); display: flex; align-items: center; gap: 8px; }
.piste span::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
@keyframes defile { to { transform: translateX(-50%); } }
.sources-alt { text-align: center; color: var(--texte-doux); font-size: 14px; margin: 18px auto 0; max-width: 760px; }
@media (max-width: 980px) { .familles-types { grid-template-columns: 1fr 1fr; } .ft:nth-child(3) { grid-row: auto; } }
@media (max-width: 820px) { .familles-types { grid-template-columns: 1fr; } .chiffres-alt b { font-size: 34px; } }


/* Vue microscope dans l'app + encart UV réflectance */
.types-cam .vue-app { border: 2px solid var(--or); }
.hud-micro { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 6px 9px; font-size: 11px; font-weight: 700; background: linear-gradient(rgba(28,22,80,.85), transparent); }
.hud-micro i { font-style: normal; color: #fff; } .hud-micro i:first-child { color: #ff8fa3; } .hud-micro i:last-child { color: var(--or); }
.echelle-micro { position: absolute; right: 10px; bottom: 50px; font-size: 10px; font-weight: 700; color: #fff; border-top: 3px solid #fff; padding-top: 1px; width: 56px; text-align: center; text-shadow: 0 1px 2px #000; }
.uv-reflectance { grid-column: 1 / -1; display: flex; gap: 12px; background: rgba(142,107,191,.16); border: 1px solid rgba(217,195,240,.35); border-radius: 14px; padding: 12px 14px; }
.uv-reflectance .uvr-ico { font-size: 26px; color: #c9a7ff; line-height: 1; }
.uv-reflectance b { color: #fff; font-size: 14.5px; }
.uv-reflectance p { margin: 4px 0 0; font-size: 13.5px; color: var(--lilas-clair); line-height: 1.5; }
.uv-reflectance strong { color: #fff; }


/* Galerie des types d'œuvres */
.galerie-types { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 30px; }
.galerie-types figure { margin: 0; position: relative; aspect-ratio: 3/4; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 4px 16px rgba(42,33,112,.1); }
.galerie-types img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.galerie-types figure:hover img { transform: scale(1.08); }
.galerie-types figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 8px 7px; font-size: 12.5px; font-weight: 700; color: #fff; text-align: center; background: linear-gradient(transparent, rgba(28,22,80,.9)); }
.galerie-types .revele:nth-child(6n+2) { transition-delay: .06s; } .galerie-types .revele:nth-child(6n+3) { transition-delay: .12s; }
.galerie-types .revele:nth-child(6n+4) { transition-delay: .18s; } .galerie-types .revele:nth-child(6n+5) { transition-delay: .24s; } .galerie-types .revele:nth-child(6n) { transition-delay: .3s; }
@media (max-width: 980px) { .galerie-types { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 820px) { .galerie-types { grid-template-columns: repeat(3, 1fr); gap: 8px; } .galerie-types figcaption { font-size: 11px; } }


/* Téléphone du héros : écran élastique (rien n'est rogné en bas) */
.heros .app-photo { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
.heros .app-alt { padding-bottom: 14px; flex: none; }
.heros .alt { padding: 6px 10px; }
@media (max-width: 820px) { .heros .defiler { display: none; } .heros { padding-bottom: 60px; } }

/* Galerie : 15 œuvres */
.galerie-types { grid-template-columns: repeat(5, 1fr); }
.galerie-types .revele:nth-child(5n+2) { transition-delay: .06s; } .galerie-types .revele:nth-child(5n+3) { transition-delay: .12s; }
.galerie-types .revele:nth-child(5n+4) { transition-delay: .18s; } .galerie-types .revele:nth-child(5n) { transition-delay: .24s; }

/* Outils d'annotation : tuiles à tracé animé */
.oa-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.oa-tuile { background: #fff; border: 1px solid var(--bord); border-radius: 14px; padding: 12px 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: default; transition: transform .25s, box-shadow .25s, border-color .25s; }
.oa-tuile:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(42,33,112,.14); border-color: var(--lilas); }
.oa-tuile svg { width: 42px; height: 42px; overflow: visible; }
.oa-tuile svg .tr { fill: none; stroke: var(--iris); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 140; stroke-dashoffset: 140; }
.oa-tuile svg .epais { stroke-width: 6; stroke: var(--or); opacity: .85; }
.oa-tuile svg .epais2 { stroke-width: 4; }
.oa-tuile svg .c1 { stroke: #FF0000; } .oa-tuile svg .c2 { stroke: #FF9900; } .oa-tuile svg .c3 { stroke: #3D78D6; }
.oa-tuile svg circle:not(.tr) { fill: var(--or); }
.oa-tuile svg text { font-size: 8px; font-weight: 800; fill: var(--iris-fonce); text-anchor: middle; font-family: inherit; opacity: 0; }
.oa-tuile span { font-size: 12.5px; font-weight: 600; color: var(--iris-fonce); line-height: 1.25; }
.vu .oa-tuile svg .tr { animation: trace 1.3s ease-out forwards; animation-delay: var(--d); }
.vu .oa-tuile svg text { animation: apparaitTexte .4s forwards; animation-delay: calc(var(--d) + .8s); }
.vu .oa-tuile svg .pointille { animation: none; stroke-dashoffset: 0; stroke-dasharray: 3 3; }
.oa-tuile:hover svg .tr:not(.pointille) { animation: retrace 1s ease-out forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes retrace { from { stroke-dashoffset: 140; } to { stroke-dashoffset: 0; } }
@keyframes apparaitTexte { to { opacity: 1; } }

/* Types d'œuvres et boîte à outils : icônes + cascade */
.ft span, .bo-familles span { display: inline-flex; align-items: center; gap: 6px; transition: transform .2s, background .2s, color .2s; }
.ft span i, .bo-familles span i { font-style: normal; font-size: 15px; line-height: 1; }
.ft span:hover { transform: translateY(-2px) scale(1.04); background: var(--iris); color: #fff; }
.bo-familles span:hover { transform: translateX(4px); background: rgba(226,181,60,.18); border-color: var(--or); color: #fff; }
.js .ft span, .js .bo-familles span { opacity: 0; transform: translateY(10px) scale(.92); }
.ft.vu span, .vu .bo-familles span { animation: puce .45s cubic-bezier(.3,1.5,.5,1) forwards; animation-delay: var(--d); }
@keyframes puce { to { opacity: 1; transform: none; } }

@media (max-width: 980px) { .galerie-types { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 820px) { .galerie-types { grid-template-columns: repeat(3, 1fr); } .oa-grille { grid-template-columns: repeat(3, 1fr); } }


/* Barre d'onglets du téléphone : tous les onglets tiennent, rien n'est coupé */
.app-chapitres { justify-content: space-between; gap: 2px; padding: 8px 6px; }
.app-chapitres > * { padding: 3px 7px; }
@media (max-width: 820px) { .app-chapitres { font-size: 9.5px; padding: 7px 4px; } .app-chapitres > * { padding: 3px 5px; } }


/* Mobile : étiquettes flottantes sur le contour du téléphone, sans cacher l'écran */
@media (max-width: 820px) {
  .flotte { padding: 6px 10px; border-radius: 12px; }
  .flotte b { font-size: 14px; } .flotte span { font-size: 10.5px; }
  .heros .f1 { top: -22px; left: -4px; }
  .heros .f2 { top: auto; bottom: 56%; right: -16px; }
  .heros .f3 { bottom: -24px; left: auto; right: -4px; }
  .heros .f3 b { font-size: 13px; }
  .scene-tel { margin-top: 34px; margin-bottom: 20px; }
}


/* Bandeau terrain : le texte passe SOUS les photos (il ne cache plus les personnes) */
.terrain { padding-bottom: 50px; }
.terrain-texte, .js .terrain-texte.revele, .js .terrain-texte.revele.vu { position: relative; left: auto; bottom: auto; transform: none; margin: -46px auto 0; }
.js .terrain-texte.revele { transform: translateY(30px); } .js .terrain-texte.revele.vu { transform: none; }
.terrain-photos figure { height: 460px; }


/* Photos d'appoint sous les visuels */
.photo-appoint { margin: 18px 0 0; width: 100%; max-width: 470px; position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--ombre); aspect-ratio: 16/10; }
.photo-appoint img { width: 100%; height: 100%; object-fit: cover; transition: transform 6s ease; }
.photo-appoint:hover img { transform: scale(1.06); }
.photo-appoint figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 10px; font-size: 13px; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(28,22,80,.9)); }
.carte-laser + .photo-appoint { margin-top: 18px; }

/* Bandeau terrain : 3 photos */
.terrain-photos { grid-template-columns: repeat(3, 1fr); }
.terrain-photos figure { height: 400px; }
@media (max-width: 820px) { .terrain-photos { grid-template-columns: 1fr; } .terrain-photos figure { height: 240px; } }

/* Respect du réglage « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .apparait, .revele, .noeud { opacity: 1 !important; transform: none !important; }
  .trace { stroke-dashoffset: 0; } .point, .etiq, .alt { opacity: 1; }
  .coupe i { transform: none !important; } .oa-tuile svg .tr { stroke-dashoffset: 0; } .oa-tuile svg text { opacity: 1; } .ft span, .bo-familles span { opacity: 1 !important; transform: none !important; } .caisse-oeuvre { transform: none; opacity: 1; } .prev-jauge i { width: var(--p); } .h-liens path { stroke-dashoffset: 0; } .rayon-laser { width: 82%; }
}

/* Aide à l'identification (02/11) */
.irfc-demo { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 9px; }
.irfc-demo span { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--lilas-clair); }
.irfc-demo i { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(255,255,255,.4); }
.uv-reflectance .pid-note { font-size: 12px; opacity: .85; }