/* ==========================================================================
   CroisSens Patrimoine — feuille de style
   Palette : marine profond + or bruni, sur fond ivoire.
   Display : Fraunces (serif éditorial) — Corps : Inter.
   ========================================================================== */

:root{
  /* Marine */
  --navy-950:#0a1a29;
  --navy-900:#0e2438;
  --navy-800:#153349;
  --navy-700:#1d4059;

  /* Or bruni */
  --gold-700:#916b34;
  --gold-600:#b3924f;
  --gold-500:#c7a666;
  --gold-300:#e3cf9e;
  --gold-100:#f2e9d4;

  /* Ivoire / papier */
  --cream-50:#f8f5ee;
  --cream-100:#f1ebdd;
  --cream-200:#e8e0cb;

  /* Encre */
  --ink-900:#161d24;
  --ink-700:#3a4149;
  --ink-500:#646b72;

  --line-on-navy:rgba(243,236,219,0.16);
  --line-on-cream:rgba(20,30,40,0.12);

  --container:1120px;
  --radius:2px;

  --shadow-soft:0 20px 60px -25px rgba(10,20,30,0.35);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--cream-50);
  color:var(--ink-900);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:600;
  color:var(--navy-900);
  line-height:1.14;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.4rem,4.6vw,4.1rem); font-weight:700;}
h2{font-size:clamp(1.9rem,3.2vw,2.7rem); font-weight:600;}
h3{font-size:clamp(1.25rem,1.8vw,1.55rem); font-weight:600;}
p{margin:0 0 1.1em; color:var(--ink-700);}
a{color:inherit;}
img{max-width:100%; display:block;}
strong{color:var(--navy-900); font-weight:650;}

.italic-serif{font-family:'Playfair Display',serif; font-style:italic; font-weight:400;}

.container{max-width:var(--container); margin:0 auto; padding:0 32px;}
@media (max-width:640px){.container{padding:0 22px;}}

.eyebrow{
  font-family:'Inter',sans-serif;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-600);
  display:inline-flex;
  align-items:center;
  gap:.6em;
  margin-bottom:1.1em;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:var(--gold-600);
  display:inline-block;
}
.eyebrow.on-navy{color:var(--gold-300);}
.eyebrow.on-navy::before{background:var(--gold-300);}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.65em;
  font-family:'Inter',sans-serif;
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.03em;
  text-decoration:none;
  padding:.95em 1.7em;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:all .35s var(--ease);
  white-space:nowrap;
}
.btn-gold{
  background:var(--gold-600);
  color:var(--navy-950);
}
.btn-gold:hover{background:var(--gold-500); transform:translateY(-1px);}
.btn-outline-navy{
  border-color:rgba(14,36,56,0.3);
  color:var(--navy-900);
  background:transparent;
}
.btn-outline-navy:hover{border-color:var(--navy-900); background:var(--navy-900); color:var(--cream-50);}
.btn-outline-gold{
  border-color:rgba(227,207,158,0.55);
  color:var(--gold-300);
  background:transparent;
}
.btn-outline-gold:hover{border-color:var(--gold-300); background:rgba(227,207,158,0.08);}
.btn-arrow{transition:transform .35s var(--ease);}
.btn:hover .btn-arrow{transform:translateX(3px);}

