/* =========================================================
   OBLIGIS GARNIER AVOCAT — feuille de style commune
   Univers presse sobre : papier crème, encre noire,
   bleu marine en accent. Titres Marcellus, texte Spectral.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Spectral:ital,wght@0,400;0,500;1,400&family=Work+Sans:wght@400;500&display=swap');

:root{
  --paper:      #FBF9F3;   /* fond papier crème */
  --paper-alt:  #F4F0E6;   /* crème un peu plus soutenu */
  --ink:        #1A1A18;   /* encre noire */
  --ink-deep:   #0F1A24;   /* bleu-encre profond (logo, accents forts) */
  --ink-soft:   #3A3833;   /* texte courant */
  --ink-mute:   #6E6B63;   /* texte secondaire */
  --rule:       #C9C4B6;   /* filets fins */
  --marine:     #2A3B4D;   /* bleu marine accent */
  --marine-vif: #1763C6;   /* bleu vif (rare) */
  --maxw: 1140px;
  --serif: 'Spectral', Georgia, serif;
  --display: 'Marcellus', Georgia, serif;
  --sans: 'Work Sans', system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

/* ---------- Layout général avec colonne latérale chevalier ---------- */
:root{ --knight-w: 290px; }
body{ position:relative; }
.knight-rail{
  position:fixed; top:0; right:0; width:var(--knight-w); height:100vh;
  border-left:1.5px solid var(--ink-deep); overflow:hidden; z-index:5;
  background:linear-gradient(to bottom, #FBF9F3 0%, #EDEBE0 32%, #E7E6DC 60%, #2A3B4D 100%);
}
.knight-rail .knight-svg{ display:block; width:100%; height:100%; }
.page-shell{ margin-right:var(--knight-w); }
@media(max-width:900px){
  :root{ --knight-w: 0px; }
  .knight-rail{ display:none; }
  .page-shell{ margin-right:0; }
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

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

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* ---------- En-tête / navigation ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--sans); font-size:11px; letter-spacing:1.5px;
  color:var(--ink-soft); text-transform:uppercase;
  padding:14px 48px;
  border-bottom:1.5px solid var(--ink-deep);
  max-width:1320px; margin:0 auto;
}

header.site-head{ background:var(--paper); }

.brand{
  text-align:center; padding:32px 28px 22px;
}
.brand a{ display:inline-block; }
.brand img{ height:168px; margin:0 auto; }

nav.main{
  border-top:0.5px solid var(--rule);
  border-bottom:1.5px solid var(--ink-deep);
}
nav.main ul{
  list-style:none; display:flex; justify-content:space-between; flex-wrap:wrap;
  gap:24px; font-family:var(--sans); font-size:17px; font-weight:500;
  letter-spacing:.4px;
  padding:20px 28px; max-width:var(--maxw); margin:0 auto;
}
nav.main a{
  color:var(--ink-deep); position:relative; padding-bottom:14px;
  transition:color .2s;
}
/* Vague calée à GAUCHE en début de texte, qui se remplit de couleur */
nav.main a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:30px; height:12px;
  background-repeat:no-repeat; background-position:left bottom; background-size:30px 12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22'%3E%3Cpath d='M2 12 C20 4 32 4 42 11 C53 18 64 18 82 11 C70 19 56 21 44 21 C28 21 10 19 2 12 Z' fill='none' stroke='%232A3B4D' stroke-width='2'/%3E%3C/svg%3E");
  opacity:.55;
  transition:opacity .3s ease;
}
/* Au survol / actif : la vague pleine (remplie) apparaît par-dessus le contour */
nav.main a::before{
  content:""; position:absolute; left:0; bottom:0;
  width:30px; height:12px; transform-origin:left center;
  background-repeat:no-repeat; background-position:left bottom; background-size:30px 12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22'%3E%3Cpath d='M2 12 C20 4 32 4 42 11 C53 18 64 18 82 11 C70 19 56 21 44 21 C28 21 10 19 2 12 Z' fill='%232A3B4D'/%3E%3Cpath d='M2 12 C12 8 18 8 26 12' fill='none' stroke='%23FBF9F3' stroke-width='1.4'/%3E%3C/svg%3E");
  clip-path:inset(0 100% 0 0);
  transition:clip-path .5s ease;
}
nav.main a:hover{ color:var(--marine); }
nav.main a:hover::before, nav.main a.active::before{ clip-path:inset(0 0 0 0); }
nav.main a:hover::after, nav.main a.active::after{ opacity:0; }
nav.main a.active{ color:var(--marine); }

