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

:root{
  --paper: #F5F1E6;
  --paper-deep: #ECE3D0;
  --paper-line: #DDD2B8;
  --ink: #201D1A;
  --ink-soft: #55504A;
  --ink-faint: #8C867C;
  --seal: #8C2F26;
  --seal-deep: #6E241D;
  --jade: #56685A;
  --gold: #A8875A;
  --rule: rgba(32,29,26,0.14);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Noto Sans', 'Noto Serif SC', sans-serif;
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.serif{
  font-family:'Noto Serif','Noto Serif SC', serif;
  font-weight:500;
  letter-spacing:0.01em;
}

a{color:inherit;text-decoration:none;}

/* texture de fond papier de riz : grain léger + halo d'encre très diffus */
.paper-texture{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:0.5;
  background-image:
    radial-gradient(ellipse 900px 500px at 85% -5%, rgba(140,47,38,0.05), transparent 60%),
    radial-gradient(ellipse 700px 500px at 5% 30%, rgba(86,104,90,0.05), transparent 60%),
    repeating-linear-gradient(120deg, rgba(32,29,26,0.012) 0px, rgba(32,29,26,0.012) 1px, transparent 1px, transparent 3px);
}

/* ===== NAV ===== */
header.site-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 56px;
  background:rgba(245,241,230,0.86);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);
}
.brand{
  display:flex; align-items:center; gap:14px;
}
.brand-photo{width:36px; height:36px; border-radius:50%; overflow:hidden; border:1px solid var(--ink); flex-shrink:0;}
.brand-photo img{width:100%; height:100%; object-fit:cover;}
.seal-mark{
  width:34px; height:34px;
  background:var(--seal);
  display:flex; align-items:center; justify-content:center;
  color:var(--paper);
  font-family:'Noto Serif SC', serif;
  font-size:15px; font-weight:600;
  letter-spacing:0.02em;
  line-height:1;
  border-radius:2px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), 1px 1px 3px rgba(0,0,0,0.15);
}
.brand-name{
  font-family:'Noto Serif', serif;
  font-size:15px;
  letter-spacing:0.06em;
  color:var(--ink);
}
.brand-name span{color:var(--ink-faint); font-size:12px; display:block; letter-spacing:0.12em; margin-top:1px;}

nav.links{display:flex; gap:36px;}
nav.links a{
  font-size:12.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  position:relative;
  padding-bottom:3px;
}
nav.links a::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--seal);
  transition:width .35s ease;
}
nav.links a:hover::after{width:100%;}

.lang-switch{
  display:flex; align-items:center; gap:10px;
  font-family:'Noto Sans', sans-serif;
  font-size:12px; letter-spacing:0.06em;
}
.lang-switch a{color:var(--ink-faint); padding:2px 2px;}
.lang-switch a.active{color:var(--seal); font-weight:500;}
.lang-switch .sep{color:var(--paper-line);}

@media (max-width:900px){
  header.site-nav{padding:16px 20px;}
  nav.links{display:none;}
}

/* ===== HERO ===== */
.hero{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  min-height:88vh;
  padding:0 56px;
  align-items:center;
  gap:40px;
  overflow:hidden;
}
.hero-text{position:relative; z-index:2; padding:40px 0;}
.eyebrow{
  font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--jade); margin-bottom:22px; display:flex; align-items:center; gap:12px;
}
.eyebrow::before{content:''; width:26px; height:1px; background:var(--jade);}

.hero-text h1{
  font-size:clamp(40px,5.2vw,68px);
  line-height:1.08;
  margin:0 0 22px 0;
  color:var(--ink);
}
.hero-text h1 em{
  font-style:italic;
  color:var(--seal);
}

.brush-underline{
  width:210px; height:22px; margin:-6px 0 26px 0;
}
.brush-underline path{
  fill:none; stroke:var(--seal); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:340; stroke-dashoffset:340;
  animation:draw 1.6s 0.5s cubic-bezier(.65,0,.35,1) forwards;
}
@media (prefers-reduced-motion: reduce){
  .brush-underline path{animation:none; stroke-dashoffset:0;}
}
@keyframes draw{to{stroke-dashoffset:0;}}

.hero-text p.lede{
  font-size:17px; color:var(--ink-soft); max-width:440px; margin-bottom:34px;
  font-weight:300;
}

