/* Cabinet Martin & Associés — feuille unique. Contrat : ../SYSTEME.md */

:root{
  --papier:#F3EEE4; --surface:#EAE3D5; --encre:#211C16; --doux:#5B5145;
  --accent:#1B4A5A; --verso-doux:#A2957F;
  --trait:rgba(33,28,22,.20); --trait-verso:rgba(243,238,228,.24);

  --t1:clamp(2.55rem,1.30rem + 5.20vw,6.20rem);
  --t2:clamp(1.95rem,1.32rem + 2.60vw,3.60rem);
  --t3:clamp(1.42rem,1.16rem + 1.10vw,2.10rem);
  --t4:clamp(1.14rem,1.05rem + 0.42vw,1.42rem);
  --t5:clamp(1.00rem,0.965rem + 0.16vw,1.10rem);
  --t6:clamp(0.80rem,0.775rem + 0.11vw,0.875rem);

  --e1:.40rem; --e2:.75rem; --e3:1.25rem; --e4:2rem;
  --e5:3.25rem; --e6:5.25rem; --e7:8.50rem;

  --gouttiere:clamp(1.25rem,5vw,6.5rem);
  --marge-g:max(clamp(1.25rem,5vw,6.5rem),7.25rem);
  --utile:1400px;
}

*{margin:0;padding:0;box-sizing:border-box}
img{display:block;max-width:100%;height:auto}

html{-webkit-text-size-adjust:100%}
body{
  background:var(--papier); color:var(--encre);
  font-family:"Chivo",sans-serif; font-weight:300; font-size:var(--t5); line-height:1.62;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:"Fraunces",serif; font-weight:400; line-height:1.06;
  font-variation-settings:"SOFT" 0,"WONK" 0; letter-spacing:-.015em;
}
h1{font-size:var(--t2)}
h2{font-size:var(--t2)}
h3{font-size:var(--t3)}
p{max-width:63ch}
strong{font-weight:600}

h1 + p,h2 + p,h2 + ul,h3 + p{margin-top:var(--e3)}
p + p{margin-top:var(--e3)}
p + h3,ul + h3,p + h2{margin-top:var(--e5)}

a{color:inherit}
.lien-sobre{text-decoration:none;border-bottom:1px solid var(--trait);padding-bottom:2px}
.lien-sobre:hover{border-bottom-color:var(--encre)}

.evitement{
  position:absolute;left:-9999px;top:0;z-index:60;background:var(--encre);color:var(--papier);
  padding-block:var(--e2);padding-inline:var(--e3);text-decoration:none;font-size:var(--t6);
}
.evitement:focus{left:0}

/* ---------- accent : trois classes, une occurrence chacune par page ---------- */
.accent-trait{
  display:block;width:2px;height:var(--e5);background:var(--accent);
  margin-bottom:var(--e3);
}
.accent-cle{color:var(--accent);font-weight:600}
.accent-lien{
  display:inline-block;text-decoration:none;color:var(--papier);background:var(--accent);
  padding-block:var(--e2);padding-inline:var(--e4);
  font-size:var(--t6);letter-spacing:.14em;text-transform:uppercase;font-weight:600;
}
.accent-lien:hover{background:var(--encre)}

/* ---------- en-tête ---------- */
.entete{
  position:relative;z-index:20;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--e3);
  padding-block:var(--e4) var(--e3);
  padding-inline:var(--marge-g) var(--gouttiere);
  border-bottom:1px solid var(--trait);
}
.marque{
  font-family:"Fraunces",serif;font-size:var(--t3);text-decoration:none;line-height:1.05;
  display:block;
}
.marque-x{font-weight:400;font-style:italic}
.marque-s{
  display:block;font-family:"Chivo",sans-serif;font-size:var(--t6);color:var(--doux);
  letter-spacing:.14em;text-transform:uppercase;margin-top:var(--e1);font-weight:400;
}
.nav{display:flex;flex-wrap:wrap;gap:var(--e4)}
.nav a{
  text-decoration:none;font-size:var(--t6);letter-spacing:.1em;text-transform:uppercase;
  color:var(--doux);padding-bottom:var(--e1);border-bottom:1px solid transparent;
}
.nav a:hover{color:var(--encre);border-bottom-color:var(--trait)}
.nav .nav-ici{color:var(--encre);border-bottom-color:var(--encre)}

