/* /sites-web — dossier de transformation vivant. */

.sites-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(780px, calc(100vh - 74px));
  display: grid; grid-template-columns: minmax(310px, .78fr) minmax(520px, 1.22fr);
  align-items: center; gap: clamp(30px, 4vw, 74px);
  padding: clamp(52px, 7vw, 98px) clamp(24px, 5vw, 76px) 70px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(circle at 76% 48%, color-mix(in srgb, var(--amber) 14%, transparent), transparent 29%),
    linear-gradient(115deg, var(--bg) 0 45%, color-mix(in srgb, var(--surface) 72%, var(--bg)) 100%);
}
.sites-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .32; pointer-events: none;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 72px 72px; mask-image: radial-gradient(circle at 75% 50%, #000, transparent 62%);
}
.sites-hero__copie { position: relative; z-index: 3; }
/* Typographie du bandeau, titre et sous-titre : voir la règle partagée des
   héros dans style.css. Ne reste ici que la mesure du sous-titre. */
.sites-hero .lede { max-width: 47ch; }
.sites-note { margin: 16px 0 0; color: var(--faint); font: 500 11px var(--mono); }

.site-laboratoire { position: relative; min-height: 560px; perspective: 1100px; }
.site-orbite {
  position: absolute; width: 470px; height: 470px; left: 50%; top: 49%; transform: translate(-50%,-50%);
  border: 1px solid color-mix(in srgb, var(--cyan) 38%, transparent); border-radius: 50%;
  box-shadow: 0 0 90px color-mix(in srgb, var(--cyan) 11%, transparent), inset 0 0 60px color-mix(in srgb, var(--amber) 8%, transparent);
}
.site-orbite::before,.site-orbite::after { content:''; position:absolute; inset: 16%; border:1px dashed var(--border2); border-radius:50%; }
.site-orbite::after { inset: 39%; background: var(--amber); opacity: .12; box-shadow: 0 0 70px var(--amber); }
.site-assemblage { position: absolute; inset: 40px 50px 70px 30px; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-25deg) translate3d(30px,0,0); }
/* L'EMPILEMENT ÉCLATÉ DU VISUEL B. Cinq couches qui portent du contenu réel —
   une fenêtre de navigateur avec sa barre et sa photographie, le message, les
   médias, la carte, le balisage — plus la vue mobile et la rangée
   d'accessibilité. Trois couches abstraites ne racontaient rien : c'est le
   CONTENU de chaque plan qui fait comprendre ce qu'on empile. */
