/* Archipel Web : page unique, piste « Courbes de niveau ».
   Univers repris de bac-maths.fr et brevet-maths.fr (tokens.css du dépôt bac-brevet-maths) :
   sombre quadrillé par défaut, clair si le système le demande. Ambre = Bac-Maths, cyan = Brevet-Maths. */

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../fonts/schibsted-grotesk-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --bg: #0d1015;
  --panel: #141922;
  --ink: #e9edf3;
  --ink-soft: #8d97a8;
  --rule: rgba(160, 180, 210, .12);
  --grid: rgba(160, 180, 210, .045);
  --bac: #f5b83d;
  --brevet: #56c8f5;
  /* Mêmes couleurs en composantes RVB, pour le canvas de la carte (assets/js/carte.js). */
  --bac-rgb: 245, 184, 61;
  --brevet-rgb: 86, 200, 245;
  --ilot-rgb: 141, 151, 168;
  --etiquette: rgba(13, 16, 21, .82);
  --trait: rgba(141, 151, 168, .75);
  --verre: rgba(160, 180, 210, .05);
  --f-ui: 'Schibsted Grotesk', 'Helvetica Neue', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --gouttiere: clamp(16px, 4vw, 48px);
  color-scheme: dark;
}
/* Thème clair : celui du système par défaut, ou forcé par le bouton (data-mode sur <html>, assets/js/theme.js).
   Les valeurs sont dupliquées dans les deux blocs : tenir les deux à jour. */
@media (prefers-color-scheme: light) {
  :root:not([data-mode="dark"]) {
    --bg: #f4f5f1;
    --panel: #ffffff;
    --ink: #14181f;
    --ink-soft: #5d6574;
    --rule: rgba(20, 30, 50, .12);
    --grid: rgba(30, 90, 140, .05);
    --bac: #b97700;
    --brevet: #0a7fb0;
    --bac-rgb: 185, 119, 0;
    --brevet-rgb: 10, 127, 176;
    --ilot-rgb: 93, 101, 116;
    --etiquette: rgba(255, 255, 255, .88);
    --trait: rgba(93, 101, 116, .75);
    --verre: rgba(30, 90, 140, .04);
    color-scheme: light;
  }
}
:root[data-mode="light"] {
  --bg: #f4f5f1;
  --panel: #ffffff;
  --ink: #14181f;
  --ink-soft: #5d6574;
  --rule: rgba(20, 30, 50, .12);
  --grid: rgba(30, 90, 140, .05);
  --bac: #b97700;
  --brevet: #0a7fb0;
  --bac-rgb: 185, 119, 0;
  --brevet-rgb: 10, 127, 176;
  --ilot-rgb: 93, 101, 116;
  --etiquette: rgba(255, 255, 255, .88);
  --trait: rgba(93, 101, 116, .75);
  --verre: rgba(30, 90, 140, .04);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--f-ui); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brevet); outline-offset: 3px; border-radius: 2px; }
.page { max-width: 1240px; margin: 0 auto; padding-inline: var(--gouttiere); }
h1, h2, h3 { text-wrap: balance; margin: 0; }

/* En-tête */
.entete { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding-block: 22px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; text-decoration: none; }
.logo svg { width: 30px; height: 30px; flex: none; }
.entete nav { display: flex; gap: 6px 22px; flex-wrap: wrap; color: var(--ink-soft); font-size: .95rem; }
.entete-droite { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; }
.bouton-theme { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--rule); border-radius: 8px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.bouton-theme[hidden] { display: none; }
.bouton-theme:hover { color: var(--ink); border-color: var(--ink-soft); }
.bouton-theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.bouton-theme[data-cible="light"] .lune, .bouton-theme[data-cible="dark"] .soleil { display: none; }
.entete nav a { text-decoration: none; }
.entete nav a:hover { color: var(--ink); }

/* Accroche + carte */
.accroche { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: clamp(24px, 5vw, 64px) clamp(40px, 6vw, 88px); }
.accroche h1 { font-size: clamp(2.3rem, 5.6vw, 4.5rem); line-height: .98; letter-spacing: -.035em; font-weight: 800; margin-bottom: 24px; }
.accroche p { color: var(--ink-soft); font-size: clamp(1.02rem, 1.4vw, 1.15rem); margin: 0 0 14px; max-width: 46ch; }

.carte { position: relative; aspect-ratio: 4 / 3; max-width: 100%; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
  background-color: var(--panel);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px; }
