/* ============================================================
   Socle de charte, Atelier Nathalie Desreumaux
   Couleurs relevees sur son logo existant :
     brique #e05d2b, terre #8a4729, taupe #8a8070, encre #2a2a2a.
   Echelle typographique relevee sur les maisons qu'elle travaille
   (Dedar, Lelievre, Casamance) : corps 14 a 16 px, titres 23 a 30 px,
   un seul grand moment, graisse 300 a 500, rayon nul, blanc dominant.
   ============================================================ */

:root{
  /* Sa charte, en OKLCH */
  --brique:      oklch(0.639 0.178 42);
  --brique-fonce:oklch(0.552 0.160 40);
  --terre:       oklch(0.456 0.108 44);
  --terre-fonce: oklch(0.330 0.070 44);
  --taupe:       oklch(0.588 0.018 86);
  --taupe-texte: oklch(0.520 0.020 86);
  --taupe-pale:  oklch(0.795 0.010 86);

  /* Neutres a chroma nul : ni creme, ni sable, ni parchemin */
  --blanc:   oklch(1 0 0);
  --nuage:   oklch(0.974 0 0);
  --brume:   oklch(0.938 0 0);
  --filet:   oklch(0.886 0 0);
  --gris:    oklch(0.522 0 0);
  --encre:   oklch(0.300 0 0);
  --encre-fort: oklch(0.205 0 0);

  /* Echelle typographique */
  --t-micro:  12px;
  --t-petit:  13.5px;
  --t-corps:  15.5px;
  --t-moyen:  17.5px;
  --t-chapeau: clamp(17px, 1.1vw, 19px);
  --t-titre:  clamp(23px, 2.1vw, 30px);
  --t-grand:  clamp(29px, 3.3vw, 44px);
  --t-geant:  clamp(34px, 4.2vw, 56px);

  --marge: clamp(20px, 4vw, 64px);
  --large: 1480px;
  --lisible: 56ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--blanc); color:var(--encre-fort);
  font-size:var(--t-corps); line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{display:block; max-width:100%}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-weight:400; line-height:1.08; letter-spacing:-0.012em}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
figure{margin:0}
.lisible{max-width:var(--lisible)}

.saut{position:absolute; left:-9999px}
.saut:focus{left:var(--marge); top:12px; z-index:120; padding:12px 18px; background:var(--encre-fort); color:var(--blanc)}

.dedans{max-width:var(--large); margin-inline:auto; padding-inline:var(--marge)}
.bande{padding-block:clamp(74px, 5vw + 36px, 128px)}
.bande-serree{padding-block:clamp(48px, 3.4vw + 24px, 84px)}

/* Le lettrage du logo : capitales fines tres espacees.
   Reserve a deux emplois par page, comme sur le logo lui-meme. */
.lettrage{
  font-size:var(--t-micro); font-weight:500; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--terre);
}

/* ---------- Dispositif signature : le filet a points ----------
   Repris tel quel du logo : une ligne fine ponctuee de points de
   couleur alternes. Il separe, il souligne, il rythme. */
.filet-points{
  height:10px; border:0; margin:0; padding:0;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='10' viewBox='0 0 400 10'><line x1='0' y1='5' x2='400' y2='5' stroke='%23dcd8d4' stroke-width='1'/><circle cx='25' cy='5' r='3.2' fill='%238a4729'/><circle cx='75' cy='5' r='3.2' fill='%23e05d2b'/><circle cx='125' cy='5' r='3.2' fill='%238a8070'/><circle cx='175' cy='5' r='3.2' fill='%235c3222'/><circle cx='225' cy='5' r='3.2' fill='%238a8070'/><circle cx='275' cy='5' r='3.2' fill='%23e05d2b'/><circle cx='325' cy='5' r='3.2' fill='%238a4729'/><circle cx='375' cy='5' r='3.2' fill='%238a8070'/></svg>") 0 0/400px 10px repeat-x;
}
.filet-points.court{width:min(100%,250px)}

/* ---------- Liens et boutons : rayon nul, comme chez les editeurs ---------- */
.lien-fleche{
  display:inline-flex; align-items:baseline; gap:9px; text-decoration:none;
  font-size:var(--t-petit); letter-spacing:0.12em; text-transform:uppercase;
  color:var(--encre-fort); padding-bottom:5px; border-bottom:1px solid var(--encre-fort);
  transition:color .25s, border-color .25s;
}
.lien-fleche:hover{color:var(--brique); border-color:var(--brique)}
.bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:0; border:0; cursor:pointer;
  font:inherit; font-size:var(--t-petit); font-weight:500; letter-spacing:0.11em;
  text-transform:uppercase; text-decoration:none;
  background:var(--encre-fort); color:var(--blanc);
  transition:background .3s cubic-bezier(.2,.8,.3,1);
}
.bouton:hover{background:var(--brique)}
.bouton-nu{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:0; text-decoration:none;
  font-size:var(--t-petit); font-weight:500; letter-spacing:0.11em; text-transform:uppercase;
  color:var(--encre-fort); border:1px solid var(--filet);
  transition:border-color .3s, color .3s;
}
.bouton-nu:hover{border-color:var(--encre-fort)}