.site-couche {
  position: absolute; left: 12%; top: 16%; width: 72%; aspect-ratio: 1.58;
  display: grid; align-content: start; gap: 12px; padding: 22px;
  border: 1px solid var(--border2); border-radius: 13px; color: var(--text);
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  box-shadow: 0 28px 65px color-mix(in srgb, var(--bg) 70%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
}
/* ⚠️ Le flou d'arrière-plan reste sur LA SEULE couche du dessus. Six
   backdrop-filter empilés sont six relectures du fond par image — la leçon du
   blocage Android du 10 août : ce qui est gratuit sur un Mac ne l'est pas sur
   un téléphone. Le verre se lit sur le plan le plus proche, les autres n'en
   ont pas besoin. */
.site-couche--code    { transform: translateZ(-150px) translate(46px,74px);  opacity:.5 }
.site-couche--carte   { transform: translateZ(-80px)  translate(-62px,46px); opacity:.72 }
.site-couche--medias  { transform: translateZ(-10px)  translate(-8px,12px);  opacity:.9 }
.site-couche--message { transform: translateZ(70px)   translate(-26px,-16px); border-color: color-mix(in srgb, var(--amber) 62%, var(--border)); }
.site-couche--fenetre {
  transform: translateZ(152px) translate(14px,-62px);
  display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden;
  backdrop-filter: blur(12px);
  border-color: color-mix(in srgb, var(--amber) 45%, var(--border));
  box-shadow: 0 34px 80px color-mix(in srgb,var(--bg) 78%,transparent), 0 0 40px color-mix(in srgb,var(--amber) 16%,transparent);
}
.site-couche--mobile  { width: 26%; aspect-ratio: .5; left: 74%; top: 20%; transform: translateZ(214px) translate(38px,-44px); }

.site-couche__numero,.site-couche__titre { font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .11em; color: var(--faint); }
.site-couche__numero { position: absolute; right: 14px; top: 12px; z-index:2; color: var(--amber); }
.site-couche strong { margin-top: 10px; font-size: clamp(1.05rem,1.8vw,1.5rem); line-height:1.05; max-width: 12ch; }
.site-couche__ligne { display:block; height: 9px; width: 52%; border-radius: 999px; background: var(--border2); }
.site-couche__action { justify-self:start; margin-top: 8px; padding: 9px 13px; border-radius:6px; background:var(--amber); color:var(--on-amber); font:600 10px var(--mono); }

/* 01 — la fenêtre. Barre système, navigation, photographie : les trois signes
   qui font reconnaître « un site » et non « une carte ». */
.site-chrome { display:flex; align-items:center; gap:7px; padding:10px 14px; border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--raised) 88%,transparent) }
.site-chrome i { width:9px; height:9px; border-radius:50%; background:var(--border2) }
.site-chrome i:nth-child(1){background:#F25F57}.site-chrome i:nth-child(2){background:#FBBE2E}.site-chrome i:nth-child(3){background:#28C840}
.site-chrome span { flex:1; margin-left:10px; padding:4px 10px; border-radius:5px; background:var(--bg); color:var(--faint); font:500 9px var(--mono) }
.site-nav { display:flex; justify-content:flex-end; gap:14px; padding:9px 16px; color:var(--muted); font:500 9px var(--titre) }
.site-photo { display:block; flex:1; overflow:hidden }
.site-photo img { display:block; width:100%; height:100%; object-fit:cover }

/* 03 — les médias, en vignettes vides : la maquette montre des emplacements,
   pas des photographies de plus. */
.site-couche--medias { grid-template-columns:1fr 1fr; align-content:start }
.site-couche--medias .site-couche__titre { grid-column:1/-1 }
.site-vignette { height:56px; border-radius:7px; background:linear-gradient(135deg,color-mix(in srgb,var(--text) 9%,transparent),color-mix(in srgb,var(--text) 4%,transparent)) }

/* 04 — la carte et son épingle ambre, le seul point vif de la couche. */
.site-couche--carte { background-image:linear-gradient(color-mix(in srgb,var(--border) 42%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--border) 42%,transparent) 1px,transparent 1px); background-size:26px 26px }
.site-epingle { position:absolute; left:46%; top:52%; width:15px; height:15px; border:3px solid var(--amber); border-radius:50% 50% 50% 0; rotate:-45deg; box-shadow:0 0 16px color-mix(in srgb,var(--amber) 70%,transparent) }

/* 05 — le balisage. Des lignes de longueur inégale lisent comme du code ; des
   lignes régulières lisent comme un tableau. */
.site-couche--code i { display:block; height:5px; border-radius:999px; background:color-mix(in srgb,var(--cyan) 34%,var(--border2)) }
.site-couche--code i:nth-child(3){width:78%}.site-couche--code i:nth-child(4){width:54%}
.site-couche--code i:nth-child(5){width:88%}.site-couche--code i:nth-child(6){width:41%}

.site-mobile__ecran { display:grid; gap:10px; margin-top:20px; }
.site-mobile__ecran i { display:block; height:20px; border-radius:5px; background:var(--border2); }
.site-mobile__ecran i:first-child { height:54px; background:color-mix(in srgb,var(--amber) 26%,var(--raised)); }

/* La rangée d'accessibilité, au pied de l'empilement. */
.site-acces { position:absolute; left:16%; bottom:-6%; display:flex; gap:12px; margin:0; padding:0; list-style:none; transform:translateZ(-190px) }
.site-acces li { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--border2); border-radius:50%; background:color-mix(in srgb,var(--surface) 88%,transparent) }
.site-acces svg { width:18px; height:18px; fill:none; stroke:var(--muted); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }

/* ⚠️ AI Act art. 50(4). La photographie de la fenêtre est le visuel du jardin
   déjà employé sur l'accueil : générée par IA, figurative, donc signalée
   partout où elle apparaît — pas seulement là où elle est apparue d'abord. */
.site-mention { position:absolute; right:0; bottom:-4px; margin:0; color:var(--faint); font:500 8px var(--mono); text-transform:uppercase; letter-spacing:.07em }
/* LE RAIL DU VISUEL B — six repères numérotés en colonne à droite de
   l'empilement, chacun relié par un filet pointillé. Les quatre repères
   dispersés d'avant lisaient comme une légende ; c'est la DENSITÉ du rail, et
   son alignement, qui font lire « dossier de transformation ». */
