/* =========================================================
   SysAmandine — « Lagon & Terminal »
   Palette lagon de Nouvelle-Calédonie + accent corail.
   Polices auto-hébergées (aucun appel externe, RGPD-clean).
   ========================================================= */

@font-face{
  font-family:'Space Grotesk';
  src:url('/assets/fonts/space-grotesk.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'IBM Plex Sans';
  src:url('/assets/fonts/ibm-plex-sans.woff2') format('woff2');
  font-weight:100 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}

:root{
  --ink:#08243A;        /* navy profond */
  --ink-soft:#0E3552;
  --lagon:#0E6BA8;      /* bleu primaire */
  --turq:#15B8D4;       /* turquoise lagon */
  --corail:#FF6F52;     /* accent / appels à l'action */
  --corail-d:#F0573A;
  --sable:#F2F7FA;      /* fond clair alterné */
  --blanc:#FFFFFF;
  --encre:#16344A;      /* texte foncé */
  --encre-70:#4C6072;   /* texte atténué */
  --ligne:#E0E9F0;
  --rayon:14px;
  --largeur:1120px;
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--body);color:var(--encre);background:var(--blanc);
  line-height:1.7;-webkit-font-smoothing:antialiased;font-size:17px;
}
.wrap{max-width:var(--largeur);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--display);line-height:1.12;color:var(--ink);letter-spacing:-.02em;margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--lagon);text-decoration:none}

.section{padding:96px 0}

