/* Page Ingénierie (/developpement-progiciels), mise en scène « graphite et cuivre » (maquette du 23/10/2026).
   Démarche : v1.1/MISE-EN-SCENE.md. Décisions d'Antoine du 23/10 : palette graphite et cuivre ; haut de page en photo
   d'ambiance avec un seul objet, la mise en production d'Univers ; gabarits A (situations, existant), B (offre),
   C (Java et Spring Boot). Rédactionnel inchangé. Se charge après ad-gipco-v3.css, limitée à main.ig2 (et à l'en-tête
   posé sur sa photo). Le graphite profond reste rare : haut de page, preuve Java, appel final. */

main.ig2 { --gp-encre:#1b1a18; --gp-nuit:#252320; --gp-neige:#f6f4f0; --gp-sable:#ece7df; --gp-filet:#dcd5ca;
           --gp-doux:#56524c;   /* 6,1:1 au moins sur les fonds clairs */
           --gp-discret:#615c55; /* 5,2:1 au moins sur neige, sable et le papier des scènes */
           --ig-cuivre:#8a4f2d;  /* accent sur fond clair, 5,1:1 au moins */
           --ig-cuivre-n:#d79a6c;/* accent sur graphite, 7,2:1 */
           --ig-clair:#ebe4d9; --ig-ombre:27,26,24; }

/* ---------- en-tête posé sur la photo, menu ouvert ---------- */
body:has(main.ig2) .ad-entete { --ad-fond:#1b1a18; --ad-lien:#fff; }   /* les liens du menu mobile ouvert héritaient de l'encre : illisibles sur graphite */
body:has(main.ig2) .ad-entete:has(.ad-menu[open]) { background:#1b1a18; }

/* ---------- photos et voiles teintés du graphite ---------- */
main.ig2 .gp-photo { background-image:url(/images/ingenierie-v2/heros-1920.webp); background-position:50% 42%; }
main.ig2 .gp-photo--fin { background-image:url(/images/ingenierie-v2/fin-1600.webp); background-position:30% 50%; transform:none; filter:none; }
main.ig2 .gp-voile { background:linear-gradient(90deg,rgba(var(--ig-ombre),.6),rgba(var(--ig-ombre),.28) 40%,rgba(var(--ig-ombre),0) 56%),
                                 linear-gradient(180deg,rgba(var(--ig-ombre),.45),rgba(var(--ig-ombre),0) 16%,rgba(var(--ig-ombre),0) 66%,rgba(var(--ig-ombre),.9) 100%); }
/* fin : les objets à gauche, le texte à droite sur le mur calme ; le voile se pose du côté du texte */
main.ig2 .gp-voile--fin { background:linear-gradient(90deg,rgba(var(--ig-ombre),.05),rgba(var(--ig-ombre),.42) 45%,rgba(var(--ig-ombre),.8) 100%); }

/* ---------- haut de page ---------- */
main.ig2 .gp-hero__t { width:min(560px,47%); }
main.ig2 .gp-hero h1 { font-size:clamp(40px,4.1vw,58px); line-height:.98; }
main.ig2 .gp-hero .gp-chap { max-width:28em; }
/* offre : les cinq verbes sur toute la largeur, en deux lignes équilibrées ; le chapeau dessous */
main.ig2 #offre .gp-tete { grid-template-columns:minmax(0,1fr); row-gap:24px; }
main.ig2 #offre .gp-tete h2 { max-width:none; }
main.ig2 #offre .gp-ch { max-width:40em; }
/* titres des colonnes de texte (situations, existant) : trois lignes au plus */
main.ig2 .ig-cas h2 { font-size:clamp(32px,3.6vw,52px); }
main.ig2 .ig-branches { display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:22px; }
main.ig2 .ig-lien2 { display:inline-flex; align-items:center; min-height:44px; color:#fff; font-weight:600; font-size:15.5px;
                     text-decoration:underline; text-decoration-color:rgba(215,154,108,.8); text-underline-offset:5px; text-decoration-thickness:1.5px; }
main.ig2 .gp-fin .ig-lien2 { margin:36px 0 0 28px; vertical-align:middle; }
main.ig2 .ig-lien2:focus-visible { outline:3px solid #fff; outline-offset:3px; border-radius:4px; }
main.ig2 .ig-refs { display:block; }
main.ig2 .ig-micro { display:flex; align-items:center; gap:12px; font-size:14px; font-weight:600; color:rgba(255,255,255,.86); }
main.ig2 .ig-micro::before { content:""; flex:none; 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 se pose sur la table, entre le texte et la personne (jamais sur elle) — photo heros-c */
main.ig2 .ig-h { height:auto; }
main.ig2 .ig-win { position:relative; width:100%; }
main.ig2 .ig-win .chrome span { color:#615c55; }
main.ig2 .ig-wt { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid #efece6; }
main.ig2 .ig-wt b { display:block; font:600 17px/1.2 var(--gp-titre); letter-spacing:-.01em; }
main.ig2 .ig-wt span:not(.pill) { display:block; margin-top:3px; font-size:12px; color:var(--gp-discret); }
main.ig2 .pill.ig-ok { background:#e5f1e9; color:#1d5e36; }
main.ig2 .chk .r { color:var(--gp-discret); }
main.ig2 .ft { color:var(--gp-doux); }
main.ig2 .ft i { margin-right:4px; }
@media (min-width: 1280px) { main.ig2 .gp-hero__scene { top:440px; right:auto; left:600px; width:340px; transform:none; } }

/* ---------- gabarit A : scène d'objets sur papier clair (situations, existant) ---------- */
main.ig2 .pan.ig-clair { background:radial-gradient(ellipse 70% 80% at 92% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 60%),var(--ig-clair);
                         box-shadow:inset 0 0 0 1px rgba(var(--ig-ombre),.08); border-radius:12px; }
main.ig2 .gp-sable .pan.ig-clair { background:radial-gradient(ellipse 70% 80% at 92% 0%,rgba(255,255,255,.9),rgba(255,255,255,0) 60%),#f3f0ea; }
main.ig2 .ig-clair .card, main.ig2 .ig-clair .win { box-shadow:0 0 0 1px rgba(var(--ig-ombre),.08),-6px 14px 28px -14px rgba(var(--ig-ombre),.32),-18px 36px 70px -34px rgba(var(--ig-ombre),.34); }
main.ig2 .ig-clair .liens path { stroke:rgba(138,79,45,.6); }
main.ig2 .notif { background:#1b1a18; }
main.ig2 .notif span { color:rgba(255,255,255,.74); }
main.ig2 .chip { background:rgba(27,26,24,.92); }
main.ig2 .chip i { color:var(--ig-cuivre-n); }
main.ig2 .ig-ligne { display:grid; grid-template-columns:32px 1fr; gap:12px; align-items:center; padding:12px 18px; border-top:1px solid #f2f0eb; }
main.ig2 .ig-ligne .ic { width:32px; height:32px; border-radius:8px; display:grid; place-items:center; background:#f4efe8; color:var(--ig-cuivre); font-size:14px; }
main.ig2 .ig-ligne b { display:block; font-size:13.5px; font-weight:600; }
main.ig2 .ig-ligne span:not(.ic) { display:block; font-size:12px; color:var(--gp-discret); margin-top:1px; }
main.ig2 .ig-ancien { filter:saturate(.6); }
main.ig2 .ig-ancien .chrome { background:#ecebe8; }
main.ig2 .ig-fiche { display:grid; grid-template-columns:96px 1fr; gap:10px; padding:10px 18px; border-top:1px solid #f0efec; font-size:13px; }
main.ig2 .ig-fiche span { color:var(--gp-discret); font-size:12px; }
main.ig2 .ig-fiche b { font-weight:500; }
main.ig2 .ig-dec { display:grid; grid-template-columns:52px 1fr auto; gap:10px; align-items:center; padding:10px 18px; border-top:1px solid #f2f0eb; font-size:13px; }
main.ig2 .ig-dec > span:first-child { font:600 11.5px var(--gp-corps); color:var(--ig-cuivre); font-variant-numeric:tabular-nums; }
main.ig2 .ig-dec b { font-weight:500; }

/* ---------- situations : quatre situations en grille de deux, sous filet ---------- */
main.ig2 .ig-quatre { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 32px; margin:48px 0 0; padding:0; list-style:none; }
main.ig2 .ig-quatre li { padding-top:20px; border-top:1px solid var(--gp-filet); }
main.ig2 .ig-quatre p { margin-top:10px; font-size:15.5px; line-height:1.6; color:var(--gp-doux); text-wrap:pretty; }

/* ---------- offre : cinq verbes, un registre numéroté ; gabarit B à côté ---------- */
main.ig2 .ig-verbes { counter-reset:ig; margin:0; padding:0; list-style:none; border-top:1px solid var(--gp-filet); }
main.ig2 .ig-verbes li { counter-increment:ig; display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:12px; padding:22px 0; border-bottom:1px solid var(--gp-filet); }
main.ig2 .ig-verbes li::before { content:counter(ig,decimal-leading-zero); grid-row:1 / span 3; font:600 13px/1.75 var(--gp-titre); color:var(--ig-cuivre); font-variant-numeric:tabular-nums; }
main.ig2 .ig-verbes li > p { grid-column:2; font-size:15.5px; line-height:1.6; color:var(--gp-doux); text-wrap:pretty; }
main.ig2 .ig-verbes li > p + p { margin-top:8px; }
main.ig2 .ig-verbes .ig-verbe { font:600 18px/1.35 var(--gp-titre); letter-spacing:-.01em; color:var(--gp-texte); margin-bottom:6px; }
main.ig2 .pan.ig-photo { aspect-ratio:612 / 600; background:var(--gp-encre); border-radius:12px; position:sticky; top:32px; }
main.ig2 .ig-photo .ig-ph { position:absolute; inset:0; }
main.ig2 .ig-photo .ig-ph > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:42% 50%; }
main.ig2 .ig-photo .ig-ph::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(200deg,rgba(var(--ig-ombre),0) 40%,rgba(var(--ig-ombre),.4) 100%); }
main.ig2 .ig-photo .ig-ph__obj { position:absolute; z-index:2; right:6%; bottom:7%; width:min(330px,56%); }
main.ig2 .ig-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); }

/* ---------- Java et Spring Boot : gabarit C, puis la frise de la reconstruction ---------- */
main.ig2 .ig-haut { align-items:center; }
main.ig2 .gp-encre .gp-txt p { color:rgba(255,255,255,.76); }
main.ig2 .gp-encre .gp-txt p.gp-p1 { color:#fff; }
main.ig2 .pan.ig-preuve { aspect-ratio:auto; background:#fff; border-radius:12px; box-shadow:-10px 28px 60px -30px rgba(0,0,0,.6); }
main.ig2 .ig-c { padding:40px 40px 36px; color:var(--gp-texte); text-align:left; }
main.ig2 .ig-c__n { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
main.ig2 .ig-c__n b { font:600 clamp(96px,10vw,148px)/.86 var(--ad-police-titre); letter-spacing:-.05em; color:var(--gp-encre); font-variant-numeric:tabular-nums; }
main.ig2 .ig-c__n span { font:600 21px/1.2 var(--gp-titre); letter-spacing:-.015em; }
main.ig2 .ig-c__sur { margin-top:16px; font-size:15px; line-height:1.55; color:var(--gp-doux); max-width:30em; }
main.ig2 .ig-c__sur b { color:var(--gp-texte); font-weight:600; }
main.ig2 .ig-c__liste { position:relative; margin-top:26px; border-radius:12px; box-shadow:0 0 0 1px rgba(var(--ig-ombre),.1); }
main.ig2 .ig-c__liste .row:first-child { border-top:0; }
main.ig2 .ig-frise { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; margin:96px 0 0; padding:0; list-style:none; position:relative; }
main.ig2 .ig-frise::before { content:""; position:absolute; left:0; right:0; top:6px; height:1px; background:var(--gp-filet-n); }
main.ig2 .ig-frise li { position:relative; padding-top:34px; }
main.ig2 .ig-frise li::before { content:""; position:absolute; left:0; top:0; width:13px; height:13px; border-radius:50%; background:var(--gp-encre); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6); }
main.ig2 .ig-frise li:first-child::before { background:var(--gp-soleil); box-shadow:none; }
main.ig2 .ig-frise__v { font:600 clamp(30px,2.8vw,40px)/1 var(--ad-police-titre); letter-spacing:-.03em; color:#fff; }
main.ig2 .ig-frise li p + p { margin-top:12px; font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.74); max-width:28ch; }

/* ---------- existant : le bloc 4D ---------- */
main.ig2 .ig-cas .gp-cas__t h2 + p { margin-top:26px; }
main.ig2 .ig-chap { font-size:18px !important; color:var(--gp-texte) !important; }
main.ig2 .ig-btn2 { display:inline-flex; align-items:center; min-height:48px; margin-top:30px; padding:0 22px; border-radius:10px; color:var(--gp-texte);
                    box-shadow:inset 0 0 0 1.5px var(--gp-texte); font-weight:600; font-size:15px; text-decoration:none; }
main.ig2 .ig-btn2:focus-visible { outline:3px solid var(--gp-texte); outline-offset:3px; }
@media (hover: hover) {
  main.ig2 .ig-btn2 { transition:background-color .12s ease, color .12s ease; }
  main.ig2 .ig-btn2:hover { background:var(--gp-texte); color:#fff; }
  main.ig2 .ig-lien2:hover { text-decoration-color:var(--ig-cuivre-n); }
}

/* ---------- appel final ---------- */
main.ig2 .gp-fin { background:var(--gp-encre); }
main.ig2 .ig-tel { margin-top:22px !important; font-size:15px !important; color:rgba(255,255,255,.74) !important; }
main.ig2 .ig-tel a { color:#fff; text-decoration-color:rgba(215,154,108,.8); text-underline-offset:4px; }

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

/* ---------- tablette et téléphone ---------- */
@media (max-width: 1023px) {
  main.ig2 .gp-hero__t { width:auto; }
  main.ig2 .gp-hero__scene { max-width:420px; }
  main.ig2 .pan.ig-photo { position:relative; top:auto; }
  main.ig2 .ig-haut { row-gap:40px; }
  main.ig2 .ig-frise { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:40px; margin-top:64px; }
  main.ig2 .ig-frise::before { display:none; }
}
@media (max-width: 960px) {
  main.ig2 .pan.ig-photo, main.ig2 .pan.ig-preuve { width:100%; max-width:612px; }
}
@media (max-width: 760px) {
  main.ig2 .gp-voile { background:linear-gradient(180deg,rgba(var(--ig-ombre),.5) 0%,rgba(var(--ig-ombre),.12) 28%,rgba(var(--ig-ombre),.72) 56%,rgba(var(--ig-ombre),1) 100%); }
  main.ig2 .gp-voile--fin { background:linear-gradient(180deg,rgba(var(--ig-ombre),.2),rgba(var(--ig-ombre),.92) 50%); }
}
@media (max-width: 640px) {
  main.ig2 .gp-photo { background-image:url(/images/ingenierie-v2/heros-900.webp); background-position:60% 40%; }
  main.ig2 .gp-photo--fin { background-image:url(/images/ingenierie-v2/fin-900.webp); background-position:30% 50%; }
  main.ig2 .ig-quatre { grid-template-columns:minmax(0,1fr); gap:24px; margin-top:32px; }
  main.ig2 .ig-verbes li { grid-template-columns:36px minmax(0,1fr); padding:18px 0; }
  main.ig2 .ig-verbes li > p { font-size:14.5px; }
  main.ig2 .pan.ig-photo { aspect-ratio:auto; display:flex; flex-direction:column; }
  main.ig2 .ig-photo .ig-ph { position:relative; inset:auto; width:100%; aspect-ratio:4 / 3; min-height:240px; flex:none; }
  main.ig2 .ig-photo .ig-ph__obj { position:relative; right:auto; bottom:auto; width:auto; margin:-56px 16px 18px; }
  main.ig2 .ig-c { padding:28px 20px 24px; }
  main.ig2 .ig-c__n span { font-size:18px; }
  main.ig2 .ig-frise { grid-template-columns:minmax(0,1fr); }
  main.ig2 .gp-fin .ig-lien2 { margin:16px 0 0; display:flex; }
  main.ig2 .ig-btn2 { width:100%; justify-content:center; }
}
/* entre 1 024 et 1 279 px : l'objet se range contre le bord droit, sous la ligne des yeux (en fin de feuille : MISE-EN-SCENE §9) */
@media (min-width: 1024px) and (max-width: 1279px) { main.ig2 .gp-hero__scene { left:52vw; right:auto; top:520px; width:290px; transform:none; } main.ig2 .gp-hero__t { width:46%; } }