/* Feuille commune : jetons, typo, grille (taper « mess »), curseurs, en-tête, pied de page. Pages : accueil, mentions légales, 404. */

/* ---- jetons : clair et sombre ---- */
:root{
  --ch: 13;
  --char: calc(var(--ch) * 1px);
  --u: calc(var(--char) * 2);

  --pad: var(--u);         /* marge latérale, gauche = droite */
  --gap: var(--pad);       /* espace entre colonnes = marge latérale */
  --n: 8;                  /* colonnes : 8 sur ordinateur, 4 sur téléphone (≤ 768 px) */
  --col: calc((100vw - (2 * var(--pad)) - ((var(--n) - 1) * var(--gap))) / var(--n));
  --s2: calc((2 * var(--col)) + var(--gap));
  --s3: calc((3 * var(--col)) + (2 * var(--gap)));
  --s4: calc((4 * var(--col)) + (3 * var(--gap)));

  --font-size: clamp(11px, .78vw, 13px);
  --line: 1.45;

  --bg:#f4f2ee;
  --ink:#111110;
  --muted:#8a877f;
  --line-c:#cbc7bf;
  --ease: cubic-bezier(.22,1,.36,1);
  --hdr-hover:#237a16;     /* survol : vert foncé en clair */

  /* mouvement (ressort sans rebond) */
  --c-ressort:linear(0,.079,.236,.403,.551,.671,.764,.833,.883,.919,.945,.962,.974,.983,.988,.992,.995,.997,.998,.999,1);
  --d-ressort-vif:440ms;
  --d-ressort:590ms;
  --d-court:160ms;
  --d-fondu-reduit:200ms;
}
/* thème sombre : déclenché par un lancer du globe */
html.dark{
  --bg:#111110;
  --ink:#f4f2ee;
  --muted:#7d7a72;
  --line-c:#33322e;
  --hdr-hover:#52ff33;     /* survol : vert électrique en sombre */
}
@media (prefers-reduced-motion:reduce){:root{--d-ressort-vif:var(--d-fondu-reduit);--d-ressort:var(--d-fondu-reduit);--c-ressort:ease}}

/* ---- base ---- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body,.dialog{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,.dialog::-webkit-scrollbar{width:0;height:0;display:none}
body{
  background-color:var(--bg);color:var(--ink);
  font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--font-size);line-height:var(--line);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.locked{overflow:hidden}
h1,h2,h3,h4,p,a,span,div,li,button,input,textarea{font-size:var(--font-size);line-height:var(--line);font-weight:400}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:0;padding:0;text-align:left}
.up{text-transform:uppercase;letter-spacing:.08em}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
input:focus-visible{outline:0}

/* ---- grille et repère (taper « mess ») ---- */
.grid{display:grid;grid-template-columns:repeat(var(--n),1fr);column-gap:var(--gap);row-gap:var(--u);padding-inline:var(--pad)}
.grid-overlay{position:fixed;inset:0;z-index:9999;pointer-events:none;display:none;padding-inline:var(--pad)}
body.show-grid .grid-overlay{display:grid;grid-template-columns:repeat(var(--n),1fr);column-gap:var(--gap)}
.grid-overlay i{background:var(--grid-fill);border-inline:1px solid var(--grid-line);height:100%}
.grid-overlay{--grid-fill:rgba(60,190,40,.035);--grid-line:rgba(60,190,40,.18)}
html.dark .grid-overlay{--grid-fill:rgba(82,255,51,.02);--grid-line:rgba(82,255,51,.13)}
body.show-grid .grid-overlay{animation:grid-in 180ms ease-out}
@keyframes grid-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){body.show-grid .grid-overlay{animation:none}}

