/* ICP-IA — feuille de style unique. Or et blanc. 10/08/2026, revision typographique.
   Sert les 5 pages. Aucun style en ligne : la CSP interdit style-src inline. */

:root{
  --paper:#FFFFFF;
  --paper-warm:#FBF7EE;
  --ink:#1B1A16;
  --ink2:#3D3A32;
  --ink3:#6B665A;
  --gold:#C9A84C;
  --gold-ink:#8C6F1D;
  --gold-pale:#F2E9D2;
  --rule:#E7DFC9;
  --serif:Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* echelle typographique — six paliers, ecarts francs, pas d'ajustement au cas par cas */
  --fs-label:.7rem;      /* 11px — eyebrows, micro-labels en capitales */
  --fs-caption:.875rem;  /* 14px — meta, dates, mentions fines */
  --fs-sec:1rem;         /* 16px — texte secondaire (pourquoi/vous recevez/systeme) */
  --fs-body:1.125rem;    /* 18px — corps de texte courant */
  --fs-lede:1.3125rem;   /* 21px — chapeaux, intros, citations d'objection */
  --fs-h3:1.375rem;      /* 22px — sous-titres de carte/colonne */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:1060px;margin:0 auto;padding:0 28px}
.wrap.narrow{max-width:760px}

/* lien d'evitement — visible seulement au clavier */
.skip{
  position:absolute;left:-9999px;top:0;z-index:50;
  background:var(--ink);color:var(--paper);
  padding:11px 18px;text-decoration:none;font-weight:600;
}
.skip:focus{left:0}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}

/* ---------------------------------------------------------------- en-tete */
header.site{
  position:sticky;top:0;z-index:20;
  background:var(--paper);border-bottom:1px solid var(--rule);
}
header.site .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-top:13px;padding-bottom:13px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:40px;height:40px;border-radius:9px}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{font-family:var(--serif);font-weight:700;font-size:1.16rem;color:var(--ink)}
.brand-sub{
  font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink3);font-weight:600;
}
nav.main{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
nav.main a{color:var(--ink2);text-decoration:none;font-size:.9375rem;font-weight:500}
nav.main a:hover{color:var(--gold-ink)}
nav.main a.on{color:var(--ink);font-weight:650;box-shadow:inset 0 -2px 0 var(--gold)}
nav.main a.mail{
  border:1px solid var(--gold);padding:9px 16px;border-radius:6px;
  color:var(--ink);font-weight:600;font-size:.9rem;white-space:nowrap;
}
nav.main a.mail:hover{background:var(--gold-pale);color:var(--ink)}

/* ------------------------------------------------------------ typographie */
/* h1 générique — titres de page (Offres, Repères, légales). Le hero de
   l'accueil est plus grand : voir .hero h1 plus bas, c'est la seule pièce
   qui doit dominer tout le site. */
h1{
  font-family:var(--serif);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(1.85rem,2.8vw + .9rem,2.85rem);
  line-height:1.14;margin:0 0 20px;text-wrap:balance;
}
/* h2 — nettement en retrait de h1 : plus petit, plus léger, encre adoucie.
   C'est ce triple écart (taille + graisse + couleur) qui évite l'effet
   "même niveau" quand h1 et h2 se suivent de près, y compris pour les
   points numérotés de Repères qui réutilisent ce même h2. */
h2{
  font-family:var(--serif);font-weight:650;letter-spacing:-.008em;
  font-size:clamp(1.5rem,1.5vw + 1rem,2.0625rem);
  line-height:1.26;color:var(--ink2);margin:46px 0 12px;text-wrap:balance;
}
h3{
  font-family:var(--serif);font-weight:700;font-size:var(--fs-h3);
  line-height:1.3;margin:28px 0 8px;
}
h4{
  font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-ink);font-weight:700;margin:26px 0 10px;
}
p{margin:0 0 14px;text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
.eyebrow,.small,.mini,.date-note,.date-label,.brand-sub,.offer-num,.art,.q{text-align:left;hyphens:none}
strong,b{font-weight:650}
em{font-style:italic}
.lead,.lede{font-size:var(--fs-lede);color:var(--ink2);max-width:52ch;line-height:1.5}
.small{font-size:var(--fs-caption);color:var(--ink3);margin-top:22px}
.eyebrow{
  font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ink);font-weight:700;margin:0 0 14px;
}

