@import url('fonts/fonts.css');
/* ============================================================
   MAISON ÉDITO : système de marque (éditorial chic, esprit magazine)
   Concept 04 pour Raj'House. Grille magazine, gros blancs, filets fins,
   folios numérotés, un seul accent (terracotta), photos plein cadre en
   noir et blanc chaud. Distinct du concept 01 (club rétro) : ici, tout
   respire, rien ne s'arrondit, une seule couleur mène.
   ============================================================ */
:root{
  --encre:#16130F;        /* primaire : texte, aplats */
  --encre-2:#4A4438;       /* teinte technique dérivée de l'encre, texte secondaire (contraste garanti) */
  --blanc:#F7F5F0;         /* fond clair */
  --terracotta:#BC4A2E;    /* accent unique */
  --taupe:#8A8272;         /* gris neutre */
  --ecru:#E9E4DA;          /* fond secondaire */
  --ombre:0 18px 40px rgba(22,19,15,.10);
  --ombre-s:0 6px 18px rgba(22,19,15,.08);
  --filet:1px solid rgba(22,19,15,.16);
  --filet-vif:1px solid var(--encre);
  --maxw:1180px;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Work Sans',system-ui,sans-serif;
  --script:'Sacramento',cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--blanc);color:var(--encre);
  font-family:var(--sans);font-size:18px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration-color:rgba(188,74,46,.55);text-underline-offset:4px;text-decoration-thickness:1px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.04;margin:0 0 .38em;color:var(--encre);letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,6.4vw,5.2rem)}
h2{font-size:clamp(1.9rem,4.2vw,3rem)}
h3{font-size:1.5rem;font-weight:600}
p{margin:0 0 1.1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.script{font-family:var(--script);font-weight:400}
.italic{font-style:italic}
.mb0{margin-bottom:0}.mt0{margin-top:0}
.center{text-align:center}

/* -------- Kicker (label de rubrique) -------- */
.kicker{display:inline-flex;align-items:center;gap:.8em;
  font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--encre)}
.kicker::before{content:"";width:30px;height:1px;background:var(--terracotta);flex:0 0 auto}
.kicker.inverse{color:var(--ecru)}
.kicker.center{justify-content:center}

/* -------- Folio (numéro de rubrique, façon sommaire de magazine) -------- */
.folio{font-family:var(--serif);color:var(--terracotta);font-weight:500;
  font-size:1.7rem;line-height:1}
.folio.lg{font-size:clamp(3rem,7vw,5.5rem)}

/* -------- Boutons (rectangulaires, jamais de pilule) -------- */
.btn{display:inline-flex;align-items:center;gap:.7em;font-family:var(--sans);
  font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  padding:1em 1.7em;border:1px solid var(--encre);text-decoration:none;
  cursor:pointer;transition:.18s;background:transparent;color:var(--encre)}
.btn svg{flex:0 0 auto}
.btn-primary{background:var(--encre);color:var(--blanc);border-color:var(--encre)}
.btn-primary:hover{background:var(--terracotta);border-color:var(--terracotta)}
.btn-ghost{background:transparent;color:var(--encre);border-color:var(--encre)}
.btn-ghost:hover{background:var(--encre);color:var(--blanc)}
.btn-line{border-color:transparent;padding-left:0;padding-right:0;border-bottom:1px solid var(--encre)}
.btn-line:hover{border-color:var(--terracotta);color:var(--terracotta)}