/* ---------- Titres ---------- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:400; color:var(--ink); line-height:1.2; }
h1{ font-size:clamp(34px,5vw,52px); }
h2{ font-size:clamp(26px,3.4vw,36px); }
h3{ font-size:22px; }
.kicker{
  font-family:var(--sans); font-size:13px; letter-spacing:3px; font-weight:600;
  text-transform:uppercase; color:var(--marine); margin-bottom:14px;
}

p{ margin-bottom:18px; color:var(--ink-soft); text-align:justify; }
.lead{ font-size:21px; color:var(--ink); text-align:justify; }

/* ---------- Boutons / liens ---------- */
.link-arrow{
  font-family:var(--sans); font-size:14px; color:var(--ink);
  border-bottom:1.5px solid var(--ink); padding-bottom:2px;
  display:inline-block; transition:color .2s,border-color .2s;
}
.link-arrow:hover{ color:var(--marine); border-color:var(--marine); }

/* ---------- Hero accueil ---------- */
.hero{ display:grid; grid-template-columns:1.6fr 1fr; }
.hero .feature{ padding:46px 40px 46px 0; border-right:0.5px solid var(--rule); }
.hero .aside{ padding:46px 0 46px 40px; }
.hero .aside .item{ border-top:0.5px solid var(--rule); padding:14px 0; font-size:18px; }
.hero .aside .item:last-child{ border-bottom:0.5px solid var(--rule); }
@media(max-width:820px){
  .hero{ grid-template-columns:1fr; }
  .hero .feature{ border-right:none; border-bottom:0.5px solid var(--rule); padding:34px 0; }
  .hero .aside{ padding:34px 0; }
}

/* ---------- Approche : blocs alignés à gauche ---------- */
.approche-list{ margin-top:24px; max-width:760px; }
.approche-list .appro{
  border-top:0.5px solid var(--rule); padding:22px 0;
}
.approche-list .appro:last-child{ border-bottom:0.5px solid var(--rule); }
.approche-list .appro h3{ margin-bottom:8px; }
.approche-list .appro p{ margin:0; }

/* ---------- Sections ---------- */
section{ padding:54px 0; }
.section-line{ border-top:1.5px solid var(--ink-deep); }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.grid-3 .cell{ padding:26px 28px; border-right:0.5px solid var(--rule); }
.grid-3 .cell:last-child{ border-right:none; }
@media(max-width:820px){
  .grid-3{ grid-template-columns:1fr; }
  .grid-3 .cell{ border-right:none; border-bottom:0.5px solid var(--rule); }
}

/* ---------- Page intérieure : en-tête de page ---------- */
.page-head{ padding:48px 0 30px; border-bottom:1.5px solid var(--ink); }
.page-head .lead{ max-width:720px; }

