/* Precog Technologies — homepage V2.5
   Rule: artwork is never stretched. The orb and Earth keep their native aspect ratio,
   overlap on the same hero canvas, and the HTML typography scales independently. */
html, body.home-rebuilt { margin:0; width:100%; min-width:320px; min-height:100%; background:#01060b; }
body.home-rebuilt {
  color:#f5f7fb;
  font-family:"Segoe UI", Arial, Helvetica, sans-serif;
  line-height:1.45;
  /* N° 22 : le contenu reste accessible si la composition depasse l'ecran */
  overflow-x:hidden;
  overflow-y:auto;
}
.home-rebuilt * { box-sizing:border-box; }
.home-rebuilt a { color:inherit; text-decoration:none; }
.home-rebuilt img { display:block; }

.ph-shell {
  width:100%;
  min-height:100dvh;
  display:grid;
  /* N° 22 : chaque bande garde sa hauteur de composition mais peut grandir
     si son contenu l'exige, au lieu d'etre tronquee silencieusement. */
  grid-template-rows:
    minmax(clamp(56px, 8.8dvh, 94px), auto)
    minmax(0, 1fr)
    minmax(clamp(108px, 19.5dvh, 205px), auto)
    minmax(clamp(40px, 6.3dvh, 70px), auto);
  background:#01060b;
}

/* Header */
.ph-header {
  display:grid;
  grid-template-columns:minmax(235px, 23vw) minmax(560px,1fr) clamp(150px,13.5vw,195px);
  gap:clamp(12px,1.8vw,32px);
  align-items:center;
  padding:0 clamp(18px,2.15vw,34px);
  background:#010609;
  position:relative;
  z-index:20;
  min-width:0;
}
.ph-logo { display:flex; align-items:center; min-width:0; }
.ph-logo img { width:min(100%,348px); height:auto; aspect-ratio:382/76; object-fit:contain; object-position:left center; }
.ph-logo { overflow:visible; }
.ph-nav { min-width:0; height:100%; display:flex; align-items:center; justify-content:space-between; gap:clamp(7px,.95vw,17px); white-space:nowrap; font-size:clamp(11px,.79vw,13px); color:#f3f3f3; }
.ph-nav a { height:100%; display:flex; align-items:center; position:relative; padding:0 1px; }
.ph-nav a:hover { color:#4bdcff; }
.ph-nav a.active { color:#0fcfff; }
.ph-nav a.active::after { content:""; position:absolute; left:0; right:0; bottom:22%; height:2px; background:#0fcfff; }
.ph-contact { height:clamp(36px,4.3dvh,46px); border:1px solid #1b80d6; border-radius:999px; display:flex; align-items:center; justify-content:center; gap:clamp(7px,.8vw,13px); white-space:nowrap; font-size:clamp(11px,.79vw,13px); }
.ph-contact:hover { border-color:#4bdcff; background:rgba(16,100,171,.13); }
.ph-contact svg { width:clamp(15px,1.35vw,20px); height:clamp(15px,1.35vw,20px); fill:none; stroke:#fff; stroke-width:1.25; }

/* Hero: one canvas. The two artworks overlap; neither is assigned a forced height. */
.ph-hero {
  position:relative;
  min-height:0;
  overflow:hidden;
  border-bottom:1px solid rgba(106,143,171,.28);
  background:
    radial-gradient(ellipse at 50% 90%, rgba(8,52,83,.44), transparent 45%),
    linear-gradient(180deg,#01060b 0%,#020a11 75%,#03111d 100%);
}
.ph-orb-art {
  position:absolute;
  z-index:1;
  top:clamp(-92px,-10dvh,-34px);
  right:0;
  width:100vw;
  height:auto;
  max-width:none;
  pointer-events:none;
  user-select:none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 73%, rgba(0,0,0,.96) 80%, rgba(0,0,0,.72) 88%, rgba(0,0,0,.34) 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 73%, rgba(0,0,0,.96) 80%, rgba(0,0,0,.72) 88%, rgba(0,0,0,.34) 94%, transparent 100%);
}
/* soften the left side of the artwork into the page background; this also guarantees
   no residual source lettering can ever show behind the live HTML text. */
.ph-hero::before {
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,#01060b 0%,rgba(1,6,11,.99) 18%,rgba(1,6,11,.92) 27%,rgba(1,6,11,.46) 40%,rgba(1,6,11,0) 55%);
}
.ph-hero::after {
  content:"";
  position:absolute;
  z-index:2;
  inset:auto 0 18% 0;
  height:32%;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 78% 16%, rgba(10,20,34,0) 0%, rgba(8,15,24,.08) 24%, rgba(5,11,18,.24) 42%, rgba(3,8,13,.52) 60%, rgba(2,7,11,.82) 74%, rgba(1,6,11,0) 100%),
    linear-gradient(to bottom, rgba(1,6,11,0) 0%, rgba(1,6,11,.05) 38%, rgba(1,6,11,.18) 55%, rgba(1,6,11,.36) 70%, rgba(1,6,11,.62) 84%, rgba(1,6,11,0) 100%);
}

.ph-earth-art {
  position:absolute;
  z-index:3;
  left:0;
  bottom:clamp(-62px,-4.2vw,-28px);
  width:100vw;
  height:auto;
  max-width:none;
  pointer-events:none;
  user-select:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, rgba(0,0,0,.45) 5%, rgba(0,0,0,.82) 11%, #000 18%, #000 100%);
  mask-image:linear-gradient(to bottom, transparent 0, rgba(0,0,0,.45) 5%, rgba(0,0,0,.82) 11%, #000 18%, #000 100%);
}
.ph-hero-copy {
  position:relative;
  z-index:6;
  width:min(39vw,570px);
  padding-left:clamp(28px,4.45vw,70px);
  padding-top:clamp(36px,7.2dvh,86px);
}
.ph-kicker { margin:0 0 clamp(9px,1.55dvh,19px); color:#0fcfff; font-size:clamp(11px,1.22dvh,14px); line-height:1; letter-spacing:.17em; font-weight:400; white-space:nowrap; }
.ph-hero h1 { margin:0; max-width:none; color:#fafafa; font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:clamp(36px,5.75dvh,63px); line-height:1.02; letter-spacing:-.035em; }
.ph-hero h1 span { color:#0879ff; }
.ph-rule { width:clamp(112px,10.8vw,165px); height:2px; margin:clamp(9px,1.55dvh,20px) 0; background:#0fcfff; }
.ph-intro { margin:0; color:#f2f2f2; font-size:clamp(13px,1.32dvh,16px); line-height:1.75; font-weight:350; }
.ph-cta { margin-top:clamp(10px,1.8dvh,24px); width:clamp(185px,16vw,246px); height:clamp(31px,3.9dvh,42px); border-radius:999px; display:flex; align-items:center; justify-content:center; gap:12px; background:linear-gradient(90deg,#073c97,#0b49ad); color:#fff; font-size:clamp(11px,.79vw,13px); font-weight:500; }
.ph-cta b { font-size:clamp(17px,1.6vw,24px); font-weight:300; line-height:1; margin-top:-2px; }
.ph-cta:hover { filter:brightness(1.08); }

/* Five pillars */
.ph-pillars { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:0 clamp(12px,1.45vw,22px); background:linear-gradient(180deg,#05101a 0%,#020a11 100%); border-bottom:1px solid rgba(106,143,171,.25); min-height:0; }
.ph-pillar { min-width:0; position:relative; text-align:center; padding:clamp(9px,1.2dvh,17px) clamp(7px,1vw,16px) 9px; }
.ph-pillar + .ph-pillar::before { content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background:rgba(187,210,225,.27); }
/* N° 38 : zone de dessin carree identique pour les 5 pictogrammes -> meme masse optique */
.ph-pillar img { width:clamp(50px,7.7dvh,85px); height:clamp(50px,7.7dvh,85px); max-width:none; object-fit:contain; margin:0 auto clamp(1px,.3dvh,4px); }
.ph-pillar h2 { margin:0 0 clamp(2px,.45dvh,6px); color:#fff; font-family:"Segoe UI",Arial,sans-serif; font-size:clamp(13px,1.38dvh,16px); line-height:1.2; font-weight:400; letter-spacing:0; }
.ph-pillar p { margin:0 auto; max-width:275px; color:#ececec; font-size:clamp(11px,1.1dvh,13px); line-height:1.5; font-weight:300; }

/* Footer */
.ph-footer { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr) 42px; align-items:center; gap:clamp(10px,1.7vw,26px); padding:0 clamp(28px,5.5vw,86px); background:#02080e; color:#d8d8d8; font-family:Georgia,"Times New Roman",serif; font-size:clamp(11px,1.22dvh,15px); min-height:0; }
.ph-legal { display:flex; align-items:center; gap:clamp(14px,3vw,47px); white-space:nowrap; }
.ph-legal i { width:1px; height:clamp(12px,1.8dvh,20px); background:rgba(220,220,220,.48); flex:0 0 auto; }
.ph-copyright { justify-self:end; white-space:nowrap; }
.ph-linkedin { justify-self:end; width:clamp(24px,3dvh,34px); height:clamp(24px,3dvh,34px); border:1px solid #d4d4d4; border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:Arial,sans-serif; font-weight:700; font-size:clamp(14px,1.8dvh,20px); }

/* Narrow/short desktops: preserve the one-screen composition by shrinking text and bands,
   not by stretching the artwork. */
@media (max-width:1180px) and (min-width:981px) {
  .ph-header { grid-template-columns:235px minmax(500px,1fr) 145px; gap:10px; padding-inline:16px; }
  .ph-logo img { width:235px; }
  .ph-nav,.ph-contact { font-size:10.5px; }
  .ph-hero-copy { width:43vw; padding-left:30px; }
  .ph-footer { padding-inline:28px; }
}
@media (min-width:981px) and (max-height:620px) {
  .ph-shell { grid-template-rows:54px minmax(0,1fr) 112px 40px; }
  .ph-logo img { width:245px; }
  .ph-hero-copy { padding-top:16px; }
  .ph-hero h1 { font-size:34px; }
  .ph-kicker { font-size:10.5px; margin-bottom:8px; }
  .ph-rule { margin:8px 0; }
  .ph-intro { font-size:12px; line-height:1.55; }
  .ph-cta { margin-top:9px; height:30px; }
  .ph-pillar img { width:48px; height:48px; }
  .ph-pillar h2 { font-size:12px; }
  .ph-pillar p { font-size:10.5px; line-height:1.4; }
  .ph-footer { font-size:10.5px; }
  .ph-orb-art { top:-122px; }
  .ph-earth-art { bottom:-76px; }
}

/* Tablet/mobile: normal flow is more legible than forcing a one-screen desktop layout. */
@media (max-width:980px) {
  body.home-rebuilt { overflow:auto; }
  .ph-shell { width:100%; height:auto; min-height:100dvh; display:block; overflow:visible; }
  .ph-header { min-height:74px; grid-template-columns:1fr auto; padding:10px 18px; }
  .ph-logo img { width:min(255px,66vw); }
  .ph-nav { display:none; }
  .ph-contact { width:44px; padding:0; }
  .ph-contact span { display:none; }
  .ph-hero { min-height:620px; }
  .ph-orb-art { width:145%; right:-38%; top:12px; }
  .ph-earth-art { width:150%; left:-25%; bottom:-20px; }
  .ph-hero::before { background:linear-gradient(90deg,#01060b 0%,rgba(1,6,11,.95) 31%,rgba(1,6,11,.28) 70%,transparent 100%); }
  .ph-hero-copy { width:min(560px,100%); padding:64px 22px 0; }
  .ph-kicker { font-size:10px; white-space:normal; }
  .ph-hero h1 { font-size:clamp(42px,12vw,58px); }
  .ph-intro { max-width:520px; font-size:13px; line-height:1.7; }
  .ph-wide-only { display:none; }
  .ph-pillars { grid-template-columns:1fr 1fr; padding:0 16px; }
  .ph-pillar { min-height:168px; padding:20px 12px; }
  .ph-pillar:nth-child(odd)::before { display:none; }
  .ph-pillar:nth-child(5) { grid-column:1 / -1; }
  .ph-pillar img { width:74px; height:74px; }
  .ph-pillar h2 { font-size:14px; }
  .ph-pillar p { font-size:11px; line-height:1.65; }
  .ph-footer { min-height:116px; grid-template-columns:1fr; padding:20px; gap:10px; text-align:center; }
  .ph-legal { justify-content:center; flex-wrap:wrap; gap:11px; }
  .ph-legal i { display:none; }
  .ph-copyright,.ph-linkedin { justify-self:center; }
}
@media (max-width:560px) {
  .ph-header { min-height:68px; }
  .ph-hero { min-height:600px; }
  .ph-hero-copy { padding:58px 18px 0; }
  .ph-hero h1 { font-size:43px; }
  .ph-pillars { grid-template-columns:1fr; }
  .ph-pillar:nth-child(5) { grid-column:auto; }
  .ph-pillar + .ph-pillar::before,.ph-pillar:nth-child(odd)::before { display:block; left:10%; right:10%; top:0; bottom:auto; width:auto; height:1px; }
}

/* =========================================================
   LOT A — CORRECTIFS ADDITIFS (audit 2026-08-08)
   N° 30 focus clavier · N° 35 cibles tactiles (accueil)
   ========================================================= */
.home-rebuilt :where(a, button, [tabindex]):focus-visible {
  outline: 2px solid #4bdcff;
  outline-offset: 3px;
  border-radius: 6px;
}
@media (max-width: 980px) {
  .home-rebuilt .ph-legal a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px;
  }
}

/* --- LOT C / N° 1 : navigation mobile de la page d'accueil ---
   Sous 980 px, .ph-nav etait simplement masquee sans aucun remplacement :
   l'accueil n'offrait plus aucun acces aux autres pages. --- */
.ph-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid #1b80d6;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  padding: 10px 12px;
  cursor: pointer;
}
.ph-menu-btn:hover { border-color: #42c8ff; background: rgba(16,100,171,.13); }

@media (max-width: 980px) {
  .ph-header { grid-template-columns: 1fr auto auto; gap: 10px; }
  .ph-menu-btn { display: block; order: 3; }
  .ph-contact { order: 2; }
  .ph-nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    height: auto;
    padding: 8px 20px 18px;
    background: #02080e;
    box-shadow: 0 18px 34px rgba(0,0,0,.55);
    border-bottom: 1px solid rgba(106,143,171,.35);
    font-size: 14px;
    white-space: normal;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .ph-nav.open { visibility: visible; opacity: 1; transform: none; }
  .ph-nav a { height: auto; min-height: 44px; padding: 0 2px; }
  .ph-nav a.active::after { left: 2px; right: auto; width: 44px; bottom: 8px; }
}

/* --- LOT D / N° 3 : sélecteur de langue sur la page d'accueil --- */
.ph-header { grid-template-columns:
  minmax(235px, 23vw) minmax(0, 1fr) auto clamp(150px, 13.5vw, 195px); }
.ph-lang {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-size: clamp(9px, .76vw, 12px);
  letter-spacing: .08em;
  color: #f3f3f3;
}
.ph-lang a { padding: 0 4px; }
.ph-lang a:hover { color: #4bdcff; }
.ph-lang a.active { color: #0fcfff; font-weight: 700; }
.ph-lang span { opacity: .45; }

@media (max-width:1180px) and (min-width:981px) {
  .ph-header { grid-template-columns: 235px minmax(0,1fr) auto 145px; }
  .ph-lang { font-size: 10.5px; }
}
@media (max-width: 980px) {
  .ph-header { grid-template-columns: 1fr auto auto auto; }
  .ph-lang { order: 1; font-size: 12px; }
  .ph-lang a { display: inline-flex; align-items: center;
               justify-content: center; min-height: 44px; padding: 0 6px; }
  .ph-contact { order: 2; }
  .ph-menu-btn { order: 3; }
}
@media (max-width: 380px) {
  .ph-header { gap: 6px; padding-inline: 12px; }
  .ph-lang { font-size: 11px; }
  .ph-lang a { padding: 0 3px; }
}

/* --- N° 42 : separateurs du pied de page en CSS (les <i></i> vides ont ete retires) --- */
.ph-legal a + a::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-right: clamp(14px, 3vw, 47px);
  vertical-align: -.14em;
  background: rgba(220,220,220,.48);
}
@media (max-width: 980px) { .ph-legal a + a::before { display: none; } }

/* --- N° 18 : suppression de la zone morte du hero sur mobile et tablette.
   La hauteur etait figee a 620/600 px alors que le contenu n'en occupait
   qu'environ 400 : le bloc se dimensionne desormais sur son contenu. --- */
@media (max-width: 980px) {
  .ph-hero { min-height: 0; padding-bottom: clamp(150px, 30vw, 250px); }
  .ph-orb-art { width: 120%; right: -15%; top: 4px; }
  .ph-earth-art { width: 132%; left: -16%; bottom: -14px; }
}
@media (max-width: 560px) {
  .ph-hero { min-height: 0; padding-bottom: clamp(130px, 34vw, 190px); }
}

/* --- N° 33 : le repere <main> englobe le hero et les piliers sans modifier la grille --- */
.ph-shell > main { display: contents; }

/* --- Le bouton enveloppe fait doublon avec l'entree CONTACT du menu :
   retire sous 560 px pour rendre sa place au logo. --- */
@media (max-width: 560px) { .ph-contact { display: none; } }