.hero-cta{display:flex; gap:28px; align-items:center;}
.btn-primary{
  border:1px solid var(--ink);
  padding:13px 30px;
  font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase;
  transition:all .3s ease;
}
.btn-primary:hover{background:var(--ink); color:var(--paper);}
.btn-ghost{
  font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft);
  border-bottom:1px solid var(--rule); padding-bottom:2px;
}

/* portrait — porte de lune */
.hero-visual{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  height:100%;
}
.moon-gate{
  position:relative;
  width:min(78%, 420px);
  aspect-ratio:1/1.12;
  border-radius:50% 50% 46% 46% / 55% 55% 45% 45%;
  border:2px solid var(--ink);
  overflow:hidden;
  background:
    linear-gradient(180deg, #DED2B4 0%, #C9BC9B 100%);
  box-shadow: 0 30px 60px -20px rgba(32,29,26,0.28);
}
.moon-gate::before{
  content:'';
  position:absolute; inset:10px;
  border:1px solid rgba(32,29,26,0.35);
  border-radius:inherit;
}
.moon-gate img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:sepia(0.12) saturate(0.92) contrast(1.02);
}
.moon-gate .photo-credit{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:16px 22px 14px;
  background:linear-gradient(0deg, rgba(20,18,16,0.55), transparent);
  color:#F5F1E6; font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
}

/* montagnes d'encre en fond */
.ink-mountains{
  position:absolute; left:-8%; right:-8%; bottom:-4%;
  z-index:1; opacity:0.9; pointer-events:none;
}

.seal-corner{
  position:absolute; right:0; bottom:26px; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.seal-corner .stamp{
  width:52px; height:52px; background:var(--seal); border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  color:var(--paper); font-family:'Noto Serif SC',serif; font-size:22px; font-weight:600;
  transform:rotate(-3deg);
  box-shadow:1px 2px 4px rgba(0,0,0,0.18);
}
.seal-corner span{font-size:10px; letter-spacing:0.16em; color:var(--ink-faint); text-transform:uppercase;}

@media (max-width:900px){
  .hero{grid-template-columns:1fr; padding:0 24px; min-height:auto; gap:0;}
  .hero-visual{order:-1; padding-top:50px;}
  .hero-text{padding:36px 0 60px;}
  .hero-text p.lede{max-width:100%;}
  .seal-corner{display:none;}
}

/* ===== divider pinceau ===== */
.brush-divider{
  width:100%; height:34px; margin:0 auto; display:block; max-width:1100px;
  padding:0 56px;
}
.brush-divider svg{width:100%; height:100%; display:block;}
.brush-divider path{stroke:var(--ink); stroke-opacity:0.18; stroke-width:1.4; fill:none;}

/* ===== SECTION GENERIQUE ===== */
section{position:relative; z-index:2; padding:90px 56px;}
.section-head{
  display:grid; grid-template-columns:220px 1fr; gap:40px; margin-bottom:56px;
  align-items:start;
}
.section-head .num{
  font-family:'Noto Serif SC', serif; color:var(--paper-line); font-size:64px; line-height:1;
}
.section-head h2{font-size:34px; margin:0 0 10px 0;}
.section-head p{color:var(--ink-soft); max-width:480px; font-size:15px; margin:0;}

@media (max-width:900px){
  section{padding:64px 24px;}
  .section-head{grid-template-columns:1fr; gap:14px;}
}

/* ===== BIO ===== */
.bio-grid{display:grid; grid-template-columns:220px 1fr; gap:40px; margin-bottom:70px;}
.bio-text{max-width:680px;}
.bio-text p{color:var(--ink-soft); font-size:15px; margin:0 0 20px 0;}
.bio-text p:first-of-type{color:var(--ink); font-size:16px;}
.bio-photo{margin:8px 0 28px; max-width:680px;}
.bio-photo img{width:100%; border-radius:2px; box-shadow:0 18px 34px -18px rgba(32,29,26,0.35); filter:sepia(0.06) saturate(0.96);}
.bio-photo span{display:block; margin-top:10px; font-size:11.5px; letter-spacing:0.06em; color:var(--ink-faint);}
.parcours-lead{
  margin:0 0 30px 220px; font-family:'Noto Serif',serif; font-size:20px; color:var(--ink);
  padding-top:44px; border-top:1px solid var(--rule); max-width:600px;
}
@media (max-width:900px){.bio-grid{grid-template-columns:1fr;} .parcours-lead{margin-left:0;}}
.pending-note{
  display:inline-block; margin-top:6px; font-size:11.5px; letter-spacing:0.04em;
  color:var(--seal); font-style:italic;
}

/* ===== PARCOURS (timeline) ===== */
.timeline{max-width:900px; margin-left:220px;}
@media (max-width:900px){.timeline{margin-left:0;}}
.tl-item{
  display:grid; grid-template-columns:110px 1fr; gap:28px;
  padding:46px 0; border-top:1px solid var(--rule);
}
.tl-item:first-child{border-top:1px solid var(--ink);}
.tl-year{font-family:'Noto Serif', serif; color:var(--seal); font-size:15px; padding-top:2px;}
.tl-body h3{font-size:17px; margin:0 0 10px 0; font-weight:500;}
.tl-body p{margin:0 0 14px 0; color:var(--ink-soft); font-size:14.5px; max-width:620px;}
.tl-body p:last-of-type{margin-bottom:0;}

/* ===== PUBLICATIONS ===== */
.pub-list{max-width:900px; margin-left:220px; display:flex; flex-direction:column;}
@media (max-width:900px){.pub-list{margin-left:0;}}
.pub-item{
  display:flex; justify-content:space-between; align-items:baseline; gap:24px;
  padding:22px 0; border-bottom:1px solid var(--rule);
}
.pub-item:hover .pub-title{color:var(--seal);}
.pub-title{font-family:'Noto Serif', serif; font-size:17px; transition:color .25s ease;}
.pub-meta{font-size:12.5px; color:var(--ink-faint); white-space:nowrap; letter-spacing:0.04em;}

/* ===== SEMINAIRES / EVENEMENTS ===== */
.card-row{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule);}
.card{background:var(--paper); padding:0 0 30px; position:relative;}
.card img{width:100%; aspect-ratio:16/10; object-fit:cover; margin-bottom:22px; filter:sepia(0.08) saturate(0.95);}
.card .img-pending{
  width:100%; aspect-ratio:16/10; margin-bottom:22px;
  background:var(--paper-deep); border:1px dashed var(--paper-line);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-faint); font-size:12px; letter-spacing:0.06em; text-align:center; padding:16px;
}
.card .card-body{padding:0 30px;}
.card .tag{font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--jade); margin-bottom:16px; display:block;}
.card h3{font-size:19px; margin:0 0 12px 0;}
.card p{font-size:14px; color:var(--ink-soft); margin:0;}
@media (max-width:900px){.card-row{grid-template-columns:1fr;}}