/* Eyebrow façon invite shell — la signature de la page */
.eyebrow{
  font-family:var(--mono);font-size:.82rem;font-weight:500;letter-spacing:.02em;
  color:var(--lagon);margin:0 0 14px;text-transform:lowercase;
}
.eyebrow .prompt{color:var(--turq);margin-right:.4em}
.eyebrow--light{color:#9FC9E4}
.eyebrow--light .prompt{color:var(--turq)}

.section-title{font-size:2.1rem;margin-bottom:.5em;max-width:18ch}
.dolibarr .section-title,.hero h1{color:var(--blanc)}

.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:100;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;font-family:var(--body);font-weight:600;
  font-size:1rem;padding:14px 26px;border-radius:var(--rayon);border:2px solid transparent;
  cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
  text-decoration:none;line-height:1;
}
.btn:hover{transform:translateY(-2px)}
.btn--coral{background:var(--corail);color:#fff;box-shadow:0 8px 22px rgba(255,111,82,.32)}
.btn--coral:hover{background:var(--corail-d)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--outline{background:#fff;color:var(--ink);border-color:var(--ligne)}
.btn--outline:hover{border-color:var(--lagon);color:var(--lagon)}
.btn--text{background:transparent;color:var(--lagon);padding:14px 6px}
.btn--text:hover{color:var(--corail)}
.btn--block{width:100%;justify-content:center}

/* ---------- En-tête ---------- */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--ligne);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:70px;gap:20px}
.brand img{height:40px;width:auto}
.site-nav{display:flex;gap:28px;align-items:center}
.site-nav a{color:var(--encre);font-weight:500;font-size:.97rem}
.site-nav a:hover{color:var(--lagon)}
.site-nav .nav-cta{background:var(--ink);color:#fff;padding:10px 20px;border-radius:10px}
.site-nav .nav-cta:hover{background:var(--lagon);color:#fff}

/* ---------- Hero ---------- */
.hero{position:relative;color:#fff;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,#06223A 0%,#0B4467 40%,#0E6BA8 76%,#1597B8 100%)}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(780px 540px at 86% -4%, rgba(34,211,238,.42), transparent 60%),
    radial-gradient(640px 520px at 4% 104%, rgba(255,111,82,.24), transparent 58%),
    radial-gradient(420px 420px at 40% 120%, rgba(43,212,168,.20), transparent 60%);
}
/* Éventail de gorgone stylisé en circuit — la signature « Lagon & Terminal » */
.hero-coral{
  position:absolute;right:-30px;bottom:-50px;width:min(720px,66%);height:auto;
  z-index:1;opacity:1;pointer-events:none;
  filter:drop-shadow(0 0 34px rgba(34,211,238,.4));
}
.hero-inner{position:relative;z-index:2;padding:104px 0 92px;max-width:760px}
.hero h1 .hl{
  background:linear-gradient(92deg,#5FE6F0 0%,#2BD4A8 45%,#FFC23C 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero h1{font-size:clamp(2.4rem,5.4vw,4rem);font-weight:700;margin:0 0 .35em}
.cursor{display:inline-block;width:.62ch;height:1em;background:var(--turq);margin-left:.12em;
  transform:translateY(.12em);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero-sub{font-size:1.2rem;max-width:62ch;color:#D6E5F0;margin:0 0 2em}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:2.6em}
.hero-trust{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;padding:0;margin:0;
  font-family:var(--mono);font-size:.82rem;color:#9FC9E4}
.hero-trust li{position:relative;padding-left:18px}
.hero-trust li::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;
  border-radius:50%;background:var(--turq);transform:translateY(-50%)}

/* ---------- Services ---------- */
.services{background:var(--blanc)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:2.6em}
.card{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);
  padding:34px 30px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(8,36,58,.09);border-color:#cfe0ec}
.card-icon{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;
  border-radius:13px;background:var(--sable);color:var(--lagon);margin-bottom:18px}
.card-icon svg{width:28px;height:28px}
.card h3{font-size:1.22rem;margin-bottom:.3em}
.card-claim{font-weight:600;color:var(--ink);margin:.2em 0 .6em}
.card p{color:var(--encre-70);font-size:.98rem;margin:0}

.cards--6{grid-template-columns:repeat(3,1fr)}

/* ---------- Interventions (2 offres) ---------- */
.missions{background:var(--sable)}
.missions-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:2.4em}
.mission{background:#fff;border:1px solid var(--ligne);border-radius:var(--rayon);padding:34px 32px;
  display:flex;flex-direction:column}
.mission-tag{align-self:flex-start;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--lagon);background:var(--sable);border:1px solid var(--ligne);
  padding:5px 12px;border-radius:999px;margin-bottom:16px}
.mission h3{font-size:1.35rem;margin-bottom:.5em}
.mission>p{color:var(--encre-70)}
.mission-list{list-style:none;padding:0;margin:1.2em 0 1.6em;display:grid;gap:10px}
.mission-list li{position:relative;padding-left:26px;color:var(--encre);font-size:.97rem}
.mission-list li::before{content:"";position:absolute;left:0;top:.55em;width:13px;height:2px;
  background:var(--corail);border-radius:2px}
.mission .btn--text{margin-top:auto;align-self:flex-start;padding-left:0}

/* ---------- Compétences / stack ---------- */
.stack{background:var(--blanc)}
.stack-intro{color:var(--encre-70);max-width:62ch;margin:0 0 .8em}
.stack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 36px;margin-top:2.4em}
.stack-col h3{font-size:1.02rem;color:var(--ink);margin-bottom:.4em;
  padding-bottom:.5em;border-bottom:1px solid var(--ligne)}

/* ---------- Références / secteurs ---------- */
.refs{background:var(--sable)}
.refs-intro{color:var(--encre-70);max-width:60ch;margin:0}
.refs-grid{list-style:none;padding:0;margin:2em 0 1.6em;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.refs-grid li{background:#fff;border:1px solid var(--ligne);border-left:3px solid var(--turq);
  border-radius:10px;padding:18px 20px;font-weight:600;color:var(--ink)}
.refs-grid li:nth-child(3n+2){border-left-color:var(--corail)}
.refs-grid li:nth-child(3n+3){border-left-color:var(--lagon)}
.refs-note{font-size:.92rem;color:var(--encre-70);font-style:italic;margin:0}

/* ---------- Dolibarr spotlight ---------- */
.dolibarr{position:relative;background:linear-gradient(135deg,var(--ink) 0%,var(--ink-soft) 100%);color:#fff;padding:88px 0;overflow:hidden}
.dolibarr::before{content:"";position:absolute;inset:0;background:url('/assets/img/reef-pattern.svg');
  background-size:200px;opacity:.05;pointer-events:none}
.dolibarr>.wrap{position:relative}
.dolibarr-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.dolibarr-text p{color:#CFE0EC;max-width:54ch}
/* Chips (pastilles de compétences) — base claire + variante sombre */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:1.2em 0 0}
.chips li{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.8rem;
  color:var(--encre);background:#fff;border:1px solid var(--ligne);padding:7px 14px 7px 12px;border-radius:999px}
.chips li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--turq);flex:none}
/* pastilles aux couleurs de poissons tropicaux */
.chips li:nth-child(5n+1)::before{background:#15B8D4}
.chips li:nth-child(5n+2)::before{background:#FF6F52}
.chips li:nth-child(5n+3)::before{background:#F4B400}
.chips li:nth-child(5n+4)::before{background:#17A98C}
.chips li:nth-child(5n+5)::before{background:#3A8FD0}
.dolibarr .chips{margin:1.4em 0 2em}
.dolibarr .chips li{color:#D6E5F0;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2)}
.terminal{background:#04161F;border:1px solid rgba(255,255,255,.12);border-radius:var(--rayon);
  box-shadow:0 24px 60px rgba(0,0,0,.4);overflow:hidden}
.term-dots{display:flex;gap:7px;padding:14px 16px;background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.08)}
.term-dots i{width:11px;height:11px;border-radius:50%;background:#2c4a5a}
.term-dots i:first-child{background:var(--corail)}
.term-dots i:nth-child(2){background:#F2B705}
.term-dots i:nth-child(3){background:var(--turq)}
.terminal pre{margin:0;padding:22px 22px 26px;font-family:var(--mono);font-size:.86rem;
  line-height:1.85;color:#CFE0EC;white-space:pre-wrap;overflow-x:auto}
.t-prompt{color:var(--turq)}.t-path{color:#9FC9E4}
.t-ok{color:#7BD88F}.t-muted{color:#5E7689}

/* ---------- À propos ---------- */
.about{background:var(--blanc)}
.about-inner{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:center}
.portrait{margin:0}
.portrait img{border-radius:18px;width:100%;aspect-ratio:1;object-fit:cover;
  box-shadow:0 22px 50px rgba(8,36,58,.18)}
.about-role{font-family:var(--mono);font-size:.9rem;color:var(--lagon);margin:.2em 0 1.2em}
.about-text p{color:var(--encre-70)}
.about-aside{border-left:3px solid var(--turq);padding-left:16px;color:var(--encre)!important;font-style:italic}
.about-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:1.8em}

/* ---------- Pourquoi moi ---------- */
.why{background:var(--sable)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:2.4em}
.why-item{padding:26px 22px;border-radius:var(--rayon);background:var(--sable);
  border-top:3px solid var(--turq)}
.why-item h3{font-size:1.1rem;margin-bottom:.4em}
.why-item p{color:var(--encre-70);font-size:.95rem;margin:0}

/* ---------- Contact ---------- */
.contact{background:var(--blanc)}
.contact-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.contact-intro-col p{color:var(--encre-70)}
.contact-meta{list-style:none;padding:0;margin:1.8em 0 0;display:grid;gap:14px}
.contact-meta li{display:flex;flex-direction:column;font-size:1rem}
.contact-meta-label{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--encre-70);margin-bottom:2px}
.contact-form{background:#fff;border:1px solid var(--ligne);border-radius:18px;padding:32px;
  box-shadow:0 14px 40px rgba(8,36,58,.06)}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;margin-bottom:6px;font-size:.92rem;color:var(--ink)}
.field input,.field textarea{
  width:100%;padding:13px 15px;border:1px solid var(--ligne);border-radius:11px;
  font:inherit;color:var(--encre);background:#fff;transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--turq);
  box-shadow:0 0 0 3px rgba(21,184,212,.18)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin:14px 0 0;text-align:center;font-weight:600;min-height:1.2em}
.form-status.ok{color:#157a3a}
.form-status.err{color:var(--corail-d)}

/* ---------- Pied de page ---------- */
.site-footer{background:var(--ink);color:#AFC4D4;padding:56px 0 28px}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px;
  padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-brand img{height:38px;width:auto;margin-bottom:14px}
.footer-brand p{margin:0;max-width:34ch;font-size:.95rem}
.footer-nav{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:flex-start}
.footer-nav a{color:#CFE0EC;font-weight:500}
.footer-nav a:hover{color:#fff}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;
  margin-top:24px;font-size:.85rem;color:#7C94A6}
.footer-bottom p{margin:0}
.footer-note{font-family:var(--mono);font-size:.78rem}

/* =========================================================
   Couleur dans les sections — palette lagon & poissons tropicaux
   ========================================================= */
/* 6 cartes d'expertise : un accent par carte */
.cards--6 .card{border-top:3px solid var(--turq)}
.cards--6 .card:nth-child(6n+1){border-top-color:#15B8D4}
.cards--6 .card:nth-child(6n+2){border-top-color:#FF6F52}
.cards--6 .card:nth-child(6n+3){border-top-color:#F4B400}
.cards--6 .card:nth-child(6n+4){border-top-color:#17A98C}
.cards--6 .card:nth-child(6n+5){border-top-color:#3A8FD0}
.cards--6 .card:nth-child(6n+6){border-top-color:#0E6BA8}
.cards--6 .card:nth-child(6n+1) .card-icon{background:rgba(21,184,212,.13);color:#0E92AC}
.cards--6 .card:nth-child(6n+2) .card-icon{background:rgba(255,111,82,.15);color:#E2553A}
.cards--6 .card:nth-child(6n+3) .card-icon{background:rgba(244,180,0,.18);color:#C58800}
.cards--6 .card:nth-child(6n+4) .card-icon{background:rgba(23,169,140,.15);color:#138A72}
.cards--6 .card:nth-child(6n+5) .card-icon{background:rgba(58,143,208,.15);color:#2E72AE}
.cards--6 .card:nth-child(6n+6) .card-icon{background:rgba(14,107,168,.13);color:#0E6BA8}

/* Interventions : deux couleurs pour distinguer les deux offres */
.missions-grid .mission{border-top:3px solid var(--turq)}
.missions-grid .mission:nth-child(2){border-top-color:var(--corail)}
.mission:nth-child(1) .mission-tag{color:#0E92AC;background:rgba(21,184,212,.1);border-color:rgba(21,184,212,.4)}
.mission:nth-child(2) .mission-tag{color:#E2553A;background:rgba(255,111,82,.1);border-color:rgba(255,111,82,.4)}
.mission:nth-child(1) .mission-list li::before{background:var(--turq)}
/* texture récif subtile sur la section interventions */
.missions{position:relative;overflow:hidden}
.missions::before{content:"";position:absolute;inset:0;background:url('/assets/img/reef-pattern.svg');
  background-size:200px;opacity:.05;pointer-events:none}
.missions>.wrap{position:relative}

/* Compétences : un soulignement coloré par groupe */
.stack-col h3{border-bottom-width:2px}
.stack-col:nth-child(6n+1) h3{border-bottom-color:#15B8D4}
.stack-col:nth-child(6n+2) h3{border-bottom-color:#FF6F52}
.stack-col:nth-child(6n+3) h3{border-bottom-color:#F4B400}
.stack-col:nth-child(6n+4) h3{border-bottom-color:#17A98C}
.stack-col:nth-child(6n+5) h3{border-bottom-color:#3A8FD0}
.stack-col:nth-child(6n+6) h3{border-bottom-color:#0E6BA8}

/* Pourquoi moi : accents variés */
.why-item:nth-child(4n+1){border-top-color:#15B8D4}
.why-item:nth-child(4n+2){border-top-color:#FF6F52}
.why-item:nth-child(4n+3){border-top-color:#F4B400}
.why-item:nth-child(4n+4){border-top-color:#17A98C}

/* Eyebrows : une couleur d'accent par section (signature qui reste mono) */
#missions .eyebrow .prompt{color:#FF6F52}
#stack .eyebrow .prompt{color:#F4B400}
#references .eyebrow .prompt{color:#17A98C}
#apropos .eyebrow .prompt{color:#3A8FD0}

/* ---------- Révélation au défilement ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:920px){
  .dolibarr-inner,.about-inner,.contact-inner,.missions-grid{grid-template-columns:1fr;gap:32px}
  .about-inner .portrait{max-width:320px}
  .why-grid,.cards--6,.stack-grid,.refs-grid{grid-template-columns:repeat(2,1fr)}
  .cards{gap:18px}
}
@media (max-width:640px){
  body{font-size:16px}
  .section{padding:68px 0}
  .site-nav{gap:16px}
  .site-nav a:not(.nav-cta){display:none}
  .hero-inner{padding:80px 0 70px}
  .hero-coral{width:118%;right:-9%;bottom:-30px;opacity:.5}
  .section-title{font-size:1.7rem}
  .why-grid,.cards--6,.stack-grid,.refs-grid{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;gap:20px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  .cursor{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover{transform:none}
}