/* =====================================================================
   ARKANIT — Ronald Laloue
   Charte graphique : sombre prestige / accents cuivrés
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap');

:root{
  --noir:        #0b0d10;
  --anthracite:  #121519;
  --anthracite2: #181c22;
  --carte:       #15191f;
  --bordure:     rgba(201,162,95,.18);
  --bordure-fine:rgba(255,255,255,.06);
  --cuivre:      #c9a25f;
  --cuivre-clair:#e3c690;
  --cuivre-fonce:#9a7838;
  --texte:       #e7e4dd;
  --texte-doux:  #a7a59e;
  --texte-faible:#6f6e69;
  --blanc:       #f5f2ea;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --ombre: 0 30px 80px -40px rgba(0,0,0,.8);
  --max: 1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--noir);
  color:var(--texte);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* fond texturé subtil */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1200px 600px at 78% -10%, rgba(201,162,95,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(201,162,95,.06), transparent 55%),
    var(--noir);
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.conteneur{max-width:var(--max);margin:0 auto;padding:0 32px}

/* ---------- Typographie ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;letter-spacing:.01em}
.surtitre{
  font-family:var(--sans);font-size:.74rem;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;color:var(--cuivre);
  display:inline-flex;align-items:center;gap:14px;
}
.surtitre::before{content:"";width:34px;height:1px;background:var(--cuivre);opacity:.6}

.lead{font-size:1.18rem;color:var(--texte-doux);font-weight:300;max-width:60ch}

/* ---------- En-tête / navigation ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(11,13,16,.72);
  border-bottom:1px solid var(--bordure-fine);
}
.nav .conteneur{display:flex;align-items:center;justify-content:space-between;height:78px}
.marque{display:flex;flex-direction:column;line-height:1}
.marque .nom{font-family:var(--serif);font-size:1.5rem;letter-spacing:.16em;color:var(--blanc)}
.marque .sous{font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--cuivre);margin-top:5px}
.menu{display:flex;gap:38px;align-items:center}
.menu a{
  font-size:.82rem;letter-spacing:.08em;color:var(--texte-doux);
  position:relative;padding:6px 0;transition:color .3s;
}
.menu a:hover,.menu a.actif{color:var(--blanc)}
.menu a.actif::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--cuivre);
}
.menu .cta{
  border:1px solid var(--cuivre);color:var(--cuivre-clair);
  padding:11px 22px;border-radius:2px;letter-spacing:.12em;
  transition:all .35s;
}
.menu .cta:hover{background:var(--cuivre);color:var(--noir)}
.burger{display:none;background:none;border:1px solid var(--bordure);color:var(--texte);
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;padding:9px 16px;border-radius:2px;cursor:pointer}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--sans);font-size:.82rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;padding:16px 32px;border-radius:2px;
  transition:all .4s cubic-bezier(.2,.7,.3,1);cursor:pointer;
}
.btn-or{background:var(--cuivre);color:var(--noir);border:1px solid var(--cuivre)}
.btn-or:hover{background:transparent;color:var(--cuivre-clair);box-shadow:0 0 0 1px var(--cuivre)}
.btn-ligne{border:1px solid var(--bordure);color:var(--texte)}
.btn-ligne:hover{border-color:var(--cuivre);color:var(--cuivre-clair)}
.btn .fleche{display:none}

/* ---------- Sections ---------- */
section{padding:120px 0;position:relative}
.entete-section{margin-bottom:64px;max-width:760px}
.entete-section h2{font-size:clamp(2.2rem,5vw,3.6rem);color:var(--blanc);margin-top:22px}