/* ===== GALERIE ===== */
.gallery{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:120px; gap:14px;
}
.gph{background:var(--paper-deep); border:1px solid var(--paper-line); position:relative; overflow:hidden;}
.gph img{width:100%; height:100%; object-fit:cover; filter:sepia(0.08) saturate(0.95);}
.gph:nth-child(1){grid-column:span 3; grid-row:span 2;}
.gph:nth-child(2){grid-column:span 2; grid-row:span 3;}
.gph:nth-child(3){grid-column:span 1; grid-row:span 2;}
.gph:nth-child(4){grid-column:span 3; grid-row:span 2;}
.gph:nth-child(5){grid-column:span 3; grid-row:span 2;}
.gph::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(160deg, transparent 60%, rgba(140,47,38,0.1));
  pointer-events:none;
}
@media (max-width:700px){
  .gallery{grid-template-columns:repeat(2,1fr); grid-auto-rows:150px;}
  .gph:nth-child(n){grid-column:span 1; grid-row:span 1;}
}

/* ===== CONTACT ===== */
.contact-wrap{
  display:grid; grid-template-columns:220px 1fr 1fr; gap:40px; max-width:1100px; margin:0 auto;
}
.contact-info h3{font-size:15px; margin:0 0 14px 0; letter-spacing:0.06em;}
.contact-info p{font-size:14px; color:var(--ink-soft); margin:0 0 6px 0;}
.field{margin-bottom:22px;}
.field label{display:block; font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px;}
.field input, .field textarea{
  width:100%; border:none; border-bottom:1px solid var(--rule); background:transparent;
  padding:8px 2px; font-family:'Noto Sans',sans-serif; font-size:14px; color:var(--ink);
  outline:none; transition:border-color .25s ease;
}
.field input:focus, .field textarea:focus{border-color:var(--seal);}
.send-btn{margin-top:6px;}
@media (max-width:900px){.contact-wrap{grid-template-columns:1fr;}}

/* ===== FOOTER ===== */
footer{
  padding:50px 56px; border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px;
  font-size:12px; color:var(--ink-faint); letter-spacing:0.03em;
}
footer .seal-mark{width:26px; height:26px; font-size:11px;}
@media (max-width:700px){footer{padding:34px 24px; flex-direction:column; align-items:flex-start;}}