/* ---------- En-tête ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(248,245,238,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-on-cream);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:84px;
}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none;}
.brand img{height:44px; width:44px; border-radius:50%;}
.brand-text{font-family:'Playfair Display',serif; line-height:1.05;}
.brand-text .name{display:block; font-size:1.02rem; font-weight:600; color:var(--navy-900); letter-spacing:.01em;}
.brand-text .tagline{display:block; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-600); margin-top:2px;}

nav.main-nav{display:flex; align-items:center; gap:2.4rem;}
nav.main-nav a{
  text-decoration:none;
  font-size:.86rem; font-weight:600;
  color:var(--ink-700);
  position:relative;
  padding:6px 0;
}
nav.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold-600); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
nav.main-nav a:hover::after, nav.main-nav a.active::after{transform:scaleX(1);}
nav.main-nav a.active{color:var(--navy-900);}
nav.main-nav .btn{margin-left:.4rem;}

.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.nav-toggle span{display:block; width:24px; height:1.5px; background:var(--navy-900); margin:5px 0; transition:.3s;}

@media (max-width:1100px){
  nav.main-nav{
    position:fixed; inset:84px 0 0 0; background:var(--cream-50);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:1rem 22px 2rem;
    transform:translateX(100%); transition:transform .4s var(--ease);
    overflow-y:auto;
  }
  nav.main-nav.open{transform:translateX(0);}
  nav.main-nav a{width:100%; padding:1.1em 0; border-bottom:1px solid var(--line-on-cream); font-size:1.05rem;}
  nav.main-nav .btn{margin:1.4em 0 0; width:100%; justify-content:center;}
  .nav-toggle{display:block;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:var(--navy-900);
  color:var(--cream-50);
  overflow:hidden;
  padding:clamp(90px,14vw,150px) 0 clamp(70px,10vw,110px);
}
.hero-rings{
  position:absolute; right:-12%; top:50%; transform:translateY(-50%);
  width:min(760px,70vw); height:min(760px,70vw);
  opacity:.5; pointer-events:none;
}
.hero-photo-veil{
  position:absolute; inset:0;
  background:linear-gradient(100deg, var(--navy-950) 28%, rgba(14,36,56,0.72) 55%, rgba(14,36,56,0.35) 100%),
    var(--hero-img, none) center/cover;
}
.hero .container{position:relative; z-index:2;}
.hero-inner{max-width:680px;}
.hero h1{color:var(--cream-50);}
.hero h1 em{font-style:italic; color:var(--gold-300);}
.hero p.lede{
  font-size:1.18rem; color:rgba(248,245,238,0.82); max-width:560px;
}
.hero-cta{display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap;}

.hero-quote{
  margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line-on-navy);
  max-width:560px;
}
.hero-quote p{
  font-family:'Playfair Display',serif; font-style:italic; font-weight:400;
  font-size:1.2rem; color:var(--cream-100); margin:0;
}

/* Petit ruban image sous le hero (page d'accueil) */
.hero-strip{
  height:clamp(160px,26vw,320px);
  background-size:cover; background-position:center;
  position:relative;
}
.hero-strip::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, var(--navy-900) 0%, transparent 18%);}

/* ---------- Sections génériques ---------- */
section{padding:clamp(64px,9vw,110px) 0;}
.section-navy{background:var(--navy-900); color:var(--cream-100);}
.section-navy h2, .section-navy h3{color:var(--cream-50);}
.section-navy p{color:rgba(248,245,238,0.75);}
.section-cream-200{
  position:relative;
  background-color:var(--cream-200);
  background-image:url('../img/motif-fond.jpg');
  background-repeat:repeat;
  background-size:480px auto;
}
.section-cream-200 .container{position:relative; z-index:1;}

.section-head{max-width:640px; margin-bottom:3rem;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ---------- Grilles piliers / cartes ---------- */
.pillars{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line-on-cream); border:1px solid var(--line-on-cream);
}
.pillar{background:var(--cream-50); padding:2.4rem 2.2rem;}
.pillar .num{
  font-family:'Playfair Display',serif; font-style:italic; font-size:1rem; color:var(--gold-600); display:block; margin-bottom:.8rem;
}
.pillar h3{margin-bottom:.6rem;}
.pillar p{margin:0; font-size:.96rem;}
@media (max-width:760px){.pillars{grid-template-columns:1fr;}}

/* ---------- Citation en exergue ---------- */
.pull-quote{
  max-width:760px; margin:0 auto; text-align:center;
}
.pull-quote p{
  font-family:'Playfair Display',serif; font-style:italic; font-weight:400;
  font-size:clamp(1.4rem,2.6vw,2rem); color:var(--navy-900); line-height:1.4;
}
.pull-quote cite{
  display:block; margin-top:1.2rem; font-style:normal; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-600); font-weight:600;
}

/* ---------- CTA bandeau ---------- */
.cta-banner{
  background:var(--navy-900); color:var(--cream-50);
  padding:clamp(56px,8vw,84px) 0; text-align:center;
}
.cta-banner h2{color:var(--cream-50); margin-bottom:.4rem;}
.cta-banner p{color:rgba(248,245,238,0.7); margin-bottom:2rem;}