/* ---------- HERO ---------- */
.hero{padding:130px 0 120px;position:relative;overflow:hidden}
.hero-grille{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.hero h1{font-size:clamp(2.8rem,6.6vw,5.2rem);color:var(--blanc);margin:26px 0 28px}
.hero h1 em{font-style:italic;color:var(--cuivre-clair);font-weight:400}
.hero .lead{font-size:1.25rem;margin-bottom:42px}
.hero-actions{display:flex;gap:18px;flex-wrap:wrap}

.hero-visuel{position:relative;aspect-ratio:4/5;border:1px solid var(--bordure);
  border-radius:4px;overflow:hidden;background:
  linear-gradient(160deg,var(--anthracite2),var(--noir));box-shadow:var(--ombre)}
.hero-visuel .monogramme{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:13rem;color:rgba(201,162,95,.14);font-weight:600;
}
.hero-visuel .badge{
  position:absolute;left:28px;bottom:28px;right:28px;
  border-top:1px solid var(--bordure);padding-top:20px;
}
.hero-visuel .badge .r1{font-family:var(--serif);font-size:1.5rem;color:var(--blanc)}
.hero-visuel .badge .r2{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cuivre);margin-top:6px}

/* ---------- Bandeau chiffres ---------- */
.chiffres{border-top:1px solid var(--bordure-fine);border-bottom:1px solid var(--bordure-fine);padding:64px 0}
.chiffres-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.chiffre{text-align:center;position:relative}
.chiffre:not(:last-child)::after{content:"";position:absolute;right:-15px;top:14%;height:72%;width:1px;background:var(--bordure-fine)}
.chiffre .val{font-family:var(--serif);font-size:3rem;color:var(--cuivre-clair);line-height:1}
.chiffre .lib{font-size:.8rem;letter-spacing:.1em;color:var(--texte-doux);margin-top:12px;text-transform:uppercase}

/* ---------- Pôles / cartes services ---------- */
.poles{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:64px}
.pole{
  border:1px solid var(--bordure-fine);border-radius:4px;padding:42px;
  background:linear-gradient(180deg,var(--carte),rgba(21,25,31,.4));
  position:relative;overflow:hidden;
}
.pole::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--cuivre-fonce),var(--cuivre-clair),transparent)}
.pole .num{font-family:var(--serif);font-size:1rem;color:var(--cuivre);letter-spacing:.2em}
.pole h3{font-size:1.8rem;color:var(--blanc);margin:14px 0 16px}
.pole p{color:var(--texte-doux);font-size:.98rem}

.cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.carte{
  border:1px solid var(--bordure-fine);border-radius:4px;padding:36px 32px;
  background:var(--carte);transition:all .45s cubic-bezier(.2,.7,.3,1);position:relative;
}
.carte:hover{transform:translateY(-6px);border-color:var(--bordure);box-shadow:var(--ombre)}
.carte .ico{
  width:48px;height:48px;border:1px solid var(--bordure);border-radius:3px;
  display:flex;align-items:center;justify-content:center;color:var(--cuivre-clair);
  margin-bottom:24px;font-family:var(--serif);font-size:1.3rem;
}
.carte h3{font-size:1.3rem;color:var(--blanc);margin-bottom:12px}
.carte p{color:var(--texte-doux);font-size:.92rem}

/* ---------- Liste contrôles / valeurs ---------- */
.valeurs{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.valeur{border-left:1px solid var(--bordure);padding-left:24px}
.valeur h3{font-size:1.25rem;color:var(--cuivre-clair);margin-bottom:10px}
.valeur p{color:var(--texte-doux);font-size:.94rem}

/* ---------- Frise / parcours ---------- */
.frise{position:relative;margin-top:20px}
.frise::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:1px;background:var(--bordure)}
.etape{position:relative;padding:0 0 54px 52px}
.etape::before{content:"";position:absolute;left:3px;top:7px;width:13px;height:13px;border-radius:50%;
  background:var(--noir);border:1px solid var(--cuivre)}
.etape .periode{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cuivre)}
.etape h3{font-size:1.5rem;color:var(--blanc);margin:8px 0 4px}
.etape .org{font-size:.95rem;color:var(--texte-doux);font-style:italic;margin-bottom:16px}
.etape ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.etape li{position:relative;padding-left:22px;color:var(--texte-doux);font-size:.95rem}
.etape li::before{content:"—";position:absolute;left:0;color:var(--cuivre)}

/* ---------- Compétences ---------- */
.comp-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:10px}
.comp{border:1px solid var(--bordure-fine);border-radius:4px;padding:32px;background:var(--carte)}
.comp h3{font-size:1.15rem;color:var(--cuivre-clair);margin-bottom:18px;letter-spacing:.02em}
.comp .tags{display:flex;flex-wrap:wrap;gap:9px}
.comp .tags span{font-size:.8rem;color:var(--texte-doux);border:1px solid var(--bordure-fine);
  padding:7px 13px;border-radius:2px;background:rgba(255,255,255,.02)}