/* ---------- dispositif : la contre-lecture ---------- */
.cachet{
  position:fixed;top:var(--e4);left:var(--e3);z-index:40;
  width:74px;height:74px;border-radius:50%;
  border:1px solid var(--accent);
  background:var(--papier);color:var(--encre);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transform:rotate(calc(var(--cran,0) * 24deg));
  transition:transform .5s ease,background .5s ease,color .5s ease,border-color .5s ease;
  pointer-events:none;
}
.cachet::before{
  content:"";position:absolute;inset:5px;border-radius:50%;
  border:1px dashed var(--trait);
}
.cachet-i{font-family:"Fraunces",serif;font-size:var(--t3);line-height:1}
.cachet-c{
  font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--doux);
  margin-top:2px;
}
.cachet.cachet--verso{background:var(--encre);color:var(--papier);border-color:var(--papier)}
.cachet.cachet--verso::before{border-color:var(--trait-verso)}
.cachet.cachet--verso .cachet-c{color:var(--verso-doux)}

/* ---------- sections et grille ---------- */
.pan{
  position:relative;
  padding-block:var(--e6);
  padding-inline:var(--marge-g) var(--gouttiere);
  transition:background .55s ease,color .55s ease;
}
.pan-plein{padding-block:0;padding-inline:0}
.pan.verso{background:var(--encre);color:var(--papier)}
.pan.verso .marque-s,.pan.verso .cachet-c{color:var(--verso-doux)}
.pan.verso .etiquette{color:var(--verso-doux);border-top-color:var(--trait-verso)}
.pan.verso .chapeau,.pan.verso .note,.pan.verso .vis-legende{color:var(--verso-doux)}
.pan.verso .bloc,.pan.verso .fiche,.pan.verso .etape,.pan.verso .tarif-l,.pan.verso .liste li{
  border-color:var(--trait-verso);
}
.pan.verso .exergue{border-left-color:var(--verso-doux)}
.pan.verso .lien-sobre{border-bottom-color:var(--trait-verso)}
.pan.verso .lien-sobre:hover{border-bottom-color:var(--papier)}
.pan.verso .fiche-n,.pan.verso .etape-n{color:var(--verso-doux)}
.pan.verso .champ input,.pan.verso .champ textarea,.pan.verso .champ select{
  background:transparent;color:var(--papier);border-color:var(--trait-verso);
}
.pan.verso .accent-lien{background:var(--papier);color:var(--encre)}
.pan.verso .accent-lien:hover{background:var(--verso-doux)}
.pan.verso .accent-cle{color:var(--verso-doux)}
.pan.verso .accent-trait{background:var(--papier)}

.grille{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--e4);
  max-width:var(--utile);margin-inline:auto;
}

.etiquette{
  display:block;font-size:var(--t6);letter-spacing:.14em;text-transform:uppercase;
  color:var(--doux);font-weight:600;
  border-top:1px solid var(--trait);padding-top:var(--e2);margin-bottom:var(--e4);
}
.chapeau{font-size:var(--t4);color:var(--doux);line-height:1.5;max-width:56ch}
.exergue{
  font-family:"Fraunces",serif;font-size:var(--t3);line-height:1.28;max-width:34ch;
  border-left:1px solid var(--doux);padding-left:var(--e3);
}
.note{font-size:var(--t6);color:var(--doux);line-height:1.5;max-width:70ch}

.bloc{grid-column:1 / 8}
.bloc-large{grid-column:1 / 10}
.bloc-etroit{grid-column:9 / 13}
.colonne-a{grid-column:1 / 6}
.colonne-b{grid-column:6 / 10}
.colonne-c{grid-column:10 / 13}

/* ---------- hero plein cadre ---------- */
.pan-plein .vis{position:relative;height:min(86svh,780px);overflow:hidden}
.pan-plein .vis > img{width:100%;height:100%;object-fit:cover}
.pan-plein .grille{
  padding-block:var(--e6);padding-inline:var(--marge-g) var(--gouttiere);max-width:none;
}
.pan-plein h1{font-size:var(--t1);grid-column:1 / 9}
.pan-plein .chapeau{grid-column:9 / 13;align-self:end}

/* ---------- fiches (jamais trois colonnes égales) ---------- */
.fiche{border-top:1px solid var(--trait);padding-top:var(--e3)}
.fiche:nth-of-type(3n+1){grid-column:1 / 6}
.fiche:nth-of-type(3n+2){grid-column:6 / 10}
.fiche:nth-of-type(3n+3){grid-column:10 / 13}
.fiche-n{
  display:block;font-family:"Fraunces",serif;font-size:var(--t4);color:var(--doux);
  margin-bottom:var(--e2);
}
.fiche p{max-width:46ch;margin-top:var(--e3)}

.liste{list-style:none}
.liste li{border-bottom:1px solid var(--trait);padding-block:var(--e3);max-width:70ch}
.liste li:first-child{border-top:1px solid var(--trait)}
.liste-serree{list-style:none}
.liste-serree li{padding-block:var(--e1);max-width:63ch;padding-left:var(--e3);position:relative}
.liste-serree li::before{content:"—";position:absolute;left:0;color:var(--doux)}

