/* Charte commune Tigerhead Studio : copiée dans chaque site au moment de la construction */

/* Polices (licence OFL, voir polices/licences/) : sous-ensemble latin + accents.
   Oxanium (titres et accroche), Sora (texte), JetBrains Mono (étiquettes). Une police déclarée
   n'est téléchargée que si la page l'utilise. */
@font-face { font-family: "Oxanium"; src: url("polices/oxanium.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Sora"; src: url("polices/sora.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("polices/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  /* Charte « antique » reprise d'Incrementalys Spatial : bleu marine, détails dorés */
  --fond: #0a0f17;          /* bleu marine anthracite : en-tête et pied de page */
  --fond-centre: #0e1420;   /* zone centrale, un ton au-dessus, avec le grain papier */
  --fond-carte: rgba(16, 20, 32, 0.85);
  --encre: #ebebe8;         /* texte : gris très clair, pour ne pas écraser le blanc */
  --encre-titre: #f7f7f5;   /* sous-titres : presque blanc */
  --encre-douce: #b4b6bb;   /* légendes */
  --accent: #e6bd6b;        /* doré : titre principal et détails uniquement */
  --accent-fonce: #cca357;  /* traits et contours dorés */
  --accent-survol: #ffffff;
  --trait: rgba(204, 163, 87, 0.35);
  --trait-or: rgba(204, 163, 87, 0.7);   /* lignes dorées du cadre antique */
  /* L'accroche : un doré très clair, qui se démarque sans crier ; le soulignement, lui, est aux couleurs
     de la France (bleu éclairci pour rester lisible sur le marine) */
  --titre-homme: #f1e3c3;
  --titre-esperluette: #f1e3c3;
  --titre-machine: #f1e3c3;
  --souligne-1: #3f73d1;
  --souligne-2: #f2f2ec;
  --souligne-3: #ef4135;
  --bord-carte: #080a12;    /* liseré sombre des cartes, sous le cadre doré */
  --ombre: rgba(0, 0, 0, .35);
  --halo: rgba(230, 189, 107, .16);       /* halo doré au survol */
  --halo-leger: rgba(230, 189, 107, .08);
  --accent-clair: #f2d593;  /* or clair : « Pour ceux qui viendront après. » */
  /* Boutons « art déco » d'Incrementalys (ContourArtDeco) : fond sombre, contour fin + trait intérieur */
  --bouton-fond: rgba(23, 33, 51, .9);
  --bouton-fond-survol: rgba(31, 51, 77, .95);
  --bouton-fond-presse: rgba(51, 107, 133, .95);
  --bouton-trait: rgba(204, 163, 87, .35);
  --bouton-trait-survol: rgba(204, 163, 87, .85);
  --bouton-trait-presse: rgba(204, 163, 87, 1);
  --bouton-texte: var(--encre-titre);
  /* Les effets animés (animations.css, fond-equations.js lisent ces valeurs) */
  --encre-fraiche: #fff4d6;               /* la plume : l'encre avant de sécher */
  --plume-coeur: #fff8e6;
  --plume-halo: rgba(255, 236, 190, .9);
  --plume-halo-large: rgba(230, 189, 107, .55);
  --glitch-a: rgba(255, 240, 200, .55);   /* fantômes décalés du glitch */
  --glitch-b: rgba(204, 163, 87, .55);
  --trace-axes: 204, 163, 87, 0.10;       /* fond d'équations : r, v, b, opacité */
  --trace-eteint: 217, 173, 92, 0.24;
  --trace-vif: 255, 230, 153, 0.65;
  --trace-balayage: 230, 189, 107;
  --cadre-interieur: rgba(240, 214, 160, .55);   /* le filet intérieur du double cadre, posé sur l'image */
  --holo-lignes: .035;      /* effet holographique : opacité des lignes de balayage */
  --holo-bande: .05;        /* et de la bande irisée */
  --holo-irise: 120, 210, 255;   /* le reflet bleuté de la bande */
  --rayon: 14px;
  --largeur: 1200px;
  --largeur-large: 1360px;   /* pages d'images : mosaïque, jeux, exemples de sites */
  /* Grain papier : bruit SVG léger, sans fichier externe (baseFrequency : plus bas = grain plus gros) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --logo-filtre: none;      /* l'en-tête : « Tigerhead STUDIO » reste doré */
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-titre: "Oxanium", var(--police);
  --police-texte: "Sora", var(--police);
  --police-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ─── CHARTE CLAIRE : l'inverse (html.clair, « construire.py --clair ») ───
   Blanc cassé pour les fonds, noir à la place de l'or, gris très foncé pour les textes. */
html.clair {
  --titre-homme: var(--accent);   /* l'accroche reste d'une seule couleur, noire */
  --titre-esperluette: var(--accent);
  --titre-machine: var(--accent);
  --fond: #efece4;
  --fond-centre: #f8f6f0;
  --fond-carte: rgba(255, 255, 255, .8);
  --encre: #2e2f33;
  --encre-titre: #1c1d20;
  --encre-douce: #5d5f66;
  --accent: #111111;
  --accent-fonce: #2a2a2a;
  --accent-survol: #000000;
  --trait: rgba(17, 17, 17, .28);
  --trait-or: rgba(17, 17, 17, .65);
  --bord-carte: #e2ded3;
  --ombre: rgba(30, 25, 15, .12);
  --halo: rgba(17, 17, 17, .10);
  --halo-leger: rgba(17, 17, 17, .05);
  --accent-clair: #4a4a4a;
  --bouton-fond: rgba(255, 255, 255, .85);
  --bouton-fond-survol: #ffffff;
  --bouton-fond-presse: #e6e2d6;
  --bouton-trait: rgba(17, 17, 17, .35);
  --bouton-trait-survol: rgba(17, 17, 17, .85);
  --bouton-trait-presse: #111111;
  --encre-fraiche: #8a8a8a;
  --plume-coeur: #111111;
  --plume-halo: rgba(17, 17, 17, .45);
  --plume-halo-large: rgba(17, 17, 17, .15);
  --glitch-a: rgba(17, 17, 17, .35);
  --glitch-b: rgba(120, 120, 120, .45);
  --trace-axes: 17, 17, 17, 0.08;
  --trace-eteint: 30, 30, 30, 0.22;
  --trace-vif: 0, 0, 0, 0.6;
  --trace-balayage: 17, 17, 17;
  --cadre-interieur: rgba(255, 255, 255, .7);
  --logo-filtre: brightness(0);   /* le texte doré du logo passe au noir */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ─── CHARTE ZEN (html.zen, « construire.py --zen ») : gris très foncé et vert matcha ───
   Le marine devient un gris neutre presque noir (encre de Chine), l'or devient vert matcha.
   L'accroche garde ses trois couleurs (définies dans :root). */
html.zen {
  --fond: #0b0b0b;
  --fond-centre: #101010;
  --fond-carte: rgba(22, 22, 22, .85);
  --encre: #e6e6df;         /* papier washi */
  --encre-titre: #f2f2ec;
  --encre-douce: #a9ada3;
  --accent: #a7c47a;        /* matcha */
  --accent-fonce: #8aa864;
  --accent-survol: #ffffff;
  --trait: rgba(138, 168, 100, .32);
  --trait-or: rgba(138, 168, 100, .65);
  --bord-carte: #060606;
  --ombre: rgba(0, 0, 0, .45);
  --halo: rgba(167, 196, 122, .15);
  --halo-leger: rgba(167, 196, 122, .07);
  --accent-clair: #cfe0a8;  /* thé vert clair */
  --bouton-fond: rgba(20, 20, 20, .9);
  --bouton-fond-survol: rgba(30, 36, 28, .95);
  --bouton-fond-presse: rgba(60, 80, 45, .95);
  --bouton-trait: rgba(138, 168, 100, .35);
  --bouton-trait-survol: rgba(138, 168, 100, .85);
  --bouton-trait-presse: rgba(167, 196, 122, 1);
  --encre-fraiche: #eef6dc;
  --plume-coeur: #f4fae6;
  --plume-halo: rgba(220, 240, 190, .9);
  --plume-halo-large: rgba(167, 196, 122, .5);
  --glitch-a: rgba(225, 245, 200, .5);
  --glitch-b: rgba(138, 168, 100, .55);
  --trace-axes: 138, 168, 100, 0.10;
  --trace-eteint: 150, 180, 110, 0.24;
  --trace-vif: 210, 235, 170, 0.65;
  --trace-balayage: 167, 196, 122;
  --cadre-interieur: rgba(200, 225, 160, .55);
  --logo-filtre: hue-rotate(42deg) saturate(.75);   /* l'or du logo vire au matcha */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");   /* plus discret : un grain blanc éclaircit vite un fond presque noir */
}
/* La plume de « L'homme » écrit à l'encre dorée claire (marine et zen ; la claire reste noire) */
html:not(.clair) .homme {
  --encre-fraiche: #fff8e6;
  --plume-coeur: #fffaf0;
  --plume-halo: rgba(255, 240, 210, .9);
  --plume-halo-large: rgba(241, 227, 195, .5);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 17px/1.6 var(--police-texte);
  min-height: 100vh; display: flex; flex-direction: column;
}
/* Trois bandes : en-tête et pied unis, centre avec grain papier */
main { flex: 1; background: var(--grain), var(--fond-centre); padding-bottom: 64px; position: relative; isolation: isolate; }
/* Fond d'équations (partage/fond-equations.js) : collé à l'écran pendant le défilement,
   derrière le contenu de <main>, devant son fond */
.fond-equations { position: sticky; top: 0; display: block; width: 100%; height: 100vh; height: 100lvh; margin-bottom: -100vh; margin-bottom: -100lvh; z-index: -1; pointer-events: none; }
/* Effet holographique, derrière les courbes : des lignes de balayage fines qui défilent
   lentement, et une bande irisée qui descend l'écran de temps en temps (rafraîchissement
   d'un hologramme). Fond CSS de la toile : aucun calcul en plus, la toile se repeint déjà. */
.fond-equations {
  background:
    linear-gradient(180deg, transparent, rgba(var(--trace-balayage), var(--holo-bande)) 45%, rgba(var(--holo-irise), var(--holo-bande)) 55%, transparent) 0 -40% / 100% 28% no-repeat,
    repeating-linear-gradient(180deg, rgba(var(--trace-balayage), var(--holo-lignes)) 0 1px, transparent 1px 4px);
}
@media (prefers-reduced-motion: no-preference) {
  .fond-equations { animation: hologramme 9s linear infinite; }
}
@keyframes hologramme {
  from { background-position: 0 -60%, 0 0; }
  70%, to { background-position: 0 160%, 0 56px; }   /* la bande passe, puis l'écran reste calme */
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--police-titre); font-weight: 700; color: var(--encre-titre); line-height: 1.15; letter-spacing: 0; margin: 0 0 .5em; }
h1 { color: var(--accent); }  /* seul le titre principal de chaque page est doré */

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 16px; }
.conteneur-large { max-width: var(--largeur-large); padding: 0 24px; }

/* En-tête */
.entete { border-bottom: 4px double var(--trait); }  /* double filet */
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.marque { color: var(--accent); display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; letter-spacing: -0.01em; }
.marque img { width: 58px; height: 58px; }
.marque .marque-texte-logo { filter: var(--logo-filtre); width: auto; height: 44px; }
.nav { display: flex; gap: 0 18px; flex-wrap: wrap; font-size: 15px; }
/* 44 px de haut : une cible confortable au doigt */
.nav a { text-decoration: none; color: var(--encre-douce); display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 380px) { .nav { gap: 0 11px; font-size: 14px; } }
@media (max-width: 340px) { .nav { gap: 0 8px; font-size: 13px; } }   /* les 5 liens tiennent sur une ligne à 320 px */
.nav a:hover { color: var(--accent-survol); }

/* Cadre antique (repris du CadreGeometrique d'Incrementalys) : contour du bloc + une droite
   dorée le long de chaque bord, qui déborde des coins, et un cercle au compas sur chaque coin.
   Usage : class="cadre" sur un bloc en position relative. */
.cadre {
  --m: 12px;    /* retrait des droites depuis le bord */
  --d: 22px;    /* débord au-delà des coins (dépasse du bloc de d - m) */
  --r: 9px;     /* rayon des cercles */
  --e: 2px;     /* épaisseur du trait : valeur paire, pour que lignes et cercles tombent au pixel près */
  position: relative;
}
.cadre::after {
  content: ""; position: absolute; pointer-events: none;
  inset: calc(var(--m) - var(--d));
  --ligne: linear-gradient(var(--trait-or), var(--trait-or));
  --cercle: radial-gradient(circle closest-side, transparent calc(100% - var(--e) - 1px), var(--trait-or) calc(100% - var(--e)), var(--trait-or) 99%, transparent 100%);
  background:
    /* Chaque droite est CENTRÉE sur sa coordonnée (d - e/2), comme le centre des cercles */
    var(--ligne) left 0 top calc(var(--d) - var(--e) / 2) / 100% var(--e) no-repeat,
    var(--ligne) left 0 bottom calc(var(--d) - var(--e) / 2) / 100% var(--e) no-repeat,
    var(--ligne) left calc(var(--d) - var(--e) / 2) top 0 / var(--e) 100% no-repeat,
    var(--ligne) right calc(var(--d) - var(--e) / 2) top 0 / var(--e) 100% no-repeat,
    var(--cercle) left calc(var(--d) - var(--r)) top calc(var(--d) - var(--r)) / calc(2 * var(--r)) calc(2 * var(--r)) no-repeat,
    var(--cercle) right calc(var(--d) - var(--r)) top calc(var(--d) - var(--r)) / calc(2 * var(--r)) calc(2 * var(--r)) no-repeat,
    var(--cercle) left calc(var(--d) - var(--r)) bottom calc(var(--d) - var(--r)) / calc(2 * var(--r)) calc(2 * var(--r)) no-repeat,
    var(--cercle) right calc(var(--d) - var(--r)) bottom calc(var(--d) - var(--r)) / calc(2 * var(--r)) calc(2 * var(--r)) no-repeat;
  transition: opacity .2s ease;
}

/* ─── Blocs communs à tous les sites ─── */
/* Un bloc : carte sombre au liseré fin, à combiner avec .cadre pour les lignes art nouveau */
.bloc { background: var(--fond-carte); border: 2px solid var(--bord-carte); border-radius: var(--rayon); }
/* Un bloc cliquable se lève en douceur au survol, avec un halo */
.bloc-levable { transition: transform .5s cubic-bezier(.22, .8, .3, 1), box-shadow .5s ease; }
.bloc-levable:hover { transform: translateY(-6px); box-shadow: 0 14px 40px var(--ombre), 0 0 56px var(--halo); }
.bloc-levable:hover::after { --trait-or: var(--accent); }
@media (prefers-reduced-motion: reduce) { .bloc-levable { transition: none; } .bloc-levable:hover { transform: none; } }

/* Double cadre d'une image (le contour art déco des boutons, appliqué aux photos) : un filet
   au bord, et un second filet qui RENTRE dans l'image, à 5 px — comme un passe-partout dessiné
   exprès pour chaque photo. À poser sur le conteneur de l'image (figure, span), pas sur <img>. */
.cadre-double { position: relative; overflow: hidden; border: 1px solid var(--trait-or); }
.cadre-double::after {
  content: ""; position: absolute; inset: 5px; z-index: 1; pointer-events: none;
  border: 1px solid var(--cadre-interieur); border-radius: 2px;
}

/* En-tête d'une page : surtitre en chasse fixe, titre, introduction */
.surtitre { font-family: var(--police-mono); color: var(--encre-douce); font-size: 13px; text-transform: uppercase; letter-spacing: .14em; margin: 0 0 14px; }
.intro { font-size: 1.15rem; color: var(--encre-douce); max-width: 60ch; margin: 0 auto; }
.entete-page { padding-top: 64px; padding-bottom: 48px; text-align: center; }
.entete-page h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); }