.carte canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ile { position: absolute; transform: translate(-50%, -50%); text-decoration: none; font-weight: 800; font-size: clamp(.9rem, 1.5vw, 1.1rem); line-height: 1.25; padding: 5px 11px; border-radius: 6px; background: var(--etiquette); white-space: nowrap; }
.ile small { display: block; font: 500 .72em var(--f-mono); color: var(--ink-soft); }
.ile:hover { text-decoration: underline; text-underline-offset: 3px; }
.ile--bac { left: 31.5%; top: 40%; color: var(--bac); }
.ile--brevet { left: 75%; top: 64%; color: var(--brevet); }
.legende { position: absolute; left: 12px; bottom: 10px; font: 11.5px var(--f-mono); color: var(--ink-soft); }

/* Réalisations */
.titre-section { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.025em; line-height: 1.05; font-weight: 800; }
.realisations { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: clamp(48px, 7vw, 96px); scroll-margin-top: 16px; }
.jumeaux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 48px); }
.site { display: grid; gap: 14px; align-content: start; min-width: 0; }
.site picture { display: block; }
.site img { width: 100%; border-radius: 8px; border: 1px solid var(--rule); border-top: 3px solid var(--c); }
.site h3 { margin-top: 6px; font-size: 1.5rem; letter-spacing: -.02em; display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.site h3 a { font: 500 .82rem var(--f-mono); color: var(--c); }
.site p { margin: 0; color: var(--ink-soft); max-width: 58ch; }
.site .chiffres { font: .86rem/1.5 var(--f-mono); color: var(--ink); }
.site--bac { --c: var(--bac); }
.site--brevet { --c: var(--brevet); }
.socle { border-top: 1px solid var(--rule); padding-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px 32px; color: var(--ink-soft); }
.socle strong { color: var(--ink); font-size: 1.12rem; }
.socle p { margin: 0; max-width: 70ch; }

/* Nos domaines : même grille que la R&D, sur le fond de page. Les projets cités viennent de l'ancien portfolio (OLD/js/js.php). */
.domaines { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px 48px; padding-block: 0 clamp(48px, 7vw, 88px); scroll-margin-top: 16px; }
.domaines .intro p { margin: 14px 0 0; color: var(--ink-soft); max-width: 40ch; }
.domaines dl { margin: 0; display: grid; gap: 26px; align-content: start; }
.domaines dt { font-weight: 700; font-size: 1.12rem; }
.domaines dd { margin: 4px 0 0; color: var(--ink-soft); max-width: 64ch; }
.domaines dd.refs { margin-top: 8px; font: .84rem/1.6 var(--f-mono); color: var(--ink); }
.domaines-fin { grid-column: 1 / -1; margin: 0; border-top: 1px solid var(--rule); padding-top: 22px; color: var(--ink-soft); }
.domaines-fin strong { color: var(--ink); font-weight: 600; }

/* Tableau de la section « Nos domaines » (dessin fixe, même trait que la fiole). */
.tableau { display: block; width: min(210px, 72%); margin: 34px 0 0; }
.tableau svg { width: 100%; height: auto; display: block; }
.tableau .trait { fill: none; stroke: var(--trait); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tableau .fin { stroke-width: 1; }
.tableau .fond { fill: var(--bg); }
.tableau .c-bac, .tableau .c-brevet { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tableau .c-bac { stroke: rgba(var(--bac-rgb), .9); }
.tableau .c-brevet { stroke: rgba(var(--brevet-rgb), .9); }
.tableau .c-brevet.fin { stroke-width: 1; }
.tableau text { font: 9px var(--f-mono); }
.tableau .t-bac { fill: var(--bac); }
.tableau .t-brevet { fill: var(--brevet); }

/* Recherche et développement : pleine largeur, fond panneau */
.recherche { background: var(--panel); border-block: 1px solid var(--rule); scroll-margin-top: 0; }
.recherche .page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px 48px; padding-block: clamp(48px, 7vw, 88px); }
.recherche .intro p { margin: 14px 0 0; color: var(--ink-soft); max-width: 40ch; }
.recherche dl { margin: 0; display: grid; gap: 26px; align-content: start; }
.recherche dt { font-weight: 700; font-size: 1.12rem; }
.recherche dd { margin: 4px 0 0; color: var(--ink-soft); max-width: 64ch; }
/* Puces carrées, comme les listes des sites de maths (.prose ul : square, couleur d'accent).
   Ici l'ambre marque les projets clients et le cyan l'outil maison, d'où la légende sous l'intro. */
.recherche dl > div { position: relative; padding-left: 20px; }
.recherche dl > div::before, .legende-rd li::before { content: ''; width: 7px; height: 7px; background: var(--puce); }
.recherche dl > div::before { position: absolute; left: 0; top: .62em; }
.recherche .client, .legende-rd .client { --puce: var(--bac); }
.recherche .maison, .legende-rd .maison { --puce: var(--brevet); }
.legende-rd { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--ink-soft); font-size: .9rem; }
.legende-rd li { display: flex; align-items: center; gap: 8px; }

/* Fiole de la section R&D (Erlenmeyer, index.html). Mouvement lent, en boucle ; fiole.js ajoute .pause hors écran. */
.fiole { display: block; width: min(200px, 70%); margin: 34px 0 0; }
.fiole svg { width: 100%; height: auto; display: block; }
.fiole .trait { fill: none; stroke: var(--trait); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.fiole .fin { stroke-width: 1; }
.fiole .verre { fill: var(--verre); }
.fiole .grad { font: 7px var(--f-mono); fill: var(--ink-soft); }
.fiole .fond { fill: var(--panel); }
.liq-bac { fill: rgba(var(--bac-rgb), .16); stroke: rgba(var(--bac-rgb), .85); stroke-width: 1.2; }
.liq-brevet { fill: rgba(var(--brevet-rgb), .18); stroke: rgba(var(--brevet-rgb), .85); stroke-width: 1.2; }
.vague { animation: vague 5s linear infinite; }
.vague.lente { animation-duration: 8s; animation-direction: reverse; }
@keyframes vague { to { transform: translateX(-50px); } }
/* transform-box : sans lui, l'origine d'un scale() est le coin haut-gauche du SVG et les bulles partent en diagonale. */
.bulle { fill: none; stroke-width: 1; transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: monte var(--d) var(--t) infinite ease-in; }
.bulle.bac { stroke: rgba(var(--bac-rgb), .9); }
.bulle.brevet { stroke: rgba(var(--brevet-rgb), .9); }
@keyframes monte {
  0% { transform: translate(0, 0) scale(.5); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: translate(var(--dx), calc(var(--h) * -.55)) scale(.9); }
  92% { opacity: .9; }
  100% { transform: translate(0, calc(var(--h) * -1)) scale(1.15); opacity: 0; }
}
.fiole.pause * { animation-play-state: paused; }

/* Contact */
.contact { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 32px; padding-block: clamp(48px, 7vw, 88px) 36px; scroll-margin-top: 16px; }
.contact h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); letter-spacing: -.03em; line-height: 1.05; }
.contact p { margin: 10px 0 0; color: var(--ink-soft); max-width: 48ch; }
.mail { font: 500 clamp(1.02rem, 2vw, 1.35rem) var(--f-mono); color: var(--bac); overflow-wrap: anywhere; }