/* ---------------------------------------------------------------- sections */
section.hero{padding:72px 0 44px}
.hero h1{
  font-size:clamp(2.75rem,4.6vw + 1rem,4.5rem);
  line-height:1.08;letter-spacing:-.02em;
}
.page-head{padding:58px 0 36px;border-bottom:1px solid var(--rule)}
.band{padding:56px 0}
.band.grey{
  background:var(--paper-warm);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.band h2:first-child,.band .wrap > h2:first-child{margin-top:0}
.section-head{margin:0 0 32px}
.section-head h2{margin:0;max-width:24ch}

/* ------------------------------------------------------------- composants */
.cta,.btn-mail{
  display:inline-block;font-weight:600;font-size:var(--fs-sec);
  background:var(--ink);color:var(--paper);text-decoration:none;
  padding:14px 26px;border-radius:7px;
  transition:transform .15s ease,box-shadow .15s ease;
}
.cta:hover,.btn-mail:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(140,111,29,.28)}
.cta.ghost,.btn-ghost{
  background:none;color:var(--ink);padding:0 0 2px;border-radius:0;
  border-bottom:1px solid var(--gold);font-size:var(--fs-sec);
}
.cta.ghost:hover,.btn-ghost:hover{transform:none;box-shadow:none;color:var(--gold-ink)}
.linkgold{text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px;font-weight:600}
.linkgold:hover{color:var(--gold-ink)}

ul.list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:12px}
ul.list li{padding-left:20px;position:relative;color:var(--ink2)}
ul.list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;background:var(--gold);border-radius:50%;
}
ul.list li.emph{
  font-family:var(--serif);font-style:italic;color:var(--ink);
  font-size:var(--fs-lede);padding-left:0;margin-top:6px;
}
ul.list li.emph::before{display:none}

blockquote.reg{
  margin:20px 0;padding:2px 0 2px 22px;border-left:3px solid var(--gold);
  background:none;
}
blockquote.reg p{font-family:var(--serif);font-size:var(--fs-lede);color:var(--ink);margin:0 0 8px}
blockquote.reg cite{font-style:normal;font-size:var(--fs-caption);color:var(--ink3)}
hr.sep{border:0;border-top:1px solid var(--rule);margin:34px 0}

/* ------------------------------------------------- grilles a trois colonnes */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.col{padding:0 26px;border-left:1px solid var(--rule);display:flex;flex-direction:column}
.col:first-child{padding-left:0;border-left:0}
.col .art{
  font-size:var(--fs-caption);letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-ink);font-weight:700;margin:0 0 6px;
}
.col h3{margin:0 0 6px}
.col > p{margin:0;font-size:var(--fs-sec);color:var(--ink3)}

.offer{padding:0 28px;border-left:1px solid var(--rule);display:flex;flex-direction:column}
.offer:first-child{padding-left:0;border-left:0}
.offer-num{
  font-family:var(--serif);font-style:italic;color:var(--gold-ink);
  font-size:var(--fs-h3);font-weight:700;margin:0 0 10px;text-align:left;
}
.offer h3{margin:0 0 10px;line-height:1.28}
.offer .q{color:var(--ink2);font-size:var(--fs-body);margin:0 0 12px}
.offer .why{color:var(--ink3);font-size:var(--fs-sec);margin:0 0 18px;flex:1}
.offer .more{align-self:flex-start;font-size:var(--fs-sec)}

/* ---------------------------------------------------------------- le seuil */
.seuil-cols{display:grid;grid-template-columns:1fr 1.25fr;gap:52px;align-items:start}
.objection{
  font-family:var(--serif);font-size:clamp(1.5rem,1.7vw + .7rem,1.9375rem);
  font-style:italic;color:var(--gold-ink);margin:0;max-width:24ch;line-height:1.3;
}
.seuil-body{max-width:60ch}
.seuil-body p{font-size:var(--fs-body)}
.seuil-body p.punch{font-family:var(--serif);font-size:var(--fs-lede);color:var(--ink);margin-top:20px;line-height:1.4}

/* ---------------------------------------------------------- psychologues */
.reseau-line{
  font-family:var(--serif);letter-spacing:-.01em;
  font-size:clamp(1.5rem,1.9vw + .8rem,2.125rem);
  font-weight:700;margin:0 0 26px;max-width:20ch;line-height:1.25;
}
.apport{border-left:3px solid var(--gold);padding:2px 0 2px 22px;max-width:62ch}
.apport p{margin:0;color:var(--ink2);font-size:var(--fs-lede);line-height:1.5}
.protocole{margin:26px 0 0;font-size:var(--fs-sec);color:var(--ink3);max-width:62ch}

/* --------------------------------------------------------- independance */
ol.rules{list-style:none;margin:0 0 26px;padding:0;max-width:70ch;counter-reset:r}
ol.rules li{
  counter-increment:r;padding:14px 0 14px 44px;font-size:var(--fs-body);
  border-bottom:1px solid var(--rule);position:relative;color:var(--ink2);
}
ol.rules li:first-child{border-top:1px solid var(--rule)}
ol.rules li::before{
  content:counter(r);position:absolute;left:0;top:14px;
  font-family:var(--serif);font-style:italic;font-weight:700;
  color:var(--gold-ink);font-size:var(--fs-body);
}
.indep-note{font-family:var(--serif);font-size:var(--fs-lede);max-width:58ch;margin:0;line-height:1.45}
.systeme{margin-top:32px;padding-top:26px;border-top:1px solid var(--rule)}
.systeme h3{margin:0 0 8px}
.systeme p{margin:0;color:var(--ink2);font-size:var(--fs-sec);max-width:64ch}