.site-assemblage { inset: 40px 34% 70px 0; }
.site-annotations { position:absolute; right:0; top:50%; translate:0 -50%; width:min(250px,32%); display:grid; gap:8px; list-style:none; margin:0; padding:0; pointer-events:none; }
.site-annotation { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:4px 9px; padding:9px 12px; border:1px solid var(--border); border-radius:8px; background:color-mix(in srgb,var(--surface) 84%,transparent); backdrop-filter:blur(6px); }
.site-annotation b { grid-row:1; color:var(--cyan); font:600 10px var(--mono); }
.site-annotation span { grid-row:1; color:var(--muted); font:600 9px var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.site-annotation i { grid-column:2; display:block; height:4px; border-radius:999px; background:var(--border2); }
.site-annotation i:last-of-type { width:58%; }
.site-annotation::before { content:''; position:absolute; right:100%; top:50%; width:clamp(10px,2.5vw,34px); border-top:1px dotted var(--border2); }
.site-etat { position:absolute; left:0; bottom:6px; display:flex; align-items:center; gap:9px; margin:0; padding:9px 13px; border:1px solid color-mix(in srgb,var(--green) 42%,var(--border)); border-radius:8px; background:color-mix(in srgb,var(--surface) 88%,transparent); color:var(--muted); font:600 9px var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.site-etat__point { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }

.diagnostic-section { padding-top:clamp(56px,7vw,96px); }
.diagnostic-intro { grid-column:contenu; }
.diagnostic { --diagnostic-position:52%; margin-top:30px; }
.diagnostic__cadre { position:relative; min-height:clamp(390px,52vw,650px); overflow:hidden; border:1px solid var(--border2); border-radius:18px; background:var(--surface); box-shadow:0 40px 90px color-mix(in srgb,var(--bg) 55%,transparent); }
.diagnostic__barre { position:absolute; inset:0 0 auto; height:46px; display:flex; align-items:center; gap:7px; padding:0 16px; border-bottom:1px solid var(--border); z-index:5; background:var(--raised); }
.diagnostic__barre i { width:8px;height:8px;border-radius:50%;background:var(--faint);opacity:.5 }.diagnostic__barre span{margin-left:auto;margin-right:auto;font:500 10px var(--mono);color:var(--muted)}
.diagnostic__vue { position:absolute; inset:46px 0 0; padding:clamp(34px,7vw,88px); }
.diagnostic__vue--avant { background:var(--raised); clip-path:inset(0 calc(100% - var(--diagnostic-position)) 0 0); }
.diagnostic__vue--apres { background:linear-gradient(135deg,var(--surface),var(--bg)); clip-path:inset(0 0 0 var(--diagnostic-position)); }
.diagnostic__micro { font:600 10px var(--mono); text-transform:uppercase; letter-spacing:.12em; color:var(--faint); }
.diagnostic__ancien-titre { max-width:17ch; font-size:clamp(1.8rem,4vw,4.5rem); line-height:1.08; color:var(--muted); }
.diagnostic__nouveau-titre { max-width:12ch; font-size:clamp(2.2rem,5.2vw,6.1rem); line-height:.93; font-weight:700; letter-spacing:-.05em; margin:30px 0; }
.diagnostic__bloc { position:absolute; display:block; background:var(--border2); border-radius:5px; }.diagnostic__bloc--a{left:8%;bottom:13%;width:27%;height:18%}.diagnostic__bloc--b{left:38%;bottom:13%;width:27%;height:18%}.diagnostic__bloc--c{right:4%;bottom:13%;width:27%;height:18%}
.diagnostic__preuve { display:block;color:var(--muted);font:500 11px var(--mono); }.diagnostic__cta{display:inline-block;margin-top:28px;padding:12px 16px;border-radius:7px;background:var(--amber);color:var(--on-amber);font:600 11px var(--mono)}
.diagnostic__seam { position:absolute; z-index:6; top:46px; bottom:0; left:var(--diagnostic-position); width:2px; background:var(--amber); box-shadow:0 0 24px var(--amber); transform:translateX(-1px); }
.diagnostic__seam span { position:absolute; top:18px; padding:5px 8px; background:var(--bg); color:var(--text); border:1px solid var(--border2); font:600 9px var(--mono); text-transform:uppercase; }.diagnostic__seam span:first-child{right:12px}.diagnostic__seam span:last-child{left:12px}
.diagnostic__controle { display:grid; grid-template-columns:minmax(180px,auto) 1fr; gap:20px; align-items:center; margin-top:18px; font:500 11px var(--mono); color:var(--muted); }
.diagnostic__controle input { width:100%; min-height:44px; accent-color:var(--amber); cursor:ew-resize; }
.diagnostic__liste { list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--border); }
.diagnostic__liste li { padding:20px 22px; border-right:1px solid var(--border); }.diagnostic__liste li:last-child{border-right:0}.diagnostic__liste b{display:block;margin-bottom:7px}.diagnostic__liste span{display:block;color:var(--muted);font-size:13px;line-height:1.5}
/* LES REPÈRES DU VISUEL C — chacun désigne un côté du balayage. L'ambre marque
   ce que l'ancien site rate, le vert ce que la modernisation apporte : la même
   grammaire de couleur que le comparateur juste au-dessus, sinon le repère
   n'annote plus rien. Le numéro est porté par « data-repere », pas dupliqué
   dans le texte — il n'a rien à dire à un lecteur d'écran. */
.diagnostic__repere { position:relative; padding-top:30px; }
.diagnostic__repere::before { content:attr(data-repere); position:absolute; left:22px; top:0; padding:3px 7px; border-radius:0 0 5px 5px; font:700 9px var(--mono); }
.diagnostic__repere::after { content:''; position:absolute; left:0; right:0; top:0; height:2px; }
.diagnostic__repere[data-cote="avant"]::before { background:color-mix(in srgb,var(--amber) 20%,var(--surface)); color:var(--amber); }
.diagnostic__repere[data-cote="avant"]::after { background:var(--amber); }
.diagnostic__repere[data-cote="apres"]::before { background:color-mix(in srgb,var(--green) 20%,var(--surface)); color:var(--green); }
.diagnostic__repere[data-cote="apres"]::after { background:var(--green); }

.prise-en-charge__grille { display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(30px,5vw,80px); }
.prise-en-charge ol { list-style:none;margin:0;padding:0;border-top:1px solid var(--border); }
.prise-en-charge li { display:grid;grid-template-columns:50px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--border); }.prise-en-charge li>span{font:600 11px var(--mono);color:var(--amber)}.prise-en-charge li p{margin:4px 0 0;color:var(--muted);font-size:14px}
.prise-en-charge aside { align-self:start;padding:clamp(26px,4vw,44px);border:1px solid var(--border2);border-radius:16px;background:var(--surface); }.prise-en-charge aside p{color:var(--muted)}.prise-en-charge .prise-en-charge__appel{font-size:clamp(1.45rem,2.4vw,2.3rem);line-height:1.13;color:var(--text);font-weight:650;letter-spacing:-.035em}