/* ---------- Pied de page ---------- */
footer.site-footer{
  background:var(--navy-950); color:rgba(248,245,238,0.62);
  padding:60px 0 30px; font-size:.87rem;
}
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2.5rem;
  padding-bottom:2.6rem; border-bottom:1px solid var(--line-on-navy);
}
.footer-brand{display:flex; gap:14px; margin-bottom:1.1rem;}
.footer-brand img{height:40px; width:40px; border-radius:50%;}
.footer-brand .name{font-family:'Playfair Display',serif; color:var(--cream-50); font-size:1rem;}
.footer-col h4{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-300);
  font-family:'Inter',sans-serif; font-weight:600; margin-bottom:1.1rem;
}
.footer-col a, .footer-col p{
  display:block; color:rgba(248,245,238,0.62); text-decoration:none; margin-bottom:.55rem; font-size:.87rem;
}
.footer-col a:hover{color:var(--gold-300);}
.footer-legal{padding-top:1.6rem; font-size:.74rem; line-height:1.7; color:rgba(248,245,238,0.4);}
.footer-legal .legal-toggle{
  color:var(--gold-300); background:none; border:none; cursor:pointer; font-size:.74rem;
  text-decoration:underline; padding:0; margin-bottom:1rem; font-family:'Inter',sans-serif;
}
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  margin-top:1.6rem; font-size:.76rem; color:rgba(248,245,238,0.4);
}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr; gap:2rem;}}

/* ---------- Utilitaires ---------- */
.reveal{opacity:1; transform:none;}
.reveal.reveal-armed{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.reveal-armed.is-visible{opacity:1; transform:none;}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start;}
@media (max-width:820px){.two-col{grid-template-columns:1fr; gap:2.4rem;}}

.figure-photo{position:relative; overflow:hidden;}
.figure-photo img{width:100%; height:100%; object-fit:cover;}
.figure-frame{border:1px solid var(--gold-500); position:absolute; inset:16px; pointer-events:none;}

.divider{height:1px; background:var(--line-on-cream); border:none; margin:0;}
.divider.on-navy{background:var(--line-on-navy);}

.tag-row{display:flex; flex-wrap:wrap; gap:.6rem;}
.tag{
  font-size:.76rem; font-weight:600; letter-spacing:.03em;
  padding:.45em 1em; border:1px solid var(--line-on-cream); color:var(--ink-700);
  border-radius:100px;
}

/* Table des principes (Fondements) */
.principle-list{border-top:1px solid var(--line-on-cream);}
.principle{
  display:grid; grid-template-columns:280px 1fr; gap:2.4rem;
  padding:2rem 0; border-bottom:1px solid var(--line-on-cream);
}
.principle h3{color:var(--navy-900); margin:0;}
.principle p{margin:0;}
@media (max-width:760px){.principle{grid-template-columns:1fr; gap:.6rem;}}

/* Page banner (pages internes) */
.page-banner{
  background:var(--navy-900); color:var(--cream-100);
  padding:clamp(64px,10vw,100px) 0 clamp(50px,7vw,70px);
  position:relative; overflow:hidden;
}
.page-banner .eyebrow{margin-bottom:.9rem;}
.page-banner h1{color:var(--cream-50); max-width:760px;}
.page-banner p.lede{max-width:600px; color:rgba(248,245,238,0.78); font-size:1.08rem;}
.page-banner-rings{position:absolute; right:-8%; top:-20%; width:520px; height:520px; opacity:.35;}

/* Expertises grille */
.expertise-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-on-cream); border:1px solid var(--line-on-cream);}
.expertise-card{background:var(--cream-50); padding:2.4rem 2rem; transition:background .3s;}
.expertise-card:hover{background:var(--cream-100);}
.expertise-card .mark{width:34px; height:34px; margin-bottom:1.2rem;}
.expertise-card h3{margin-bottom:.7rem; font-size:1.15rem;}
.expertise-card p{font-size:.93rem; margin-bottom:1rem;}
.expertise-card .qs{font-size:.82rem; color:var(--gold-700); font-style:italic; font-family:'Playfair Display',serif;}
@media (max-width:900px){.expertise-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.expertise-grid{grid-template-columns:1fr;}}

/* Méthode : 3 niveaux */
.level-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line-on-navy);}
.level-card{background:var(--navy-800); padding:2.2rem 1.9rem;}
.level-card .lvl-no{font-family:'Playfair Display',serif; font-style:italic; color:var(--gold-300); font-size:1rem;}
.level-card h3{color:var(--cream-50); margin:.5rem 0 .7rem; font-size:1.1rem;}
.level-card p{color:rgba(248,245,238,0.72); font-size:.92rem; margin:0;}
@media (max-width:820px){.level-grid{grid-template-columns:1fr;}}