/* ---------- Citation ---------- */
.citation{text-align:center;max-width:880px;margin:0 auto;padding:30px 0}
.citation p{font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,3.4vw,2.4rem);
  color:var(--blanc);line-height:1.4}
.citation .sig{margin-top:28px;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cuivre)}

/* ---------- Bandeau CTA ---------- */
.bandeau{
  border:1px solid var(--bordure);border-radius:4px;
  background:linear-gradient(135deg,var(--anthracite2),var(--noir));
  padding:72px;text-align:center;position:relative;overflow:hidden;
}
.bandeau::after{content:"";position:absolute;inset:0;
  background:radial-gradient(600px 300px at 50% -40%,rgba(201,162,95,.16),transparent 70%)}
.bandeau>*{position:relative}
.bandeau h2{font-size:clamp(2rem,4.4vw,3rem);color:var(--blanc);margin-bottom:18px}
.bandeau p{color:var(--texte-doux);max-width:54ch;margin:0 auto 36px}

/* ---------- Contact ---------- */
.contact-grille{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.coord{display:flex;flex-direction:column;gap:30px;margin-top:26px}
.coord .ligne{border-bottom:1px solid var(--bordure-fine);padding-bottom:22px}
.coord .ligne .et{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cuivre);margin-bottom:8px}
.coord .ligne .va{font-size:1.15rem;color:var(--blanc);font-family:var(--serif)}
.coord .ligne a:hover{color:var(--cuivre-clair)}

.contact-direct{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px}

form{display:flex;flex-direction:column;gap:22px}
.champ{display:flex;flex-direction:column;gap:9px}
.champ label{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-doux)}
.champ input,.champ textarea{
  background:var(--anthracite);border:1px solid var(--bordure-fine);border-radius:2px;
  padding:15px 16px;color:var(--texte);font-family:var(--sans);font-size:.95rem;transition:border .3s;
}
.champ input:focus,.champ textarea:focus{outline:none;border-color:var(--cuivre)}
.champ textarea{resize:vertical;min-height:140px}

/* ---------- Pied de page ---------- */
.pied{border-top:1px solid var(--bordure-fine);padding:60px 0 40px;margin-top:40px}
.pied-grille{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
.pied .marque .nom{font-size:1.3rem}
.pied-liens{display:flex;gap:30px;flex-wrap:wrap}
.pied-liens a{font-size:.85rem;color:var(--texte-doux);transition:color .3s}
.pied-liens a:hover{color:var(--cuivre-clair)}
.pied-bas{margin-top:40px;padding-top:24px;border-top:1px solid var(--bordure-fine);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:.78rem;color:var(--texte-faible);letter-spacing:.04em}

/* ---------- Animations d'apparition ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.3,1)}
.reveal.vu{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero-grille{grid-template-columns:1fr;gap:48px}
  .hero-visuel{max-width:420px;margin:0 auto}
  .poles{grid-template-columns:1fr}
  .cartes,.valeurs,.comp-grille{grid-template-columns:1fr 1fr}
  .chiffres-grille{grid-template-columns:1fr 1fr;gap:48px 20px}
  .chiffre:nth-child(2)::after{display:none}
  .contact-grille{grid-template-columns:1fr;gap:48px}
}
@media (max-width:680px){
  .conteneur{padding:0 22px}
  section{padding:84px 0}
  .menu{display:none;position:absolute;top:78px;left:0;right:0;flex-direction:column;
    gap:0;background:var(--anthracite);border-bottom:1px solid var(--bordure-fine);padding:10px 0}
  .menu.ouvert{display:flex}
  .menu a{padding:16px 32px;width:100%}
  .menu .cta{margin:14px 32px;text-align:center}
  .burger{display:block}
  .cartes,.valeurs,.comp-grille,.chiffres-grille{grid-template-columns:1fr}
  .chiffre::after{display:none!important}
  .bandeau{padding:48px 26px}
  .pole{padding:32px 26px}
}