/* -------- Nav masthead -------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(247,245,240,.94);
  backdrop-filter:blur(10px);border-bottom:var(--filet)}
.nav .wrap{display:flex;align-items:center;gap:30px;height:82px}
.nav .brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.nav .brand img{height:28px}
.nav .brand b{font-family:var(--sans);font-weight:600;font-size:.76rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--encre)}
.nav .links{display:flex;gap:28px;flex-wrap:wrap}
.nav .links a{font-family:var(--sans);font-weight:500;font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--encre);text-decoration:none;padding:.3em 0;
  border-bottom:1px solid transparent}
.nav .links a:hover,.nav .links a.active{color:var(--terracotta);border-color:var(--terracotta)}
.nav-toggle{display:none;background:none;border:1px solid var(--encre);width:44px;height:40px;
  align-items:center;justify-content:center;cursor:pointer;color:var(--encre)}

/* -------- Sections -------- */
.section{padding:112px 0}
.section.tight{padding:64px 0}
.section.alt{background:var(--ecru)}
.section.dark{background:var(--encre);color:var(--ecru)}
.section.dark h1,.section.dark h2,.section.dark h3{color:var(--blanc)}
.section.dark .encre-2-txt{color:var(--taupe)}
.lead{font-size:1.28rem;max-width:56ch;color:var(--encre-2);font-weight:400;line-height:1.6}
.section.dark .lead{color:var(--ecru);opacity:.86}

/* -------- Filets -------- */
.rule{border:none;border-top:var(--filet);margin:36px 0}
.rule.vif{border-top:1px solid var(--encre)}
.rule.tight{margin:20px 0}

/* -------- Grilles éditoriales -------- */
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:32px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}
.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}

/* -------- Plate (photo légendée façon planche) -------- */
.plate{position:relative;border:var(--filet);background:var(--ecru)}
.plate img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.22) contrast(1.08) brightness(1.02)}
.plate.color img{filter:none}
.plate::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--terracotta)}
.plate-cap{display:flex;justify-content:space-between;gap:12px;margin-top:10px;
  font-family:var(--sans);font-size:.78rem;color:var(--encre-2)}
.plate-cap .no{font-family:var(--serif);color:var(--terracotta);font-weight:600}

/* -------- Sommaire (table des matières / grille de livrables) -------- */
.sommaire{border-top:var(--filet-vif)}
.sommaire a{display:grid;grid-template-columns:56px 1fr 108px 22px;gap:26px;align-items:center;
  padding:26px 6px;border-bottom:var(--filet);text-decoration:none;color:inherit;transition:.18s}
.sommaire a:hover{background:rgba(188,74,46,.06)}
.sommaire a:hover .arrow{transform:translateX(7px)}
.sommaire .no{font-family:var(--serif);font-size:1.55rem;color:var(--terracotta);font-weight:500}
.sommaire .txt b{font-family:var(--serif);font-size:1.5rem;font-weight:500;display:block;margin-bottom:.15em}
.sommaire .txt span{font-family:var(--sans);font-size:.9rem;color:var(--encre-2)}
.sommaire .thumb{width:108px;height:72px;border:var(--filet);overflow:hidden;display:flex;
  align-items:center;justify-content:center;background:var(--blanc)}
.sommaire .thumb img{max-width:80%;max-height:80%;object-fit:contain}
.sommaire .thumb img.cover{width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.2) contrast(1.05)}
.sommaire .arrow{transition:.18s;color:var(--encre);flex:0 0 auto}

/* -------- Nuancier (palette) -------- */
.swatch{border:var(--filet)}
.swatch .chip{height:150px;display:flex;align-items:flex-end;padding:16px}
.swatch .chip span{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.swatch .meta{padding:16px 18px;background:var(--blanc);border-top:var(--filet)}
.swatch .meta .role{font-family:var(--sans);font-weight:600;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--encre-2)}
.swatch .meta .hex{font-family:var(--serif);font-size:1.55rem;color:var(--encre);margin:.1em 0}

/* -------- Table de contrastes -------- */
.ctable{width:100%;border-collapse:collapse}
.ctable th,.ctable td{padding:14px 16px;text-align:left;border-bottom:var(--filet);font-size:.92rem}
.ctable th{font-family:var(--sans);font-weight:600;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--encre-2);border-bottom:1px solid var(--encre)}
.samp{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;font-weight:600;font-size:.88rem}
.badge{display:inline-block;padding:.3em .75em;border:1px solid var(--encre);font-family:var(--sans);
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--encre)}
.badge.large{border-style:dashed;color:var(--encre-2)}

