/* ============================================================
   Atelier Nathalie Desreumaux, page d'accueil
   Registre : celui des maisons qu'elle travaille (Dedar, Lelievre,
   Casamance). Typographie discrete, blanc dominant, rayon nul.
   Mais la couleur vient de SES tissus, et elle prend de la place :
   aplats pleine largeur, mosaique asymetrique, debords de cadre.
   ============================================================ */

body{font-family:"General Sans","Segoe UI",system-ui,sans-serif}
h1,h2,h3,h4{font-family:"General Sans","Segoe UI",system-ui,sans-serif; font-weight:300}
.serif{font-family:"Zodiak",Georgia,serif}

/* ---------- Teintes relevees sur ses propres tissus ----------
   Elles servent d'aplats pleine largeur, comme chez les editeurs. */
:root{
  --koi:     oklch(0.455 0.085 236);
  --jungle:  oklch(0.430 0.070 163);
  --velours: oklch(0.270 0.055 264);
  --fuchsia: oklch(0.450 0.145 350);
  --canard:  oklch(0.470 0.070 215);
}

/* ---------- Hero ---------- */
.hero{padding-top:clamp(92px,8vw,124px)}
.hero-titre{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,3vw,64px); align-items:end; padding-bottom:clamp(30px,3vw,46px)}
@media(max-width:900px){ .hero-titre{grid-template-columns:1fr; align-items:start} }
.hero h1{font-size:var(--t-grand); font-weight:300; letter-spacing:-0.022em; max-width:17ch}
.hero h1 .ton{color:var(--brique)}
.hero .accroche{font-size:var(--t-chapeau); color:var(--encre); line-height:1.6; max-width:46ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.hero-image{position:relative; width:100%; aspect-ratio:1600/647; overflow:hidden; background:var(--brume)}
.hero-image img{width:100%; height:100%; object-fit:cover; object-position:center 44%}
@media(max-width:760px){ .hero-image{aspect-ratio:4/3} }
.hero-legende{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 28px;
  padding-top:14px; font-size:var(--t-petit); color:var(--gris)}

/* ---------- Mosaique : des tailles tres differentes ----------
   Quatre colonnes, des pieces qui en prennent une, deux ou trois.
   C'est l'irregularite qui donne le relief, pas l'ombre portee. */
.mosaique{display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.5vw,24px); margin-top:clamp(32px,3vw,50px)}
@media(max-width:1080px){ .mosaique{grid-template-columns:repeat(3,1fr)} }
@media(max-width:720px){ .mosaique{grid-template-columns:repeat(2,1fr)} }
.piece{min-width:0; position:relative}
.piece .cadre{position:relative; overflow:hidden; background:var(--brume); aspect-ratio:2/3}
.piece .cadre img,.piece .cadre video{width:100%; height:100%; object-fit:cover; object-position:center 46%;
  transition:transform 1.2s cubic-bezier(.2,.8,.3,1)}
.piece:hover .cadre img{transform:scale(1.04)}
.piece .nom{display:block; margin-top:12px; font-size:var(--t-corps); color:var(--encre-fort)}
.piece .tissu{display:block; margin-top:3px; font-size:var(--t-petit); color:var(--gris)}
.piece .maison{display:block; margin-top:3px; font-size:var(--t-micro); letter-spacing:0.1em;
  text-transform:uppercase; color:var(--terre)}
.piece.l2{grid-column:span 2}
.piece.l2 .cadre{aspect-ratio:4/3}
.piece.l3{grid-column:span 3}
.piece.l3 .cadre{aspect-ratio:16/9}
.piece.haute .cadre{aspect-ratio:1/2}
.piece.carree .cadre{aspect-ratio:1/1}
@media(max-width:720px){
  .piece.l3{grid-column:span 2}
  .piece.l3 .cadre{aspect-ratio:3/2}
  .piece.haute .cadre{aspect-ratio:2/3}
}

/* ---------- Aplats de couleur pleine largeur ---------- */
.aplat{background:var(--fond-aplat,var(--brique)); color:var(--sur-aplat,var(--encre-fort)); position:relative}
.aplat .dedans{position:relative; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,3vw,64px); align-items:center}
@media(max-width:860px){ .aplat .dedans{grid-template-columns:1fr} }
.aplat .mot{font-family:"Zodiak",Georgia,serif; font-weight:400;
  font-size:var(--t-geant); line-height:1.12; letter-spacing:-0.018em; margin:0}
.aplat .dit{font-size:var(--t-corps); line-height:1.62; margin:0}
.aplat .qui{display:block; margin-top:14px; font-size:var(--t-petit)}
.aplat.sombre{--sur-aplat:var(--blanc)}
.aplat.sombre .lettrage{color:oklch(0.890 0.040 42)}
.aplat.sombre .qui{color:oklch(0.880 0.012 250)}
.aplat.sombre .dit{color:oklch(0.955 0.006 250)}

