/* ==========================================================================
   Florent Andarelli — grille
   Un calque de papier millimétré derrière la page, dans l'esprit suisse :
   un module unique, des filets de marge, rien d'autre.

   Ce fichier s'ajoute APRÈS styles.css. Il ne remplace rien :
   il neutralise seulement les fonds blancs opaques des sections,
   pour que la grille se voie, et pose le calque derrière le contenu.

   Pour retirer la grille : supprimer les deux lignes grille.css / grille.js
   dans les pages. Le site revient exactement à son état précédent.
   ========================================================================== */

:root{
  /* Module : 40 px, la marge de page du site. Les verticales tombent donc
     exactement sur le bord du contenu, et tout s'aligne. */
  --gr-module: 40px;
  --gr-fort: 200px;            /* une ligne plus marquée tous les 5 modules */
  --gr-marge: 40px;            /* filets de marge gauche / droite */

  --gr-trait: rgba(0,0,0,.05);       /* filet fin */
  --gr-trait-fort: rgba(0,0,0,.08);  /* filet tous les 5 modules */
  --gr-trait-col: rgba(0,0,0,.11);   /* les 12 colonnes de mise en page */
  --gr-trait-marge: rgba(0,0,0,.16); /* filets de marge */
  --gr-spot: rgba(0,0,0,.16);        /* grille révélée sous le curseur */

  --gr-ease: cubic-bezier(.2,.7,.2,1);
}

body.dark-mode{
  --gr-trait: rgba(255,255,255,.05);
  --gr-trait-fort: rgba(255,255,255,.085);
  --gr-trait-col: rgba(255,255,255,.12);
  --gr-trait-marge: rgba(255,255,255,.17);
  --gr-spot: rgba(255,255,255,.17);
}

/* ---- Le calque ---------------------------------------------------------- */