/* Pied de page et mentions légales (details natif, sans JS) */
.pied { border-top: 1px solid var(--rule); padding-block: 20px 32px; color: var(--ink-soft); font-size: .9rem; }
/* Séparateur animé (eclair.js) : remplace la bordure dès que le script tourne ; sans JS, la bordure reste. */
.eclair { display: none; width: 100%; height: 28px; }
.pied.avec-eclair { border-top: 0; padding-top: 0; }
.pied.avec-eclair .eclair { display: block; margin-bottom: 6px; }
.pied summary { cursor: pointer; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; list-style: none; }
.pied summary::-webkit-details-marker { display: none; }
.pied summary span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.pied summary:hover span:last-child { color: var(--ink); }
/* Palmier d'Archipel Web au trait, repris du pied de page de bac-maths et brevet-maths (Footer.astro). */
.pied .editeur { display: inline-flex; align-items: center; gap: 5px; }
.palmier { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.mentions { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 20px 40px; padding-top: 20px; }
@media (max-width: 980px) { .mentions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mentions > :first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .mentions { grid-template-columns: minmax(0, 1fr); } }
.mentions h3 { font-size: .95rem; color: var(--ink); margin-bottom: 4px; }
.mentions p { margin: 0; }
.coordonnees { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 10px 0 0; }
.coordonnees dt { color: var(--ink); white-space: nowrap; }
.coordonnees dd { margin: 0; }
@media (max-width: 480px) { .coordonnees { grid-template-columns: minmax(0, 1fr); } .coordonnees dd { margin-bottom: 6px; } }

@media (max-width: 820px) {
  .accroche, .jumeaux, .socle, .domaines, .recherche .page { grid-template-columns: minmax(0, 1fr); }
  .fiole, .tableau { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vague { animation: none; }
  .bulle { animation: none; opacity: .8; transform: translateY(calc(var(--h) * -.4)); }
}