/* ===== MULTI-PAGE ADDITIONS ===== */
nav.links a.active{color:var(--ink); font-weight:500;}
nav.links a.active::after{width:100%;}
nav.links{gap:26px;}
nav.links a{font-size:11.5px;}

.page-hero{position:relative; z-index:2; padding:70px 56px 40px; max-width:1100px; margin:0 auto;}
.page-hero .eyebrow{margin-bottom:16px;}
.page-hero h1{font-size:clamp(32px,4.4vw,50px); margin:0 0 16px 0;}
.page-hero p{color:var(--ink-soft); max-width:600px; font-size:15.5px; margin:0;}
@media (max-width:900px){.page-hero{padding:44px 24px 20px;} nav.links{display:none;}}

.teaser-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); max-width:1100px; margin:0 auto;}
.teaser-card{background:var(--paper); padding:36px 30px; display:flex; flex-direction:column; gap:14px;}
.teaser-card .num{font-family:'Noto Serif SC',serif; color:var(--paper-line); font-size:36px;}
.teaser-card h3{font-size:19px; margin:0;}
.teaser-card p{font-size:14px; color:var(--ink-soft); margin:0; flex-grow:1;}
.teaser-card .go{font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--seal);}
@media (max-width:900px){.teaser-grid{grid-template-columns:1fr;}}

.home-cta-band{max-width:1100px; margin:0 auto; padding:70px 56px; text-align:center; border-top:1px solid var(--rule);}
.home-cta-band h2{font-size:28px; margin:0 0 20px 0;}
@media (max-width:900px){.home-cta-band{padding:50px 24px;}}

.pub-item{color:inherit;}
.form-note{font-size:12px; color:var(--ink-faint); margin-top:10px; font-style:italic;}

.site-footer{position:relative; z-index:2; padding:48px 56px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; font-size:12px; color:var(--ink-faint);}
@media (max-width:700px){.site-footer{padding:32px 24px; flex-direction:column; align-items:flex-start;}}

/* photo générique dans le corps de texte */
.inline-photo{max-width:100%; margin:28px 0;}
.inline-photo img{width:100%; border-radius:2px; box-shadow:0 18px 34px -18px rgba(32,29,26,0.35); filter:sepia(0.06) saturate(0.96);}
.inline-photo span{display:block; margin-top:10px; font-size:11.5px; letter-spacing:0.06em; color:var(--ink-faint);}

/* Skikda page */
.skikda-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; max-width:1100px; margin:0 auto; align-items:start;}
.skikda-grid img{width:100%; border-radius:4px; box-shadow:0 20px 40px -20px rgba(32,29,26,0.35); filter:sepia(0.06) saturate(0.96);}
.skikda-text p{color:var(--ink-soft); font-size:15px; margin:0 0 18px 0;}
.map-embed{width:100%; aspect-ratio:4/3; border:1px solid var(--rule); border-radius:4px; overflow:hidden; margin-top:24px;}
.map-embed iframe{width:100%; height:100%; border:0; filter:grayscale(0.15) sepia(0.06);}
@media (max-width:900px){.skikda-grid{grid-template-columns:1fr;}}

.doubt-note{
  max-width:1100px; margin:0 auto 0; padding:0 56px;
  font-size:12px; color:var(--seal); font-style:italic;
}
@media (max-width:900px){.doubt-note{padding:0 24px;}}

/* ===== GALERIE + LIGHTBOX ===== */
.gallery-masonry{max-width:1150px; margin:0 auto; columns:4 240px; column-gap:14px;}
.gallery-masonry figure{break-inside:avoid; margin:0 0 14px 0; border-radius:4px; overflow:hidden; border:1px solid var(--paper-line); position:relative; cursor:zoom-in;}
.gallery-masonry img{width:100%; display:block; filter:sepia(0.05) saturate(0.97); transition:transform .4s ease;}
.gallery-masonry figure:hover img{transform:scale(1.04);}
.gallery-masonry figcaption{padding:9px 11px; font-size:11px; color:var(--ink-soft); background:var(--paper); letter-spacing:0.02em;}
@media (max-width:700px){.gallery-masonry{columns:2 150px;}}

.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(20,18,16,0.94);
  display:none; align-items:center; justify-content:center; flex-direction:column;
  padding:40px 20px;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:min(92vw,1100px); max-height:74vh; object-fit:contain; border-radius:3px; box-shadow:0 30px 60px rgba(0,0,0,0.5);}