/* ---------- Cabinet : blocs fondateur ---------- */
.founder-blocks{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.founder-blocks .fb{
  padding:28px 36px 28px 0; border-top:0.5px solid var(--rule);
}
.founder-blocks .fb:nth-child(odd){ border-right:0.5px solid var(--rule); }
.founder-blocks .fb:nth-child(even){ padding-left:40px; padding-right:0; }
.founder-blocks .fb-title{ font-size:26px; margin-bottom:14px; color:var(--ink-deep); }
.founder-blocks .fb p{ margin-bottom:14px; }
.founder-blocks .fb p:last-child{ margin-bottom:0; }
@media(max-width:760px){
  .founder-blocks{ grid-template-columns:1fr; }
  .founder-blocks .fb, .founder-blocks .fb:nth-child(odd), .founder-blocks .fb:nth-child(even){
    border-right:none; padding:22px 0;
  }
}

/* ---------- Domaines : robot décomposé + relais ---------- */
.dom-robot-grid{
  display:grid; grid-template-columns:160px 1fr; gap:0;
}
.dom-robot{
  border-right:0.5px solid var(--rule);
  display:block;
  opacity:0; transition:opacity 1s ease;
}
.dom-robot.in{ opacity:0.82; }
.dom-robot svg{ display:block; width:100%; height:auto; }
.dom-rows{ }
.dom-row{
  display:grid; grid-template-columns:minmax(220px,1fr) 1.3fr; gap:40px; align-items:start;
  padding:34px 0 34px 64px; border-bottom:0.5px solid var(--rule);
}
.dom-row:last-child{ border-bottom:0.5px solid var(--rule); }
.dom-row h3{ margin:0; }
.dom-row p{ margin:0; text-align:justify; align-self:start; }
/* parties du robot : remplies au survol, restent remplies */
.dom-robot .rp{ opacity:0; transition:opacity .7s ease; }
.dom-robot .rp.lit{ opacity:1; }
/* soleil scintillant */
@keyframes oga-sun-pulse{ 0%,100%{ opacity:.6; } 50%{ opacity:.95; } }
@keyframes oga-sun-halo{ 0%,100%{ opacity:.4; transform:scale(1); } 50%{ opacity:.7; transform:scale(1.08); } }
.dom-robot .sun-half{ animation:oga-sun-pulse 5s ease-in-out infinite; }
.dom-robot .sun-halo{ transform-box:fill-box; transform-origin:center; animation:oga-sun-halo 5s ease-in-out infinite; }
@media(max-width:820px){
  .dom-robot-grid{ grid-template-columns:1fr; }
  .dom-robot{ display:none; }
  .dom-row{ padding-left:0; }
}

/* ---------- Domaines : lignes alignées (ancien, conservé) ---------- */
.dom-rows{ border-top:1.5px solid var(--ink-deep); }
.dom-row{
  display:grid; grid-template-columns:300px 1fr; gap:40px; align-items:start;
  padding:28px 0; border-bottom:0.5px solid var(--rule);
}
.dom-row-head .dom-wave{ width:90px; margin-bottom:12px; overflow:hidden; }
.dom-row-head .dom-wave img{ width:90px; transition:transform .5s ease; }
.dom-row:hover .dom-wave img{ transform:translateX(8px); }
.dom-row-head h3{ margin:0; }
.dom-row p{ margin:0; align-self:center; }
@media(max-width:820px){
  .dom-row{ grid-template-columns:1fr; gap:12px; }
}

/* ---------- Domaines : vignettes avec vague (ancien, conservé) ---------- */
.dom-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1.5px solid var(--ink-deep); }
.dom-card{
  padding:30px 34px 30px 0; border-bottom:0.5px solid var(--rule);
}
.dom-card:nth-child(odd){ border-right:0.5px solid var(--rule); padding-right:40px; }
.dom-card:nth-child(even){ padding-left:40px; }
.dom-card .dom-wave{ width:120px; margin-bottom:16px; overflow:hidden; }
.dom-card .dom-wave img{ width:120px; transition:transform .5s ease; }
.dom-card:hover .dom-wave img{ transform:translateX(8px); }
.dom-card h3{ margin-bottom:10px; }
@media(max-width:760px){
  .dom-grid{ grid-template-columns:1fr; }
  .dom-card, .dom-card:nth-child(odd), .dom-card:nth-child(even){
    border-right:none; padding:24px 0;
  }
}

/* ---------- Domaines (ancienne liste, conservée) ---------- */
.domains{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; }
.domains .dom{
  padding:30px 30px 30px 0; border-bottom:0.5px solid var(--rule);
}
.domains .dom:nth-child(odd){ border-right:0.5px solid var(--rule); padding-right:40px; }
.domains .dom:nth-child(even){ padding-left:40px; }
.domains .dom h3{ margin-bottom:10px; }
.domains .dom .num{ font-family:var(--sans); font-size:12px; color:var(--marine); letter-spacing:2px; }
@media(max-width:760px){
  .domains{ grid-template-columns:1fr; }
  .domains .dom, .domains .dom:nth-child(odd), .domains .dom:nth-child(even){
    border-right:none; padding:24px 0;
  }
}

/* ---------- Publications : liste ---------- */
.pub-list{ border-top:1.5px solid var(--ink); }
/* Évite la double ligne : si la liste/grille suit directement l'en-tête de page,
   on s'appuie sur la bordure basse de .page-head (une seule ligne). */
.page-head + section .pub-list,
.page-head + section .contact-grid,
.page-head + section .dom-rows{ border-top:none; }
.page-head + .contact-grid{ border-top:none; }
.pub-item{
  display:grid; grid-template-columns:160px 1fr auto; gap:24px; align-items:baseline;
  padding:26px 0; border-bottom:0.5px solid var(--rule);
  transition:background .2s;
}
.pub-item:hover{ background:var(--paper-alt); }
.pub-item .date{ font-family:var(--sans); font-size:13px; color:var(--ink-mute); letter-spacing:1px; }
.pub-item .pub-cat{ font-family:var(--sans); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--marine); }
.pub-item h3{ margin:6px 0; }
.pub-item .excerpt{ font-size:16px; color:var(--ink-soft); margin:0; }
.pub-item .go{ font-family:var(--sans); font-size:22px; color:var(--marine); }
@media(max-width:680px){
  .pub-item{ grid-template-columns:1fr; gap:6px; }
  .pub-item .go{ display:none; }
}