/* -------- Cartes (do/don't, meta) -------- */
.card{border:var(--filet);background:var(--blanc)}
.card.vif{border:1px solid var(--encre)}
.pad{padding:32px}
.dodont-list{list-style:none;margin:0;padding:0}
.dodont-list li{display:flex;gap:16px;padding:18px 0;border-top:var(--filet);align-items:flex-start}
.dodont-list li:first-child{border-top:none}
.dodont-list li svg{flex:0 0 auto;margin-top:3px}

/* -------- Avatars / icône -------- */
.avatars{display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap}
.avatars .box{text-align:center}
.avatars img{width:96px;height:96px;border:var(--filet)}
.avatars .round img{border-radius:50%}

/* -------- Zone de protection -------- */
.clear{position:relative;background:var(--blanc);border:1px dashed var(--terracotta);padding:48px;
  display:flex;justify-content:center}

/* -------- Usages interdits -------- */
.misuse{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
.misuse .m{position:relative;border:var(--filet);height:132px;display:flex;align-items:center;
  justify-content:center;overflow:hidden;background:var(--blanc)}
.misuse .x{position:absolute;top:10px;right:10px;width:26px;height:26px;border:1px solid var(--terracotta);
  color:var(--terracotta);display:flex;align-items:center;justify-content:center;background:var(--blanc)}
.misuse .cap{font-size:.82rem;color:var(--encre-2);margin-top:10px;text-align:center}

/* -------- Footer / colophon -------- */
.foot{background:var(--encre);color:var(--ecru);padding:72px 0 44px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-end;justify-content:space-between}
.foot .signature{font-family:var(--script);font-size:2.3rem;color:var(--terracotta);display:block;margin-bottom:.2em}
.foot .colophon{opacity:.72;font-size:.86rem;max-width:38ch}
.foot .fnav{display:flex;gap:20px;flex-wrap:wrap}
.foot .fnav a{color:var(--ecru);text-decoration:none;font-weight:500;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid transparent;padding-bottom:2px}
.foot .fnav a:hover{border-color:var(--terracotta);color:var(--blanc)}
.foot .rule{border-top:1px solid rgba(233,228,218,.2);margin:44px 0 32px}

/* -------- Utilities -------- */
.tag{font-family:var(--sans);font-weight:600;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--encre-2)}
.tag.on-dark{color:var(--taupe)}

@media(max-width:900px){
  .grid2,.grid3,.grid4{grid-template-columns:1fr}
  .grid12{grid-template-columns:1fr}
  .col-4,.col-5,.col-6,.col-7,.col-8,.col-12{grid-column:span 1}
  .nav .links{display:none;position:absolute;top:82px;left:0;right:0;background:var(--blanc);
    flex-direction:column;gap:6px;padding:20px 28px;border-bottom:var(--filet)}
  .nav .links.open{display:flex}
  .nav-toggle{display:inline-flex}
  .section{padding:64px 0}
  .sommaire a{grid-template-columns:36px 1fr 18px}
  .sommaire .thumb{display:none!important}
}

/* -------- Retour aux 5 propositions -------- */
.backhome{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:42px;height:42px;border:1px solid var(--encre);background:transparent;color:var(--encre);
  border-radius:0;text-decoration:none;transition:.15s}
.backhome:hover{background:var(--encre);color:var(--blanc)}
.foot .footbar{margin-top:30px;padding-top:24px;border-top:1px solid rgba(233,228,218,.24);
  display:flex;justify-content:center}
.footback{display:inline-flex;align-items:center;gap:.6em;text-decoration:none;font-family:var(--sans);
  font-weight:500;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.9em 1.6em;border:1px solid var(--ecru);color:var(--ecru);transition:.15s}
.footback:hover{background:var(--terracotta);border-color:var(--terracotta);color:#fff}

/* Header compact sur petit écran (flèche + marque + burger sans collision) */
@media(max-width:560px){
  .nav .wrap{gap:10px}
  .nav .brand{min-width:0;gap:8px}
  .nav .brand img{height:24px}
  .nav .brand b{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .backhome{width:38px;height:38px}
}