/* ---------- Photo bord a bord, hors du conteneur ---------- */
.pleine{position:relative; width:100%; overflow:hidden; background:var(--brume)}
.pleine img{width:100%; height:100%; object-fit:cover}
.pleine.paysage{aspect-ratio:21/8}
@media(max-width:860px){ .pleine.paysage{aspect-ratio:3/2} }
.pleine-legende{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 28px;
  padding-top:13px; font-size:var(--t-petit); color:var(--gris)}

/* ---------- Duo texte et image ---------- */
.duo{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(26px,3.4vw,72px); align-items:center}
.duo.inverse{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media(max-width:900px){ .duo,.duo.inverse{grid-template-columns:1fr} }
.duo h2,.titre-section{font-size:var(--t-titre); font-weight:300; letter-spacing:-0.016em}
.duo p{margin-top:16px; color:var(--encre)}
.duo .media{width:100%}
.duo .media img,.duo .media video{width:100%; height:auto}
.duo .media figcaption{margin-top:12px; font-size:var(--t-petit); color:var(--gris)}

/* l'image qui chevauche la bande de couleur au-dessus */
.chevauche{margin-top:clamp(-100px,-7vw,-56px); position:relative; z-index:3}

.fiche{margin-top:clamp(26px,3vw,40px); border-top:1px solid var(--filet)}
.fiche div{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:18px;
  padding-block:13px; border-bottom:1px solid var(--filet)}
.fiche dt{font-size:var(--t-petit); color:var(--gris)}
.fiche dd{margin:0; font-size:var(--t-corps); color:var(--encre)}
@media(max-width:560px){ .fiche div{grid-template-columns:1fr; gap:2px} }

/* ---------- Le savoir-faire, en trois temps ---------- */
.temps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,34px); margin-top:clamp(32px,3vw,50px)}
@media(max-width:860px){ .temps{grid-template-columns:1fr; max-width:420px} }
.temps .cadre{aspect-ratio:3/4; overflow:hidden; background:var(--brume)}
.temps .cadre img,.temps .cadre video{width:100%; height:100%; object-fit:cover}
.temps h3{margin-top:16px; font-size:var(--t-moyen); font-weight:400}
.temps p{margin-top:8px; font-size:var(--t-corps); color:var(--encre)}
.temps .rang{font-size:var(--t-micro); letter-spacing:0.16em; color:var(--terre); display:block; margin-bottom:6px}

/* ---------- Prestations ---------- */
.offres{margin-top:clamp(30px,3vw,46px); border-top:1px solid var(--filet)}
.offre{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,7fr) auto; gap:clamp(14px,2vw,40px);
  align-items:baseline; padding-block:22px; border-bottom:1px solid var(--filet)}
@media(max-width:800px){ .offre{grid-template-columns:1fr; gap:6px} }
.offre h3{font-size:var(--t-moyen); font-weight:400}
.offre p{font-size:var(--t-corps); color:var(--encre)}
.offre .note{font-size:var(--t-petit); color:var(--terre); white-space:nowrap}

/* ---------- Les cours ---------- */
.etapes{margin-top:clamp(26px,3vw,40px)}
.etapes li{display:grid; grid-template-columns:40px 1fr; gap:16px; padding-block:17px;
  border-top:1px solid var(--filet); color:var(--encre)}
.etapes li:last-child{border-bottom:1px solid var(--filet)}
.etapes .n{font-size:var(--t-petit); color:var(--terre); letter-spacing:0.08em}
.etapes strong{display:block; font-weight:500; color:var(--encre-fort); font-size:var(--t-moyen); margin-bottom:3px}

/* ---------- Les maisons ---------- */
.maisons{display:flex; flex-wrap:wrap; gap:0; margin-top:clamp(26px,3vw,42px);
  border-top:1px solid var(--filet); border-left:1px solid var(--filet)}
.maisons li{flex:1 1 178px; padding:15px 18px; border-right:1px solid var(--filet);
  border-bottom:1px solid var(--filet); font-size:var(--t-corps); color:var(--encre)}

/* ---------- Le monogramme en signature ----------
   Grand, pale, pose dans l'angle d'une section. Il signe la page
   sans jamais concurrencer une photo. */
.signe{position:relative; overflow:hidden}
.signe::before{
  content:""; position:absolute; right:-3%; top:50%;
  width:min(32vw,400px); aspect-ratio:240/174; transform:translateY(-50%);
  background:url("assets/marque/monogramme.png?v=056582fdad") center/contain no-repeat;
  opacity:.06; pointer-events:none;
}
@media(max-width:900px){ .signe::before{width:60vw; opacity:.045} }
.signe > *{position:relative; z-index:2}

/* ---------- Contact ---------- */
.contact-grille{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(30px,4vw,76px)}
@media(max-width:880px){ .contact-grille{grid-template-columns:1fr} }
.coord{margin-top:26px}
.coord a,.coord p{display:grid; grid-template-columns:106px 1fr; gap:16px; align-items:baseline;
  padding-block:13px; border-bottom:1px solid var(--filet); text-decoration:none; color:var(--encre-fort)}
.coord a:hover{color:var(--brique)}
.coord .quoi{font-size:var(--t-petit); color:var(--gris)}
@media(max-width:480px){ .coord a,.coord p{grid-template-columns:1fr; gap:2px} }