/* ---------- étapes ---------- */
.etape{border-top:1px solid var(--trait);padding-top:var(--e3);padding-bottom:var(--e4)}
.etape:nth-of-type(odd){grid-column:1 / 8}
.etape:nth-of-type(even){grid-column:6 / 13}
.etape-n{
  display:block;font-size:var(--t6);letter-spacing:.18em;text-transform:uppercase;
  color:var(--doux);margin-bottom:var(--e2);
}

/* ---------- tarifs ---------- */
.tarifs{grid-column:1 / 9;margin-top:var(--e4)}
.tarif-l{
  display:flex;flex-wrap:wrap;gap:var(--e3);justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--trait);padding-block:var(--e3);
}
.tarif-l:first-child{border-top:1px solid var(--trait)}
.tarif-l span:last-child{font-family:"Fraunces",serif;font-size:var(--t4);white-space:nowrap}

/* ---------- visuels ---------- */
.vis{overflow:hidden}
.vis > img{
  width:100%;
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.1s cubic-bezier(.2,.7,.2,1),transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.vis-legende{
  display:block;font-size:var(--t6);color:var(--doux);margin-top:var(--e2);max-width:44ch;
}

/* ---------- formulaire (sans traitement) ---------- */
.champ{display:block;margin-bottom:var(--e3)}
.champ span{
  display:block;font-size:var(--t6);letter-spacing:.12em;text-transform:uppercase;
  color:var(--doux);margin-bottom:var(--e1);
}
.champ input,.champ textarea,.champ select{
  width:100%;background:transparent;color:inherit;
  border:1px solid var(--trait);border-radius:0;
  font-family:"Chivo",sans-serif;font-size:var(--t5);font-weight:300;
  padding-block:var(--e2);padding-inline:var(--e2);
}
.champ textarea{min-height:8rem;resize:vertical}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:1px solid var(--accent)}

/* ---------- pied ---------- */
.pied{
  padding-block:var(--e6) var(--e4);
  padding-inline:var(--marge-g) var(--gouttiere);
  border-top:1px solid var(--trait);
}
.pied-b{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--e4);
  max-width:var(--utile);margin-inline:auto;
}
.pied-col:nth-of-type(1){grid-column:1 / 6}
.pied-col:nth-of-type(2){grid-column:6 / 9}
.pied-col:nth-of-type(3){grid-column:9 / 13}
.pied-col p{font-size:var(--t6);color:var(--doux);line-height:1.6}
.mention{
  max-width:var(--utile);margin-inline:auto;margin-top:var(--e5);
  padding-top:var(--e3);border-top:1px solid var(--trait);
  font-size:var(--t6);color:var(--doux);
}

/* ---------- révélations ---------- */
.js .leve{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.js .leve.leve-ouvert{opacity:1;transform:none}
.js .leve .vis > img{clip-path:inset(0 0 100% 0);transform:scale(1.06)}
.js .leve.leve-ouvert .vis > img{clip-path:inset(0 0 0 0);transform:none}

/* ---------- 860px : 6 colonnes, sélecteurs composés répétés à l'identique ---------- */
@media (max-width:860px){
  :root{--marge-g:calc(clamp(1.25rem,5vw,6.5rem) + 3.75rem)}
  .entete{align-items:flex-start;flex-direction:column}
  .nav{gap:var(--e3)}
  .cachet{width:56px;height:56px;top:var(--e2);left:var(--e2)}
  .cachet-i{font-size:var(--t4)}
  .cachet-c{font-size:.48rem}
  .pan{padding-block:var(--e5)}
  .grille,.pied-b{grid-template-columns:repeat(6,1fr);gap:var(--e3)}
  .bloc,.bloc-large,.bloc-etroit,.colonne-a,.colonne-b,.colonne-c,.tarifs{grid-column:1 / 7}
  .pan-plein h1{grid-column:1 / 7}
  .pan-plein .chapeau{grid-column:1 / 7}
  .pan-plein .vis{height:min(72svh,540px)}
  .fiche:nth-of-type(3n+1){grid-column:1 / 7}
  .fiche:nth-of-type(3n+2){grid-column:1 / 7}
  .fiche:nth-of-type(3n+3){grid-column:1 / 7}
  .etape:nth-of-type(odd){grid-column:1 / 7}
  .etape:nth-of-type(even){grid-column:1 / 7}
  .pied-col:nth-of-type(1){grid-column:1 / 7}
  .pied-col:nth-of-type(2){grid-column:1 / 7}
  .pied-col:nth-of-type(3){grid-column:1 / 7}
}

@media (prefers-reduced-motion:reduce){
  .cachet,.pan,.js .leve,.vis > img{transition:none}
  .js .leve{opacity:1;transform:none}
  .js .leve .vis > img{clip-path:inset(0 0 0 0);transform:none}
}