/* Anneaux (7 temps) */
.rings-wrap{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;}
@media (max-width:900px){.rings-wrap{grid-template-columns:1fr;}}
.rings-svg-holder{position:relative;}
.rings-svg-holder svg{width:100%; height:auto; cursor:default;}
.ring-arc{transition:opacity .3s, stroke-width .3s; cursor:pointer;}
.ring-arc:hover, .ring-arc.active{opacity:1 !important;}
.ring-label{font-family:'Inter',sans-serif; font-size:11.5px; font-weight:600; fill:var(--cream-100); letter-spacing:.02em;}

.temps-detail{min-height:230px;}
.temps-item{display:none;}
.temps-item.active{display:block; animation:fadein .4s var(--ease);}
@keyframes fadein{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
.temps-item .idx{
  font-family:'Playfair Display',serif; font-style:italic; color:var(--gold-300); font-size:1rem;
}
.temps-item h3{color:var(--cream-50); margin:.4rem 0 .9rem;}
.temps-item p{color:rgba(248,245,238,0.75); margin:0 0 .8rem; font-size:.95rem;}
.temps-item .prod{
  font-size:.8rem; color:var(--gold-300); text-transform:uppercase; letter-spacing:.08em; font-weight:600;
}
.temps-dots{display:flex; gap:.5rem; margin-top:1.6rem;}
.temps-dot{
  width:8px; height:8px; border-radius:50%; background:rgba(248,245,238,0.25); border:none; cursor:pointer; padding:0;
  transition:background .3s, transform .3s;
}
.temps-dot.active{background:var(--gold-400,var(--gold-500)); transform:scale(1.3);}

/* Domaines d'expertise : ronds séparés, taille égale */
.domaine-badges{
  display:grid; grid-template-columns:repeat(3,96px);
  gap:1.8rem 1.4rem;
  justify-content:center; align-content:center; align-self:center;
}
.domaine-badge{display:flex; flex-direction:column; align-items:center; gap:.8rem; width:96px;}
.domaine-badge .circle{
  width:84px; height:84px; border-radius:50%;
  border:1px solid rgba(227,207,158,0.35);
  background:rgba(227,207,158,0.045);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s, border-color .3s;
}
.domaine-badge:hover .circle{background:rgba(227,207,158,0.09); border-color:rgba(227,207,158,0.55);}
.domaine-badge svg{width:30px; height:30px;}
.domaine-badge .lbl{
  font-size:.78rem; font-weight:600; letter-spacing:.03em; color:var(--gold-300); text-align:center;
}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:4rem;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr; gap:2.6rem;}}
.contact-card{background:var(--cream-100); border:1px solid var(--line-on-cream); padding:2.6rem;}
.contact-line{display:flex; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--line-on-cream);}
.contact-line:last-child{border-bottom:none;}
.contact-line .lbl{width:110px; flex-shrink:0; font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-700); font-weight:600; padding-top:2px;}
.contact-line .val{font-size:.98rem; color:var(--ink-900);}
.contact-line a{color:var(--ink-900); text-decoration:none; border-bottom:1px solid var(--line-on-cream);}
.contact-line a:hover{border-color:var(--gold-600); color:var(--gold-700);}

.contact-form{display:grid; gap:1.2rem;}
.field{display:grid; gap:.5rem;}
.field label{font-size:.78rem; font-weight:600; letter-spacing:.03em; color:var(--navy-900); text-transform:uppercase;}
.field input, .field textarea, .field select{
  font-family:'Inter',sans-serif; font-size:.95rem; padding:.85em 1em;
  border:1px solid var(--line-on-cream); background:var(--cream-50); color:var(--ink-900);
  border-radius:var(--radius); resize:vertical;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:2px solid var(--gold-500); outline-offset:1px; border-color:var(--gold-500);
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem;}
@media (max-width:560px){.field-row{grid-template-columns:1fr;}}

/* Mentions légales */
.legal-doc h2{margin-top:2.2rem; font-size:1.3rem;}
.legal-doc p{font-size:.94rem;}

/* Accessibilité focus */
a:focus-visible, button:focus-visible{outline:2px solid var(--gold-600); outline-offset:2px;}