.lightbox .lb-caption{color:#F5F1E6; font-size:13px; margin-top:16px; letter-spacing:0.03em; text-align:center; max-width:600px;}
.lightbox .lb-counter{color:rgba(245,241,230,0.5); font-size:11px; margin-top:6px; letter-spacing:0.1em;}
.lightbox .lb-close{position:absolute; top:22px; right:32px; color:#F5F1E6; font-size:32px; line-height:1; cursor:pointer; background:none; border:none; font-family:serif;}
.lightbox .lb-nav{position:absolute; top:50%; transform:translateY(-50%); background:none; border:none; color:#F5F1E6; font-size:40px; cursor:pointer; padding:10px 18px; opacity:0.7; transition:opacity .2s;}
.lightbox .lb-nav:hover{opacity:1;}
.lightbox .lb-prev{left:6px;}
.lightbox .lb-next{right:6px;}
@media (max-width:700px){
  .lightbox .lb-close{top:14px; right:16px; font-size:26px;}
  .lightbox .lb-nav{font-size:30px; padding:8px 10px;}
}

/* ===== SEMINAIRE DETAIL ===== */
.sem-meta{display:flex; gap:24px; flex-wrap:wrap; margin:18px 0 36px; font-size:13px; color:var(--ink-soft); letter-spacing:0.03em;}
.sem-meta span strong{color:var(--ink); font-weight:500;}
.sem-cover{max-width:900px; margin:0 auto 50px; padding:0 56px;}
.sem-cover img{width:100%; border-radius:4px; box-shadow:0 24px 46px -22px rgba(32,29,26,0.35); filter:sepia(0.06) saturate(0.96);}
@media (max-width:900px){.sem-cover{padding:0 24px;}}
.sem-body{max-width:760px; margin:0 auto; padding:0 56px 40px;}
.sem-body p{color:var(--ink-soft); font-size:15.5px; margin:0 0 20px 0;}
.sem-body .keywords{font-size:13px; color:var(--ink-faint); font-style:italic; margin-top:30px; padding-top:24px; border-top:1px solid var(--rule);}
.back-link{display:inline-block; margin:0 0 30px 56px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft);}
@media (max-width:900px){.back-link{margin-left:24px;}}

.pub-dl{font-size:12px; margin-left:auto; padding-left:16px; color:var(--ink-faint) !important; white-space:nowrap;}

/* ===== RTL (Arabic) ===== */
html[dir="rtl"] body{font-family:'Noto Sans','Noto Naskh Arabic','Noto Serif SC', sans-serif;}
html[dir="rtl"] .eyebrow::before{margin-left:12px; margin-right:0;}
html[dir="rtl"] .brush-underline{transform:scaleX(-1);}
html[dir="rtl"] .lang-switch{flex-direction:row-reverse;}
html[dir="rtl"] .hero-cta, html[dir="rtl"] nav.links{flex-direction:row-reverse;}
html[dir="rtl"] .section-head{grid-template-columns:1fr 220px;}
html[dir="rtl"] .section-head > div:first-child{order:2;}
html[dir="rtl"] .section-head > div:last-child{order:1;}
html[dir="rtl"] .timeline, html[dir="rtl"] .pub-list, html[dir="rtl"] .parcours-lead{margin-left:0; margin-right:220px;}
html[dir="rtl"] .tl-item{grid-template-columns:1fr 100px;}
html[dir="rtl"] .tl-item > .tl-year{order:2; text-align:left;}
html[dir="rtl"] .tl-item > .tl-body{order:1;}
html[dir="rtl"] .seal-corner{right:auto; left:0;}
html[dir="rtl"] .moon-gate .photo-credit{text-align:right;}
html[dir="rtl"] .back-link{margin-left:0;}
@media (max-width:900px){
  html[dir="rtl"] .timeline, html[dir="rtl"] .pub-list, html[dir="rtl"] .parcours-lead{margin-right:0;}
}
html[dir="rtl"] .card-row, html[dir="rtl"] .teaser-grid{direction:rtl;}
html[dir="rtl"] .gallery, html[dir="rtl"] .gallery-masonry{direction:rtl;}
html[dir="rtl"] .contact-wrap{grid-template-columns:1fr 1fr 220px;}
html[dir="rtl"] .sem-meta{flex-direction:row-reverse; justify-content:flex-end;}