/* ---------- Article (page publication) ---------- */
.article{ max-width:760px; margin:0 auto; }
.article .article-head{ padding:46px 0 26px; border-bottom:1.5px solid var(--ink); margin-bottom:34px; }
.article .meta{ font-family:var(--sans); font-size:13px; color:var(--ink-mute); letter-spacing:1px; margin-bottom:16px; }
.article h1{ margin-bottom:0; }
.article-body p{ margin-bottom:22px; }
.article-body h2{ margin:34px 0 14px; }
.article-body h3{ margin:26px 0 10px; }
.article-body blockquote{
  border-left:3px solid var(--marine); padding:6px 0 6px 22px; margin:26px 0;
  font-style:italic; color:var(--ink); font-size:20px;
}
.article-body ul,.article-body ol{ margin:0 0 22px 24px; }
.article-body li{ margin-bottom:8px; color:var(--ink-soft); }
.back-link{ font-family:var(--sans); font-size:14px; margin:40px 0; display:inline-block; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1.5px solid var(--ink); }
.contact-grid .col{ padding:36px 40px 36px 0; }
.contact-grid .col:last-child{ padding:36px 0 36px 40px; border-left:0.5px solid var(--rule); }
.contact-grid .row{ border-top:0.5px solid var(--rule); padding:14px 0; }
.contact-grid .row:first-child{ border-top:none; }
.contact-grid .label{ font-family:var(--sans); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-mute); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--sans); font-size:13px; color:var(--ink-mute); margin-bottom:6px; }
.field input,.field textarea{
  width:100%; padding:11px 12px; border:0.5px solid var(--rule); background:#fff;
  font-family:var(--serif); font-size:16px; color:var(--ink);
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--marine); }
.btn{
  font-family:var(--sans); font-size:14px; letter-spacing:1px; cursor:pointer;
  background:var(--ink); color:var(--paper); border:none; padding:13px 26px;
  transition:background .2s;
}
.btn:hover{ background:var(--marine); }
@media(max-width:760px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-grid .col,.contact-grid .col:last-child{ padding:28px 0; border-left:none; border-top:0.5px solid var(--rule); }
}

/* ---------- Pied de page ---------- */
footer.site-foot{
  border-top:1.5px solid var(--ink-deep); margin-top:30px;
  font-family:var(--sans); font-size:13px; color:var(--ink-mute);
}
footer.site-foot .foot-row{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  padding:22px 0;
}
footer.site-foot .foot-mark img{ display:block; }
footer.site-foot a:hover{ color:var(--marine); }

/* ---------- Animation d'apparition ---------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Relais page Domaines : effacement du chevalier de droite ---------- */
.knight-rail.relay-out{ opacity:0; transition:opacity 1s ease; pointer-events:none; }