/* ---------- Parallaxe douce sur les images bord a bord ----------
   8 % de course au maximum, pilotee par le script. */
.js .glisse img{will-change:transform}
@media(prefers-reduced-motion:reduce){ .js .glisse img{transform:none !important} }

/* ---------- La bande sombre : tout ce qui s'y pose s'eclaircit ---------- */
.aplat.sombre .titre-section,
.aplat.sombre h2,
.aplat.sombre h3{color:var(--blanc)}
.aplat.sombre .duo p,
.aplat.sombre p{color:oklch(0.930 0.008 264)}
.aplat.sombre .maisons{border-color:oklch(0.420 0.038 264)}
.aplat.sombre .maisons li{border-color:oklch(0.420 0.038 264); color:oklch(0.950 0.006 264)}
.aplat.sombre .apres-maisons{margin-top:18px; font-size:var(--t-petit); color:oklch(0.845 0.012 264)}
.aplat.sombre .media figcaption{color:oklch(0.845 0.012 264)}

/* Une bande de couleur qui porte une section entiere, et non une
   citation en deux colonnes : son conteneur redevient un bloc normal. */
.aplat.bloc .dedans{display:block}
.aplat.bloc .duo{align-items:start}
.aplat.bloc .lettrage{margin-bottom:0}

/* ---------- Hero : la photo arrive avant le titre ----------
   Le premier regard doit tomber sur l'atelier, pas sur du texte.
   La photo fait 1600 x 647 : a 1512 px de large elle occupe 612 px
   de haut, donc elle tient entiere dans le premier ecran. */
.hero{padding-top:clamp(62px,5vw,74px)}
.hero .hero-legende{padding-top:14px; padding-bottom:clamp(36px,4vw,64px);
  border-bottom:1px solid var(--filet)}
.hero .hero-titre{padding-top:clamp(34px,3.4vw,56px); padding-bottom:0; align-items:start}

/* ---------- Le savoir-faire, en composition asymetrique ----------
   Trois images de tailles franchement differentes et un bloc de texte,
   plutot que trois colonnes egales qui se repondent. */
.atelier-trois{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(18px,2vw,34px) clamp(16px,1.8vw,30px);
  align-items:start; margin-bottom:clamp(40px,4vw,68px);
}
.atelier-trois figure{margin:0; min-width:0}
.atelier-trois .cadre{overflow:hidden; background:var(--brume)}
.atelier-trois .cadre img{width:100%; height:100%; object-fit:cover}
.atelier-trois figcaption{margin-top:12px; font-size:var(--t-petit); color:var(--gris)}
.at-grande{grid-column:1 / span 5; grid-row:1 / span 2}
.at-grande .cadre{aspect-ratio:2/3}
.at-texte{grid-column:7 / span 6; grid-row:1}
.at-texte h2{margin-bottom:16px}
.at-texte p + p{margin-top:14px}
.at-texte p{color:var(--encre)}
.at-sangles{grid-column:7 / span 3; grid-row:2}
.at-sangles .cadre{aspect-ratio:3/4}
.at-finition{grid-column:10 / span 3; grid-row:2}
.at-finition .cadre{aspect-ratio:3/4}
@media(max-width:980px){
  .atelier-trois{grid-template-columns:repeat(6,1fr)}
  .at-texte{grid-column:1 / span 6; grid-row:1}
  .at-grande{grid-column:1 / span 3; grid-row:2}
  .at-sangles{grid-column:4 / span 3; grid-row:2}
  .at-finition{grid-column:1 / span 6; grid-row:3}
  .at-finition .cadre{aspect-ratio:16/9}
}
@media(max-width:620px){
  .atelier-trois{grid-template-columns:1fr}
  .at-grande,.at-texte,.at-sangles,.at-finition{grid-column:1; grid-row:auto}
  .at-grande .cadre,.at-sangles .cadre{aspect-ratio:3/4}
}

/* ---------- La derniere case renvoie vers Instagram ----------
   Une piece sort presque chaque semaine : le site en montre quinze,
   le compte les montre toutes. */
.piece.renvoi{display:flex}
.piece.renvoi a{
  display:flex; flex-direction:column; justify-content:space-between;
  width:100%; aspect-ratio:2/3; padding:22px 20px 20px;
  background:var(--terre); color:var(--blanc); text-decoration:none;
  transition:background .3s cubic-bezier(.2,.8,.3,1);
}
.piece.renvoi a:hover{background:var(--brique)}
.renvoi-titre{font-size:var(--t-titre); font-weight:300; line-height:1.1; letter-spacing:-0.016em}
.renvoi-dit{margin-top:14px; font-size:var(--t-petit); line-height:1.5; color:oklch(0.955 0.012 44)}
.renvoi-lien{margin-top:auto; padding-top:18px; font-size:var(--t-micro);
  letter-spacing:0.12em; text-transform:uppercase; border-top:1px solid oklch(0.62 0.07 44);
  overflow-wrap:anywhere}
@media(max-width:720px){
  .piece.renvoi a{padding:18px 15px 16px}
  .renvoi-lien{font-size:10.5px; letter-spacing:0.06em}
}