/* ---------- En-tete commune ---------- */
.barre{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px var(--marge);
  background:color-mix(in oklab, var(--blanc) 93%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--filet);
  transition:transform .4s cubic-bezier(.2,.8,.3,1);
}
.barre.cachee{transform:translateY(-101%)}
.barre .marque{display:flex; align-items:center; gap:13px; text-decoration:none; min-width:0}
.barre .marque img{height:34px; width:auto; flex:0 0 auto}
.barre .marque .nom{display:block; font-size:var(--t-petit); letter-spacing:0.17em;
  text-transform:uppercase; color:var(--encre-fort); line-height:1.25; white-space:nowrap}
.barre .marque .quoi{display:block; font-size:10.5px; letter-spacing:0.19em;
  text-transform:uppercase; color:var(--taupe-texte); line-height:1.3; white-space:nowrap}
@media(max-width:560px){ .barre .marque .nom{font-size:11.5px; letter-spacing:0.12em} .barre .marque .quoi{display:none} }
.barre nav{display:flex; gap:26px}
.barre nav a{
  text-decoration:none; color:var(--encre); font-size:var(--t-corps);
  padding-block:4px;
  border-bottom:1px solid transparent; transition:color .25s, border-color .25s;
}
.barre nav a:hover{color:var(--brique); border-color:var(--brique)}
.barre .bouton{padding:11px 20px}
@media(max-width:1000px){ .barre nav{display:none} .barre .marque img{height:30px} }
/* sous 760 px la barre d appel fixe est en bas : le bouton de l en-tete ferait doublon */
@media(max-width:760px){ .barre .bouton{display:none} .barre{justify-content:flex-start} }

/* ---------- Pied commun ---------- */
.pied{border-top:1px solid var(--filet); padding-block:clamp(44px,4vw,72px) 34px}
.pied-grille{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,3fr); gap:clamp(24px,3vw,56px)}
@media(max-width:820px){ .pied-grille{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .pied-grille{grid-template-columns:1fr} }
.pied img{height:56px; width:auto; margin-bottom:16px}
.pied h3{font-size:var(--t-micro); letter-spacing:0.18em; text-transform:uppercase; color:var(--gris); margin-bottom:14px}
.pied a{text-decoration:none; color:var(--encre); font-size:var(--t-corps)}
.pied a:hover{color:var(--brique)}
.pied li{margin-bottom:7px}
.pied .bas{margin-top:clamp(32px,3vw,52px); padding-top:22px; border-top:1px solid var(--filet);
  display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between;
  font-size:var(--t-petit); color:var(--gris)}

/* ---------- Appel sur mobile ---------- */
.appel{display:none}
@media(max-width:760px){
  .appel{display:flex; position:fixed; inset:auto 0 0 0; z-index:110; gap:1px;
    padding:0; background:var(--filet); border-top:1px solid var(--filet)}
  .appel > *{flex:1; padding:15px 10px; font-size:var(--t-petit)}
  .appel .bouton-nu{background:var(--blanc); border:0}
  body{padding-bottom:58px}
}

/* ---------- Formulaire ---------- */
.champ{display:block; margin-bottom:18px}
.champ span{display:block; font-size:var(--t-petit); color:var(--gris); margin-bottom:8px;
  letter-spacing:0.06em}
.champ input,.champ textarea{
  width:100%; padding:14px 0; font:inherit; font-size:16px; color:var(--encre-fort);
  background:transparent; border:0; border-bottom:1px solid var(--filet); border-radius:0;
  transition:border-color .3s;
}
.champ textarea{min-height:104px; resize:vertical}
.champ input:focus,.champ textarea:focus{outline:none; border-bottom-color:var(--brique)}
.champ input::placeholder,.champ textarea::placeholder{color:var(--gris)}

/* ---------- Revelations, enrichissement seulement ---------- */
.js .leve{opacity:0; transform:translateY(18px)}
.js .leve.vu{opacity:1; transform:none;
  transition:opacity .76s cubic-bezier(.2,.8,.3,1), transform .76s cubic-bezier(.2,.8,.3,1)}
.js .retard-1.vu{transition-delay:.09s}
.js .retard-2.vu{transition-delay:.18s}
.js .retard-3.vu{transition-delay:.27s}
.js .voile{clip-path:inset(0 0 100% 0)}
.js .voile.vu{clip-path:inset(0 0 0 0); transition:clip-path 1.05s cubic-bezier(.2,.8,.3,1)}
@media(prefers-reduced-motion:reduce){
  .js .leve,.js .leve.vu,.js .voile,.js .voile.vu{opacity:1; transform:none; clip-path:none; transition:none}
  .barre{transition:none}
}