/* Visionneuse plein écran (partage/visionneuse.js) */
.visionneuse { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(5, 6, 8, .94); display: none; place-items: center; }
.visionneuse[open] { display: grid; animation: visionneuse-entre .32s ease-out; }
/* Fondus : à l'ouverture, à la fermeture (.se-ferme), et d'une photo à l'autre (.chargement) */
@keyframes visionneuse-entre { from { opacity: 0; } }
.visionneuse.se-ferme { opacity: 0; transition: opacity .32s ease-in; }
.visionneuse::backdrop { background: transparent; }
.visionneuse img { max-width: calc(100vw - 32px); max-height: calc(100vh - 96px); object-fit: contain; border-radius: 2px;
  cursor: zoom-out; transition: opacity .25s ease; }   /* un clic sur la photo la referme */
.visionneuse img.chargement { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .visionneuse[open] { animation: none; } .visionneuse.se-ferme, .visionneuse img { transition: none; } }
.visionneuse button { position: absolute; background: none; border: 0; color: #f2f2ec; font: 300 44px/1 var(--police-titre);
  width: 56px; height: 56px; cursor: pointer; opacity: .7; transition: opacity .2s; }
.visionneuse button:hover, .visionneuse button:focus-visible { opacity: 1; }
.visionneuse-fermer { top: 8px; right: 8px; }
.visionneuse-precedente { left: 8px; top: 50%; translate: 0 -50%; }
.visionneuse-suivante { right: 8px; top: 50%; translate: 0 -50%; }
.visionneuse-compteur { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; margin: 0;
  font: 12px/1 var(--police-mono); letter-spacing: .14em; color: #b4b6bb; }

/* Lien d'action au bas d'une carte (« Voir le site → ») */
.porte-lien { font-family: var(--police-mono); font-size: 14px; font-weight: 600; margin-top: 8px; }

/* Texte réservé aux lecteurs d'écran (invisible à l'écran) */
.lecteur-seul { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Appel au contact, en bas de page */
.contact { margin-top: 72px; text-align: center; }
.contact h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.contact p { color: var(--encre-douce); margin: 0 0 20px; }
.contact .bouton { overflow-wrap: anywhere; }

/* Boutons : le contour art déco d'Incrementalys (ContourArtDeco) — deux traits au lieu d'un.
   Le contour (border) et un trait intérieur à 4 px du bord (outline en retrait), même couleur.
   ╔══════════════╗
   ║┌────────────┐║
   ║│  Contact   │║
   ║└────────────┘║
   ╚══════════════╝ */
.bouton {
  display: inline-block; padding: 14px 28px; border-radius: 5px;
  background: var(--bouton-fond); color: var(--bouton-texte); text-decoration: none; font-weight: 600;
  border: 1px solid var(--bouton-trait);
  outline: 1px solid var(--bouton-trait); outline-offset: -6px;   /* 1 px de contour + 4 px d'écart + 1 px */
  transition: background-color .25s ease, border-color .25s ease, outline-color .25s ease;
}
.bouton:hover, .bouton:focus-visible { background: var(--bouton-fond-survol); border-color: var(--bouton-trait-survol); outline-color: var(--bouton-trait-survol); }
.bouton:active { background: var(--bouton-fond-presse); border-color: var(--bouton-trait-presse); outline-color: var(--bouton-trait-presse); }

/* Pied de page */
.pied { border-top: 4px double var(--trait); padding: 18px 0; font-size: 14px; color: var(--encre-douce);
  position: relative; z-index: 1; background: var(--fond); }   /* uni : le fond animé ne passe pas dessous */
.pied .conteneur { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.pied a { color: inherit; display: inline-block; padding: 12px 0; }   /* cible de 44 px au doigt */

/* Pages de texte (mentions légales…) */
.texte { max-width: 720px; padding-top: 40px; }
.texte h1 { font-size: 2rem; }
.texte h2 { font-size: 1.2rem; margin-top: 1.8em; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
strong { color: var(--encre-titre); font-weight: 700; }