/* Graphen Studio — structure commune aux pages intérieures
   (Création de contenu, Publication, Prospection, Stratégie éditoriale)

   Grille 6 colonnes, gouttière de 20 px, marge latérale de 10 px. */

:root {
  --gap: 20px;
  --edge: 10px;
  --col: calc((100% - 2 * var(--edge) - 5 * var(--gap)) / 6);
}

/* La page d'accueil met le body en colonne flex pour son pied mobile ;
   les pages intérieures n'en ont pas besoin. */
body { display: block; }

/* ---------- En-tête : « Menu », en haut à gauche ---------- */

.p-nav {
  position: fixed;
  top: 20px;
  left: var(--edge);
  z-index: 30;
  padding: 1px;
}

/* ---------- Pied : logo, en bas à gauche ---------- */

.p-foot {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
}
.p-foot > * { pointer-events: auto; }

/* ---------- Cube du logo, posé par chrome.js ----------
   Même place que sur l'accueil : en bas de la colonne de gauche (33,333 %),
   à 10 px de son bord droit et 20 px du bas. Comme là-bas, il disparaît
   sous 1200 px avec le reste du pied de colonne. */

.p-cube {
  position: fixed;
  left: calc(33.333% - 10px - 26px);
  bottom: 20px;
  z-index: 20;
}

/* ---------- Grille de page ---------- */

.page {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  padding: 0 var(--edge);
}

/* Colonne de gauche : titre de la page centré et fixé au défilement */
.page__title {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page__title h1 {
  font-family: "Outfit", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.025em;
}

/* ================= Tablette et mobile ================= */

/* Disposition sous 1200 px : logo et Menu en en-tête */
@media (max-width: 1199px) {
  :root { --gap: 10px; }

  .p-nav { left: auto; right: var(--edge); }
  .p-foot { display: none; }
  .p-cube { display: none; }

  .page {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 140px;
  }
  .page__title {
    position: static;
    height: auto;
    padding-bottom: 106px;
  }
  .page__title h1 { font-size: 18px; }
}

/* Libellé réservé aux lecteurs d'écran */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Images fixes réservées aux robots et aux IA, qui ne lisent ni les iframes
   ni les visuels posés par JS. display:none + loading="lazy" : le navigateur
   ne les affiche pas et ne les télécharge pas. */
.apercus-robots { display: none; }