/* ---- curseurs ---- */
:root{--cur-fleche:auto;--cur-main:pointer;--cur-texte:text}
@media (hover:hover) and (pointer:fine){
  :root{--cur-fleche:url("data:image/svg+xml,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2215%22%20height=%2220%22%20viewBox=%220%200%2019%2025%22><g%20fill=%22%23111110%22%20stroke=%22%23111110%22%20stroke-width=%222.4%22%20stroke-linejoin=%22round%22><g><path%20d=%22M2.4%202.4%20L2.4%2020.4%20L7.1%2016%20L10.2%2023.3%20L13.5%2021.9%20L10.5%2014.7%20L16.6%2014.7%20Z%22/></g></g><g%20fill=%22%2352ff33%22><g><path%20d=%22M2.4%202.4%20L2.4%2020.4%20L7.1%2016%20L10.2%2023.3%20L13.5%2021.9%20L10.5%2014.7%20L16.6%2014.7%20Z%22/></g></g></svg>") 2 2, auto;
        --cur-main:url("data:image/svg+xml,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2217%22%20height=%2221%22%20viewBox=%220%200%2022%2027%22><g%20fill=%22%23111110%22%20stroke=%22%23111110%22%20stroke-width=%222.4%22%20stroke-linejoin=%22round%22><g><rect%20x=%226.2%22%20y=%224.2%22%20width=%223%22%20height=%2212.8%22%20rx=%221.5%22/><rect%20x=%229.5%22%20y=%2210.6%22%20width=%223%22%20height=%226.4%22%20rx=%221.5%22/><rect%20x=%2212.8%22%20y=%2211.6%22%20width=%223%22%20height=%225.4%22%20rx=%221.5%22/><rect%20x=%2216.1%22%20y=%2212.8%22%20width=%223%22%20height=%224.2%22%20rx=%221.5%22/><path%20d=%22M6.2%2015h13v4.4c0%203.7-2.6%206.4-6.3%206.4h-2.3c-1.8%200-3.2-.8-4.2-2.1l-4.3-6c-.8-1.1.4-2.5%201.6-1.7l2.5%201.6z%22/></g></g><g%20fill=%22%2352ff33%22><g><rect%20x=%226.2%22%20y=%224.2%22%20width=%223%22%20height=%2212.8%22%20rx=%221.5%22/><rect%20x=%229.5%22%20y=%2210.6%22%20width=%223%22%20height=%226.4%22%20rx=%221.5%22/><rect%20x=%2212.8%22%20y=%2211.6%22%20width=%223%22%20height=%225.4%22%20rx=%221.5%22/><rect%20x=%2216.1%22%20y=%2212.8%22%20width=%223%22%20height=%224.2%22%20rx=%221.5%22/><path%20d=%22M6.2%2015h13v4.4c0%203.7-2.6%206.4-6.3%206.4h-2.3c-1.8%200-3.2-.8-4.2-2.1l-4.3-6c-.8-1.1.4-2.5%201.6-1.7l2.5%201.6z%22/></g></g></svg>") 6 2, pointer;
        --cur-texte:url("data:image/svg+xml,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%229%22%20height=%2220%22%20viewBox=%220%200%2011%2024%22><g%20fill=%22%23111110%22%20stroke=%22%23111110%22%20stroke-width=%221.9%22%20stroke-linejoin=%22round%22><g><path%20d=%22M2%202.2h7.4v2.3H6.6v15h2.8v2.3H2v-2.3h2.8v-15H2Z%22/></g></g><g%20fill=%22%2352ff33%22><g><path%20d=%22M2%202.2h7.4v2.3H6.6v15h2.8v2.3H2v-2.3h2.8v-15H2Z%22/></g></g></svg>") 4 10, text}
  html,body{cursor:var(--cur-fleche)}
  a,button,[data-contact]{cursor:var(--cur-main)}
  input,textarea{cursor:var(--cur-texte)}
}

/* ---- transitions : clair/sombre lent, survol immédiat ---- */
html,body{transition:background-color .7s var(--ease),color .7s var(--ease)}
header,footer,.dialog,.bar,.hero-globe iframe{transition:background-color .7s var(--ease),color .7s var(--ease),border-color .7s var(--ease)}
a:hover,button:hover,.ex:hover{transition-duration:.1s}

/* ---- en-tête : le nom à gauche, Contact à droite. Sans fond ni barre, il fait partie de la page et défile avec elle (même règle sur toutes les pages) ---- */
header{position:absolute;top:0;left:0;right:0;z-index:100;display:grid;grid-template-columns:repeat(var(--n),1fr);
  column-gap:var(--gap);align-items:center;padding:var(--u) var(--pad);background:transparent;color:var(--ink)}
.logo{grid-column:1;justify-self:start;padding:2px 0;letter-spacing:-.01em;transition:color .3s var(--ease)}
.h-end{grid-column:-2 / -1;justify-self:end;padding:2px 0;color:var(--muted);letter-spacing:-.01em;transition:color .3s var(--ease)}
.logo:hover,.h-end:hover{color:var(--hdr-hover)}

/* ---- sections ---- */
section{padding-block:calc(var(--u) * 4)}
.head{margin-bottom:var(--u)}
.head .lbl{grid-column:1 / span 4;color:var(--ink)}
[data-fade]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-fade].in{opacity:1;transform:none}
html:not(.js) [data-fade]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-fade]{opacity:1;transform:none;transition:none}}

/* ---- pied de page discret ---- */
footer{padding:calc(var(--u) * 2) var(--pad) var(--u);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--u);
  color:var(--muted);letter-spacing:.02em}
footer a{transition:color .3s var(--ease)}
footer a:hover{color:var(--hdr-hover)}

@media (max-width:768px){
  :root{--n:4;--gap:var(--char)}
  .grid-overlay i:nth-child(n+5){display:none}
  footer a{margin-left:auto}
  .head .lbl{grid-column:1 / -1}
}