.grille{
  position: fixed;
  inset: 0;
  z-index: -1;              /* derrière tout le contenu, devant le fond de page */
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

.grille i{
  position: absolute;
  inset: -80px 0 0 0;
  height: calc(100% + 160px);
  display: block;
  /* glissement léger au scroll, posé par grille.js */
  transform: translate3d(0, calc(var(--gr-sy, 0) * -1px), 0);
  will-change: transform;
}

/* horizontales — se tracent de gauche à droite au chargement */
.grille .h{
  background:
    repeating-linear-gradient(to bottom, var(--gr-trait-fort) 0 1px, transparent 1px var(--gr-fort)),
    repeating-linear-gradient(to bottom, var(--gr-trait)      0 1px, transparent 1px var(--gr-module));
}

/* verticales — se tracent de haut en bas, juste après */
.grille .v{
  background:
    repeating-linear-gradient(to right, var(--gr-trait-fort) 0 1px, transparent 1px var(--gr-fort)),
    repeating-linear-gradient(to right, var(--gr-trait)      0 1px, transparent 1px var(--gr-module));
}

/* Les douze colonnes de mise en page : celles sur lesquelles les titres,
   les chapeaux et les colonnes de projets viennent réellement se poser.
   Elles se tracent en dernier, de gauche à droite. */
.grille .c{
  inset: 0;
  height: 100%;
  transform: none;
  background: repeating-linear-gradient(to right,
    var(--gr-trait-col) 0 1px, transparent 1px calc(100% / 12));
  background-position: var(--gr-marge) 0;
  background-size: calc(100% - var(--gr-marge) * 2) 100%;
  background-repeat: no-repeat;
}

/* filets de marge : les deux verticales sur lesquelles le contenu s'aligne */
.grille .m{
  inset: 0;
  height: 100%;
  transform: none;
  background:
    linear-gradient(var(--gr-trait-marge), var(--gr-trait-marge)) var(--gr-marge) 0 / 1px 100% no-repeat,
    linear-gradient(var(--gr-trait-marge), var(--gr-trait-marge)) calc(100% - var(--gr-marge)) 0 / 1px 100% no-repeat;
}

/* la même grille, plus franche, révélée autour du curseur
   (la lampe posée sur la planche à dessin) */
.grille .s{
  background:
    repeating-linear-gradient(to bottom, var(--gr-spot) 0 1px, transparent 1px var(--gr-module)),
    repeating-linear-gradient(to right,  var(--gr-spot) 0 1px, transparent 1px var(--gr-module));
  -webkit-mask: radial-gradient(260px circle at var(--gr-mx, -999px) var(--gr-my, -999px),
                #000 0%, rgba(0,0,0,.55) 42%, transparent 72%);
          mask: radial-gradient(260px circle at var(--gr-mx, -999px) var(--gr-my, -999px),
                #000 0%, rgba(0,0,0,.55) 42%, transparent 72%);
  opacity: 0;
  transition: opacity .6s ease;
}
/* le curseur personnalisé du site reste prioritaire : on n'active la lampe
   que sur les vrais pointeurs */
@media (hover: none), (pointer: coarse){ .grille .s{ display: none; } }

/* ---- Tracé au chargement ------------------------------------------------- */

@media (prefers-reduced-motion: no-preference){
  .grille .h{ clip-path: inset(0 100% 0 0); transition: clip-path 1.3s var(--gr-ease); }
  .grille .v{ clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--gr-ease) .3s; }
  .grille .c{ clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--gr-ease) .75s; }
  .grille .m{ opacity: 0; transition: opacity .9s ease 1.3s; }

  body.grille-prete .grille .h,
  body.grille-prete .grille .v,
  body.grille-prete .grille .c{ clip-path: inset(0 0 0 0); }
  body.grille-prete .grille .m{ opacity: 1; }
}

/* ---- Sections rendues transparentes -------------------------------------
   Ces sections posaient un aplat blanc (ou presque noir en mode sombre)
   identique au fond de page : les rendre transparentes ne change rien à
   l'œil, mais laisse passer la grille.
   Le noir reste noir : en-tête, pied de page et sections contact gardent
   leur aplat, la grille s'y arrête — c'est voulu.
--------------------------------------------------------------------------- */

.hero-section,
.archive-section,
.clients-section,
.about-page-section,
.about-extended,
.home-intro,
.page-hero,
.page-section,
.related-section,
.project-detail-page,
.project-title-section,
.project-content-section,
body.dark-mode .hero-section,
body.dark-mode .archive-section,
body.dark-mode .clients-section,
body.dark-mode .about-page-section,
body.dark-mode .about-extended,
body.dark-mode .home-intro,
body.dark-mode .page-hero,
body.dark-mode .page-section,
body.dark-mode .related-section,
body.dark-mode .project-detail-page,
body.dark-mode .project-title-section,
body.dark-mode .project-content-section{
  background: transparent;
}

/* ---- Alignement sur le module -------------------------------------------
   Deux retouches discrètes, dans l'esprit suisse : les filets du site
   tombent sur la grille plutôt qu'à côté.
--------------------------------------------------------------------------- */

/* Le trait sous le header s'aligne sur la grille au lieu de flotter */
header{ box-shadow: 0 1px 0 var(--gr-trait-marge); }
body.dark-mode header{ box-shadow: 0 1px 0 var(--gr-trait-marge); }

/* ---- Mobile --------------------------------------------------------------
   La marge de page passe à 20 px : la grille se décale d'autant pour que
   les verticales tombent encore sur le bord du contenu.
--------------------------------------------------------------------------- */

/* Sous 1000 px la mise en page n'est plus sur douze colonnes :
   les colonnes de la grille disparaissent, elles mentiraient. */
@media (max-width: 1000px){ .grille .c{ display: none; } }

@media (max-width: 768px){
  :root{ --gr-marge: 20px; }
  .grille .v{ background-position: -20px 0, -20px 0; }
  .grille .s{ background-position: 0 0, -20px 0; }
}

/* ---- Impression ---------------------------------------------------------- */

@media print{ .grille{ display: none; } }