.orientation-sites { border-block: 1px solid var(--border); background: var(--surface); }
.orientation-sites h2 { max-width: 16ch; }

.questions-sites h2{max-width:18ch}.sites-appel{padding-bottom:clamp(90px,10vw,150px)}

/* ⚠️ Sous 1050 px, un repère ancré ne repère plus rien : la colonne se
   dédouble, le filet de liaison pointerait dans le vide. Le rail redevient une
   grille de deux, et les repères du diagnostic une simple liste. */
@media (max-width:1050px){.sites-hero{grid-template-columns:1fr;min-height:auto}.site-laboratoire{min-height:530px}.site-assemblage{inset:40px 30% 70px 0}.site-annotations{width:min(220px,30%)}.site-annotation::before{display:none}.diagnostic__repere{padding-top:26px}.diagnostic__repere::before{left:18px}.prise-en-charge__grille{grid-template-columns:1fr}}
@media (max-width:720px){.sites-hero{padding:54px 20px 64px}.site-laboratoire{min-height:440px;margin-top:12px}.site-assemblage{inset:40px 15px 80px 0;transform:rotateX(55deg) rotateZ(-21deg) scale(.82)}.site-annotations{display:none}.diagnostic__cadre{min-height:470px}.diagnostic__vue{padding:44px 24px}.diagnostic__liste{grid-template-columns:1fr 1fr}.diagnostic__liste li:nth-child(2){border-right:0}.diagnostic__liste li{border-bottom:1px solid var(--border)}.diagnostic__controle{grid-template-columns:1fr;gap:4px}}

@media (prefers-reduced-motion:no-preference){.site-assemblage{animation:assemblage-flotte 8s ease-in-out infinite}.site-orbite{animation:orbite-respire 5s ease-in-out infinite}}
@keyframes assemblage-flotte{0%,100%{transform:rotateX(58deg) rotateZ(-25deg) translate3d(30px,0,0)}50%{transform:rotateX(56deg) rotateZ(-23deg) translate3d(30px,-9px,8px)}}
@keyframes orbite-respire{0%,100%{opacity:.65;transform:translate(-50%,-50%) scale(.97)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.03)}}
@media (prefers-reduced-motion:reduce){.site-assemblage,.site-orbite{animation:none!important;transition:none!important}.site-assemblage{transform:rotateX(58deg) rotateZ(-25deg) translate3d(30px,0,0)}}