/* ---------- Page Domaines : bannière robot à gauche (miroir de la droite) ---------- */
.robot-rail{
  position:fixed; top:0; left:0; width:var(--knight-w); height:100vh;
  border-right:1.5px solid var(--ink-deep); overflow:hidden; z-index:5;
  background:linear-gradient(to bottom, #FBF9F3 0%, #EDEBE0 32%, #E7E6DC 60%, #2A3B4D 100%);
  opacity:0; transition:opacity 1s ease;
}
.robot-rail.in{ opacity:1; }
.robot-rail svg{ display:block; width:100%; height:100%; }
.robot-rail .rp{ opacity:0; transition:opacity .7s ease; }
.robot-rail .rp.lit{ opacity:1; }
@keyframes oga-sun-halo{ 0%,100%{ opacity:.4; transform:scale(1); } 50%{ opacity:.7; transform:scale(1.08); } }
.robot-rail .sun-halo{ transform-box:fill-box; transform-origin:center; animation:oga-sun-halo 5s ease-in-out infinite; }
.robot-rail .sun-ring{ animation:oga-sun-halo 5s ease-in-out infinite; }
/* sur Domaines, le contenu laisse de la place à gauche ET à droite */
.page-domaines .page-shell{ margin-left:var(--knight-w); }
@media(max-width:900px){
  .robot-rail{ display:none; }
  .page-domaines .page-shell{ margin-left:0; }
}

/* ---------- Domaines : lignes de texte pleine largeur ---------- */
.dom-rows{ border-top:1.5px solid var(--ink-deep); }
.dom-line{
  display:grid; grid-template-columns:minmax(280px,1fr) 1.4fr; gap:48px; align-items:start;
  padding:34px 0; border-bottom:0.5px solid var(--rule);
}
.dom-line:first-child{ border-top:none; }
.dom-line h3{ margin:0; }
.dom-line p{ margin:0; text-align:justify; }
@media(max-width:760px){
  .dom-line{ grid-template-columns:1fr; gap:12px; }
}

/* ============================================================
   RESPONSIVE MOBILE — n'affecte que les écrans < 900px.
   Le design desktop au-dessus de 900px reste inchangé.
   ============================================================ */

/* Bouton hamburger : caché en desktop */
.nav-toggle{ display:none; }

@media(max-width:900px){
  /* body en colonne pour pouvoir réordonner : contenu d'abord, bannière ensuite */
  body{ display:flex; flex-direction:column; }
  body > header.site-head{ order:1; }
  body > .page-shell{ order:2; }
  body > footer.site-foot{ order:4; }
  .knight-rail, .robot-rail{ order:3; }

  /* --- Bannières latérales : transformées en bandeau sous le contenu --- */
  .knight-rail, .robot-rail{
    position:static; width:100%; height:340px;
    border-left:none; border-right:none;
    border-top:1.5px solid var(--ink-deep);
  }
  .page-shell, .page-domaines .page-shell{ margin-right:0; margin-left:0; }
  /* sur Domaines, on garde une seule bannière (la gauche/robot) sous le contenu ;
     la knight-rail droite est masquée en mobile pour éviter deux robots */
  .robot-rail{ opacity:1; }
  .page-domaines .knight-rail{ display:none; }

  /* --- Topbar resserrée --- */
  .topbar{ padding:10px 18px; font-size:9.5px; letter-spacing:1px; }

  /* --- Logo réduit --- */
  .brand img{ height:112px; }

  /* --- Navigation : hamburger --- */
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:46px; height:46px; margin:0 auto; padding:10px;
    background:transparent; border:none; cursor:pointer;
  }
  .nav-toggle span{
    display:block; height:2px; width:24px; margin:0 auto;
    background:var(--ink-deep); transition:transform .3s, opacity .3s;
  }
  .nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2){ opacity:0; }
  .nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  nav.main{ position:relative; }
  nav.main ul{
    display:none; flex-direction:column; gap:0;
    padding:0; border-top:1px solid var(--rule);
  }
  nav.main.open ul{ display:flex; }
  nav.main ul li{ width:100%; text-align:center; }
  nav.main ul li a{
    display:block; padding:16px 0; width:100%;
    border-bottom:0.5px solid var(--rule); font-size:16px;
  }
  /* on neutralise la vague décorative sous les items en mobile (lisibilité) */
  nav.main ul li a::before, nav.main ul li a::after{ display:none; }

  /* --- Contenu : marges et titres adaptés --- */
  .wrap{ padding:0 18px; }
  h1{ font-size:30px; line-height:1.2; }
  h2{ font-size:24px; }
  .lead{ font-size:18px; }
  .page-head{ padding:32px 0 22px; }

  /* --- Grilles en une colonne --- */
  .founder-blocks{ grid-template-columns:1fr; }
  .founder-blocks .fb, .founder-blocks .fb:nth-child(odd), .founder-blocks .fb:nth-child(even){
    border-right:none; padding:20px 0;
  }
  .dom-line{ grid-template-columns:1fr; gap:10px; }
  .contact-grid{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr; }

  /* --- Pied de page empilé --- */
  footer.site-foot .foot-row{ flex-direction:column; text-align:center; gap:10px; }
}

/* Très petits écrans */
@media(max-width:420px){
  .brand img{ height:92px; }
  .topbar span{ font-size:9px; }
  h1{ font-size:26px; }
}

/* Sur mobile, pas de survol : le robot des domaines s'affiche entier (toutes parties remplies) */
@media(max-width:900px){
  .robot-rail .rp{ opacity:1; }
  .knight-rail .knight-body{ opacity:1 !important; transform:none !important; }
  .knight-rail .k-eyeL, .knight-rail .k-eyeR, .knight-rail .k-emblem{ opacity:1; }
}

/* Page Domaines : la bannière droite démarre déjà effacée (évite tout flash
   du chevalier de droite en haut de page) ; le robot gauche est prêt à apparaître. */
.page-domaines .knight-rail{ opacity:0; pointer-events:none; }
.page-domaines .robot-rail{ opacity:0; }
.page-domaines .robot-rail.in{ opacity:1; }