/* Page Web-ADNS (/web-adns-cms-editeur-de-site-web), mise en scène « pierre et vert mousse » (maquette du 24/10/2026).
   Démarche : v1.1/MISE-EN-SCENE.md. Haut de page : photo d'ambiance + un seul objet (un site dans un navigateur).
   Gabarits : A (usages, éditeur, publication), B (accompagnement), preuve réelle (captures d'algodata.fr). Texte inchangé.
   Se charge après ad-gipco-v3.css, limitée à main.wa2. Le vert profond reste rare : haut de page, réalisations, appel final. */

main.wa2 { --gp-encre:#14201a; --gp-nuit:#1c2b23; --gp-neige:#f5f6f2; --gp-sable:#e8ebe3; --gp-filet:#d5dad0;
           --gp-doux:#4b5850;      /* 6,4:1 au moins sur les fonds clairs */
           --gp-discret:#5a6660;   /* 5,0:1 au moins sur neige, sable et le papier des scènes */
           --wa-mousse:#2f6a47;    /* accent sur fond clair, 6,0:1 sur neige */
           --wa-mousse-n:#a6d0b2;  /* accent sur vert profond, 8,5:1 */
           --wa-clair:#e2ebe3; --wa-ombre:20,32,26; }

/* ---------- en-tête posé sur la photo, menu ouvert ---------- */
body:has(main.wa2) .ad-entete { --ad-fond:#14201a; --ad-lien:#fff; }
body:has(main.wa2) .ad-entete:has(.ad-menu[open]) { background:#14201a; }

/* ---------- photos et voiles teintés du vert profond ---------- */
main.wa2 .gp-photo { background-image:url(/images/web-adns-v2/heros-1920.webp); background-position:50% 42%; }
main.wa2 .gp-photo--fin { background-image:url(/images/web-adns-v2/fin-1600.webp); background-position:30% 50%; transform:none; filter:none; }
main.wa2 .gp-voile { background:linear-gradient(90deg,rgba(var(--wa-ombre),.6),rgba(var(--wa-ombre),.28) 40%,rgba(var(--wa-ombre),0) 56%),
                                linear-gradient(180deg,rgba(var(--wa-ombre),.45),rgba(var(--wa-ombre),0) 16%,rgba(var(--wa-ombre),0) 66%,rgba(var(--wa-ombre),.9) 100%); }
main.wa2 .gp-voile--fin { background:linear-gradient(90deg,rgba(var(--wa-ombre),0),rgba(var(--wa-ombre),.2) 30%,rgba(var(--wa-ombre),.66) 48%,rgba(var(--wa-ombre),.86) 100%); }

/* ---------- haut de page ---------- */
main.wa2 .gp-hero__t { width:min(570px,47%); }
main.wa2 .gp-hero__in { padding-top:140px; }
main.wa2 .gp-hero h1 { font-size:clamp(36px,3.6vw,50px); line-height:1; }
main.wa2 .gp-hero .gp-chap { max-width:29em; }
main.wa2 .gp-btn { background:#fff; color:var(--gp-encre); }
main.wa2 .wa-second { display:inline-flex; align-items:center; min-height:44px; margin:36px 0 0 28px; color:#fff; font-weight:600; font-size:15.5px; text-decoration:underline;
                      text-decoration-color:rgba(166,208,178,.85); text-underline-offset:5px; text-decoration-thickness:1.5px; vertical-align:middle; }
main.wa2 .wa-second:focus-visible, main.wa2 .wa-lien:focus-visible, main.wa2 .wa-bouton:focus-visible { outline:3px solid currentColor; outline-offset:3px; border-radius:4px; }
main.wa2 .wa-refs { display:block; }
main.wa2 .wa-preuve { position:relative; padding-left:24px; font-size:14.5px; font-weight:600; color:rgba(255,255,255,.88); }
main.wa2 .wa-preuve::before { content:""; position:absolute; left:0; top:.35em; width:10px; height:10px; border-radius:50%; background:var(--gp-soleil); box-shadow:inset 0 0 0 1px rgba(17,17,18,.2); }

/* l'objet : un site dans un navigateur, posé sur la table (jamais sur les personnes) */
main.wa2 .wa-h { height:auto; }
main.wa2 .wa-win { position:relative; width:100%; }
main.wa2 .win .chrome span { color:var(--gp-discret); }
main.wa2 .wa-nav { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid #eceee8; }
main.wa2 .wa-logo { display:flex; align-items:center; gap:7px; font:600 13px/1 var(--gp-titre); letter-spacing:-.01em; }
main.wa2 .wa-logo i { width:16px; height:16px; border-radius:5px; background:var(--wa-mousse); }
main.wa2 .wa-liens { display:flex; gap:12px; font-size:11px; color:var(--gp-discret); }
main.wa2 .wa-hero { display:grid; gap:5px; padding:14px 16px 12px; background:var(--wa-clair); }
main.wa2 .wa-hero b { font:600 18px/1.12 var(--gp-titre); letter-spacing:-.02em; color:var(--gp-encre); max-width:14em; }
main.wa2 .wa-hero > span { font-size:11px; line-height:1.4; color:var(--gp-doux); }
main.wa2 .wa-bt { justify-self:start; margin-top:4px; padding:7px 12px; border-radius:8px; background:var(--wa-mousse); color:#fff; font:600 11px/1 var(--gp-corps); font-style:normal; }
main.wa2 .wa-hero--c b { font-size:17px; }
main.wa2 .wa-hero--e em { font:600 10px/1 var(--gp-corps); font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:var(--wa-mousse); }
main.wa2 .wa-blocs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:12px 16px 14px; }
main.wa2 .wa-blocs--2 { grid-template-columns:repeat(2,1fr); }
main.wa2 .wa-blocs span { display:grid; gap:5px; padding:10px; border-radius:8px; background:#f3f5f0; box-shadow:inset 0 0 0 1px #e6e9e2; }
main.wa2 .wa-blocs i { display:block; height:5px; border-radius:3px; background:#cdd4c9; }
main.wa2 .wa-blocs i + i { width:62%; background:#dde2d9; }
main.wa2 .ft { color:var(--gp-doux); }
main.wa2 .ft i { margin-right:4px; color:var(--wa-mousse); }
@media (min-width: 1280px) { main.wa2 .gp-hero__scene { top:560px; right:auto; left:396px; width:300px; transform:none; } }
@media (min-width: 1024px) and (max-width: 1279px) { main.wa2 .gp-hero__scene { left:40vw; right:auto; top:520px; width:290px; transform:none; } main.wa2 .gp-hero__t { width:46%; } }

/* ---------- pastilles et avatar de l'accent mousse ---------- */
main.wa2 .pill.v { background:#dcebe0; color:#1c5234; }
main.wa2 .wa-av { background:var(--wa-clair); color:var(--wa-mousse); }
main.wa2 .wa-etat { margin:10px 0 0; }
main.wa2 .chk .r { color:var(--gp-discret); }
main.wa2 .chk .bx { background:var(--wa-mousse); }
main.wa2 .chk .bx.off { background:#fff; }

/* ---------- gabarit A : scène d'objets sur papier clair ---------- */
main.wa2 .pan.wa-clair { background:radial-gradient(ellipse 70% 80% at 92% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 60%),var(--wa-clair);
                         box-shadow:inset 0 0 0 1px rgba(var(--wa-ombre),.08); border-radius:12px; }
main.wa2 .gp-sable .pan.wa-clair { background:radial-gradient(ellipse 70% 80% at 92% 0%,rgba(255,255,255,.9),rgba(255,255,255,0) 60%),#f2f5f0; }
main.wa2 .pan.wa-clair .win, main.wa2 .pan.wa-clair .card { box-shadow:0 0 0 1px rgba(var(--wa-ombre),.08),-8px 16px 30px -12px rgba(var(--wa-ombre),.32),-22px 38px 70px -26px rgba(var(--wa-ombre),.35); }
main.wa2 .wa-ver { position:absolute; }
/* éditeur */
main.wa2 .wa-ed__corps { display:grid; grid-template-columns:150px 1fr; min-height:350px; }
main.wa2 .wa-ed__blocs { display:grid; align-content:start; gap:6px; padding:14px 12px; background:#f6f8f4; border-right:1px solid #e6e9e2; }
main.wa2 .wa-ed__blocs span { display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:8px; background:#fff; box-shadow:inset 0 0 0 1px #e1e5dc; font-size:12.5px; }
main.wa2 .wa-ed__blocs i { color:var(--wa-mousse); font-size:14px; }
main.wa2 .wa-ed__blocs .mini-t { margin:0 0 4px; }
main.wa2 .wa-ed__page { display:grid; align-content:start; gap:10px; padding:16px; background:#fff; }
main.wa2 .wa-ed__b { display:grid; gap:7px; padding:14px; border-radius:8px; box-shadow:inset 0 0 0 1px #e6e9e2; position:relative; }
main.wa2 .wa-ed__b--sel { box-shadow:inset 0 0 0 2px var(--wa-mousse); background:#f4f9f5; }
main.wa2 .wa-ed__b--img { min-height:74px; place-items:center; background:var(--wa-clair); color:var(--wa-mousse); font-size:24px; }
main.wa2 .wa-tag { position:absolute; right:10px; top:-9px; padding:3px 8px; border-radius:6px; background:var(--wa-mousse); color:#fff; font:600 10px/1.2 var(--gp-corps); }
main.wa2 .wa-l { display:block; height:6px; border-radius:3px; background:#d7ddd3; }
main.wa2 .wa-l--t { height:9px; width:55%; background:#bcc6b8; }
main.wa2 .wa-l--c { width:78%; }
/* publication */
main.wa2 .hd b i { background:var(--wa-mousse); }

/* ---------- textes des sections ---------- */
main.wa2 .wa-cas .gp-cas__t h2 { font-size:clamp(30px,3.3vw,48px); text-wrap:pretty; }
main.wa2 .wa-cas .gp-cas__t > h2 + p { margin-top:22px; }
main.wa2 .wa-usages { display:grid; gap:26px; margin:34px 0 0; padding:0; list-style:none; }
main.wa2 .wa-usages li { padding-top:22px; border-top:1px solid #cfd5ca; }
main.wa2 .wa-usages p { margin-top:8px !important; }
main.wa2 .gp-cas__t a:not(.wa-bouton) { color:var(--wa-mousse); text-decoration:underline; text-underline-offset:3px; }
main.wa2 .wa-liste { display:grid; gap:12px; margin:20px 0 0; padding:0; list-style:none; }
main.wa2 .wa-liste li { display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:start; font-size:15.5px; line-height:1.5; }
main.wa2 .wa-liste i { color:var(--wa-mousse); font-size:18px; line-height:1.3; }
main.wa2 .wa-liste--large { margin-top:28px; }
main.wa2 .wa-liste--large li { font-size:16px; }
main.wa2 .wa-encart { margin-top:28px !important; padding:4px 0 4px 18px; border-left:0; position:relative; font-weight:500; color:var(--gp-texte) !important; }
main.wa2 .wa-encart::before { content:""; position:absolute; left:0; top:11px; width:10px; height:10px; border-radius:50%; background:var(--gp-soleil); box-shadow:inset 0 0 0 1px rgba(17,17,18,.2); }
main.wa2 .wa-lien { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:600; font-size:15.5px; color:var(--wa-mousse); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1.5px; }
main.wa2 .wa-lien .ad-insec, main.wa2 .wa-fin-liens .ad-insec { display:inline; }
main.wa2 .wa-lien--n { color:var(--wa-mousse-n); }
main.wa2 .wa-bouton:focus-visible { outline-color:var(--wa-mousse); }
main.wa2 .wa-bouton { display:inline-flex; align-items:center; min-height:52px; margin-top:26px; padding:0 24px; border-radius:10px; background:var(--gp-encre); color:#fff; font-weight:600; font-size:15.5px; text-decoration:none; }


/* ---------- modes ---------- */
main.wa2 #modes .gp-tete h2 { font-size:clamp(32px,3.5vw,50px); }
main.wa2 .wa-modes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; margin-top:72px; }
main.wa2 .wa-mode { display:flex; flex-direction:column; padding:36px 36px 30px; border-radius:14px; background:#fff; box-shadow:inset 0 0 0 1px var(--gp-filet); }
main.wa2 .wa-mode__ic { display:grid; place-items:center; width:44px; height:44px; margin-bottom:22px; border-radius:12px; background:var(--wa-clair); color:var(--wa-mousse); font-size:21px; }
main.wa2 .wa-mode p { margin-top:14px; font-size:16px; line-height:1.62; color:#3f4a43; }
main.wa2 .wa-mode .wa-liste { margin-top:22px; padding-top:20px; border-top:1px solid var(--gp-filet); }
main.wa2 .wa-mode__cta { margin-top:auto; padding-top:18px; }

/* ---------- réalisations : captures réelles d'algodata.fr ---------- */
main.wa2 .wa-tete-r { grid-template-columns:minmax(0,690fr) minmax(0,408fr); }
main.wa2 .wa-r-t { display:grid; gap:6px; justify-items:start; }
main.wa2 .wa-r-t .gp-ch { color:rgba(255,255,255,.78); }
main.wa2 .wa-captures { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:72px; }
main.wa2 .wa-nav-cadre { margin:0; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.1),0 30px 60px -24px rgba(0,0,0,.6); }
main.wa2 .wa-nav-cadre__barre { display:flex; gap:6px; padding:0 14px; height:30px; align-items:center; background:#eef0ea; border-bottom:1px solid #dde1d8; }
main.wa2 .wa-nav-cadre__barre i { width:8px; height:8px; border-radius:50%; background:#cdd3c9; }
main.wa2 .wa-nav-cadre img { display:block; width:100%; height:auto; }

/* ---------- accompagnement : gabarit B ---------- */
main.wa2 .wa-etapes { display:grid; gap:0; margin:28px 0 0; padding:0; list-style:none; border-top:1px solid var(--gp-filet); counter-reset:wa; }
main.wa2 .wa-etapes li { display:grid; grid-template-columns:36px 1fr; gap:12px; align-items:start; padding:14px 0; border-bottom:1px solid var(--gp-filet); font-size:15.5px; line-height:1.5; }
main.wa2 .wa-etapes li::before { counter-increment:wa; content:counter(wa); font:600 13px/1.7 var(--gp-titre); color:var(--wa-mousse); font-variant-numeric:tabular-nums; }
main.wa2 .wa-suite { margin-top:26px !important; color:var(--gp-texte) !important; font-weight:500; }
main.wa2 .pan.wa-photo { aspect-ratio:612 / 600; background:var(--gp-encre); border-radius:12px; }
main.wa2 .wa-photo .wa-ph { position:absolute; inset:0; }
main.wa2 .wa-photo .wa-ph > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:40% 50%; }
main.wa2 .wa-photo .wa-ph::after { content:""; position:absolute; inset:0; background:linear-gradient(200deg,rgba(var(--wa-ombre),0) 40%,rgba(var(--wa-ombre),.4) 100%); }
main.wa2 .wa-photo .wa-acc { right:6%; bottom:7%; width:min(320px,56%); }
main.wa2 .wa-photo .card { box-shadow:0 0 0 1px rgba(0,0,0,.06),-10px 22px 44px -14px rgba(0,0,0,.55),-30px 50px 100px -30px rgba(0,0,0,.5); }

/* [25/10] passe de mesure : ces deux titres de section (7-8 mots) faisaient 4 lignes au lieu de 3 dans la colonne gp-tete */
main.wa2 #titre-plateforme, main.wa2 #titre-accompagnement { font-size:clamp(28px,3.7vw,52px); }
@media (max-width: 1151px) { main.wa2 #titre-accompagnement { font-size:30px; } }
@media (max-width: 360px) { main.wa2 #titre-plateforme { font-size:23px; } main.wa2 #titre-accompagnement { font-size:24px; } }

/* ---------- technique ---------- */
main.wa2 .wa-h2-large { max-width:14em; }
main.wa2 .wa-cols p { font-size:15.5px; line-height:1.62; color:#3f4a43; margin-top:12px; }
main.wa2 .wa-cols > div { border-top-color:#c9d0c4; }
main.wa2 .wa-liens-bas { display:flex; flex-wrap:wrap; gap:6px 30px; margin-top:44px; }

/* ---------- appel final ---------- */
main.wa2 .gp-fin { background:var(--gp-encre); }
main.wa2 .wa-fin-liens { display:flex; flex-wrap:wrap; gap:6px 26px; margin-top:26px !important; font-size:15px !important; }
main.wa2 .wa-fin-liens a:focus-visible { outline:3px solid #fff; outline-offset:3px; border-radius:4px; }
main.wa2 .wa-fin-liens a { display:inline-flex; align-items:center; min-height:44px; color:#fff; text-decoration:underline; text-decoration-color:rgba(166,208,178,.8); text-underline-offset:4px; }

/* ---------- le seul moment orchestré : le site se pose sur la table ---------- */
@media (prefers-reduced-motion: no-preference) {
  main.wa2 .wa-win { animation:wa-pose .7s cubic-bezier(.16,1,.3,1) .25s backwards; }
  @keyframes wa-pose { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
}

/* ---------- tablette et téléphone ---------- */
@media (max-width: 1023px) {
  main.wa2 .gp-hero__t { width:auto; }
  main.wa2 .gp-hero__scene { max-width:420px; }
  main.wa2 .wa-modes { grid-template-columns:minmax(0,1fr); margin-top:40px; }
  main.wa2 .wa-tete-r { grid-template-columns:minmax(0,1fr); row-gap:18px; }
  main.wa2 .wa-captures { grid-template-columns:minmax(0,1fr); gap:20px; margin-top:40px; max-width:640px; }
  main.wa2 .pan.wa-photo, main.wa2 .pan.wa-clair { width:100%; max-width:612px; }
}
@media (max-width: 760px) {
  main.wa2 .gp-voile { background:linear-gradient(180deg,rgba(var(--wa-ombre),.5) 0%,rgba(var(--wa-ombre),.12) 28%,rgba(var(--wa-ombre),.72) 56%,rgba(var(--wa-ombre),1) 100%); }
  main.wa2 .gp-voile--fin { background:linear-gradient(180deg,rgba(var(--wa-ombre),.2),rgba(var(--wa-ombre),.92) 50%); }
}
@media (max-width: 640px) {
  main.wa2 .gp-photo { background-image:url(/images/web-adns-v2/heros-900.webp); background-position:60% 40%; }
  main.wa2 .gp-photo--fin { background-image:url(/images/web-adns-v2/fin-900.webp); background-position:30% 50%; }
  main.wa2 .wa-second { margin:16px 0 0; display:flex; }
  main.wa2 .wa-mode { padding:26px 22px 22px; }
  main.wa2 .wa-bouton { width:100%; justify-content:center; }
  main.wa2 .pan.wa-photo { aspect-ratio:auto; display:flex; flex-direction:column; }
  main.wa2 .wa-photo .wa-ph { position:relative; inset:auto; width:100%; aspect-ratio:4 / 3; min-height:240px; flex:none; }
  main.wa2 .wa-photo .wa-acc { position:relative; right:auto; bottom:auto; width:auto; margin:-56px 16px 18px; }
  main.wa2 .wa-ed__corps { grid-template-columns:1fr; }
  main.wa2 .wa-ed__blocs { grid-template-columns:1fr 1fr; }
  main.wa2 .wa-ed__blocs .mini-t { display:none; }
}

main.wa2 .wa-h .wa-nav { padding:9px 16px; }
main.wa2 .wa-h .wa-hero b { font-size:16px; }

/* panneaux (612 × 600) mis à l'échelle de leur colonne entre 641 et 660 px ; sous 641 px la charte empile les objets pleine largeur */
@media (max-width: 660px) { main.wa2 .gp-scene { --k:0.979; } }
@media (max-width: 650px) { main.wa2 .gp-scene { --k:0.963; } }
@media (max-width: 640px) {
  main.wa2 .gp-scene > .win, main.wa2 .gp-scene > .card { width:100% !important; max-width:360px; }
  main.wa2 .wa-ver { position:relative; }
  main.wa2 .wa-ed__page { padding:12px; }
}
@media (max-width: 359px) {
  main.wa2 .gp-hero h1 { font-size:30px; }
  main.wa2 h2, main.wa2 .wa-cas .gp-cas__t h2, main.wa2 #modes .gp-tete h2 { font-size:27px; }
  main.wa2 .gp-fin h2 { font-size:25px; }
  main.wa2 .wa-mode { padding:22px 18px 18px; }
}

/* titres de section sur téléphone : pas de mot seul en ligne 2 (mesure 390 et 320 px) */
@media (max-width: 640px) { main.wa2 h2, main.wa2 .wa-cas .gp-cas__t h2, main.wa2 #modes .gp-tete h2 { font-size:clamp(25px,7.2vw,34px); } }
@media (max-width: 359px) { main.wa2 #modes .gp-tete h2 { font-size:22px; } }   /* « À vous de choisir comment / réaliser votre site » sur deux lignes à 320 px */