/* --------------------------------------------------------------- dates */
.date-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.date-num{
  font-family:var(--serif);font-weight:700;color:var(--gold-ink);
  font-size:clamp(1.25rem,1.5vw + .55rem,1.625rem);font-variant-numeric:tabular-nums;
}
.date-label{font-size:var(--fs-caption);color:var(--ink3);margin-top:6px}
.date-note{font-size:var(--fs-caption);color:var(--ink3);margin:22px 0 0}

/* --------------------------------------------------- page offres, detail */
.detail{padding:48px 0;border-bottom:1px solid var(--rule)}
.detail-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:start}
/* la colonne de gauche (repère/numéro/méta) est toujours plus courte que
   le texte de droite — sans ancrage, elle laisse un vide qui lit comme un
   défaut. En la fixant au défilement, l'asymétrie devient un repère de
   lecture au lieu d'un trou visuel. Désactivé sous 860px, où les deux
   colonnes s'empilent. */
.detail-grid > *:first-child{position:sticky;top:88px}
.detail h2{margin:0 0 12px;font-size:1.75rem}
.detail .q{font-family:var(--serif);font-style:italic;color:var(--gold-ink);font-size:var(--fs-lede);margin:0 0 20px;line-height:1.4}
.detail .meta{font-size:var(--fs-caption);color:var(--ink3);border-top:1px solid var(--rule);padding-top:14px;margin:20px 0 0}
.detail .meta b{
  display:block;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:5px;font-weight:700;
}
.blk{margin:0 0 22px}
.blk:last-child{margin-bottom:0}
.blk p{color:var(--ink2);font-size:var(--fs-body)}
.cabinets{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.cabinets p{margin:0;font-size:var(--fs-body);color:var(--ink2);max-width:62ch}

/* --------------------------------------------------------- bandeau final */
.final{
  background:linear-gradient(135deg,#E0CA8C 0%,#C9A84C 45%,#AE8C33 100%);
  text-align:center;padding:58px 0 62px;
}
.final h2{color:#221D0C;margin:0 0 12px;max-width:22ch;margin-left:auto;margin-right:auto}
.final p{color:#3B3316;max-width:48ch;margin:0 auto 26px;font-size:var(--fs-lede)}
.final a.cta{background:#1B1A16;color:#F7F1E1}

/* --------------------------------------------------------------- bandeau alerte */
.site-banner{
  background:linear-gradient(135deg,#E0CA8C 0%,#C9A84C 45%,#AE8C33 100%);
  color:#1B1A16;text-align:center;padding:22px 0;
}
.site-banner .wrap{padding:0 28px;font-size:var(--fs-lede);line-height:1.5;text-align:center;hyphens:none}
.site-banner a{
  display:inline-block;margin-left:12px;font-weight:700;color:#1B1A16;
  text-decoration:none;border-bottom:2px solid #1B1A16;white-space:nowrap;
}
.site-banner a:hover{color:#3B3316}
@media(max-width:560px){.site-banner a{display:block;margin:10px 0 0}}

/* ------------------------------------------------------------ pied de page */
footer.site{padding:32px 0 46px;border-top:1px solid var(--rule)}
footer.site .cols{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
footer.site a{color:var(--ink3);text-decoration:none;font-size:var(--fs-caption)}
footer.site a:hover{color:var(--gold-ink)}
footer.site .fnav{display:flex;gap:20px;flex-wrap:wrap}
footer.site .mini{font-size:.8125rem;color:var(--ink3);margin:20px 0 0;max-width:680px;line-height:1.6}

/* ------------------------------------------------------------- responsive */
@media(max-width:860px){
  .cols3,.detail-grid,.seuil-cols{grid-template-columns:1fr;gap:26px}
  .detail-grid > *:first-child{position:static;top:auto}
  .col,.offer{padding:22px 0 0;border-left:0;border-top:1px solid var(--rule)}
  .col:first-child,.offer:first-child{padding-top:0;border-top:0}
  .date-grid{grid-template-columns:repeat(2,1fr);row-gap:26px}
  section.hero{padding:44px 0 32px}
  .band{padding:42px 0}
}
@media(max-width:600px){
  nav.main{justify-content:center;gap:8px 14px;row-gap:10px}
  nav.main a{font-size:.85rem}
  nav.main a.mail{flex-basis:100%;text-align:center;order:99;margin-top:4px}
  footer.site .fnav{justify-content:center;text-align:center}
}
@media(prefers-reduced-motion:reduce){*{transition:none !important}}