/* ============================================================
   ALINE LAHAYE — articles, charte « chaleureuse »
   Portage des 9 pages de phase 1 depuis l'ancienne charte or.
   ============================================================ */

:root{
  --creme:#FDFAF6; --creme-2:#EFE6D9; --clair:#FFF9F4; --blanc:#FFFDFA;
  --sable:#F6EFE5; --sable-bord:#EBE0D0;
  --encre:#302A24; --encre-2:#4E453B; --gris:#6E655A; --gris-2:#7C7267;
  --rose:#C74A6D; --rose-fonce:#AC3A59; --rose-pale:#FDEBF0;
  --rose-bord:#F5CBD7; --rose-bord-2:#F2B5C7;
  --bord:#EDE2D3; --bord-2:#E3D6C4;
  --max:1240px; --gout:clamp(20px,4vw,56px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--creme);color:var(--encre);
  font-family:Figtree,system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.66;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--rose-fonce);text-decoration:none}
a:hover{color:var(--rose)}
::selection{background:#FBD8E2;color:var(--encre)}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:4px}
summary::-webkit-details-marker{display:none}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gout);padding-right:var(--gout)}
/* fil d'Ariane, titre et corps partagent la même colonne : le texte
   ne doit pas se recentrer sous un titre calé à gauche */
.crumb,.head,article.narrow{max-width:900px;margin-left:auto;margin-right:auto}
.mono{font-size:.8rem;color:var(--gris-2)}

/* ---------- bandeau de retour ---------- */
.bandeau{background:var(--encre);color:rgba(253,250,246,.72);font-size:.8rem;position:relative;z-index:70}
.bandeau-in{
  max-width:var(--max);margin:0 auto;padding:9px var(--gout);
  display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;min-height:42px;
}
.bandeau a{color:var(--clair);font-weight:600;display:inline-flex;align-items:center;gap:.5em}
.bandeau a:hover{color:var(--rose-bord)}
.bandeau .quoi{color:rgba(253,250,246,.5)}
@media (max-width:620px){.bandeau .quoi{display:none}}

/* ---------- en-tête ---------- */
header{position:sticky;top:0;z-index:55;background:rgba(253,250,246,.92);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--creme-2)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:84px}
/* l’identité du site (assets/identite/) : le lien reçoit une largeur ferme,
   la largeur du bloc étant un pourcentage de son conteneur */
.brand{display:block;flex:none;width:178px;color:inherit}
.brand .al-identite{--largeur:178px}
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  background:var(--rose);color:var(--clair);font-weight:600;font-size:.94rem;
  padding:.85em 1.5em;border-radius:999px;line-height:1;white-space:nowrap;
  box-shadow:0 6px 16px -9px rgba(199,74,109,.6);transition:background .2s;
}
.btn:hover{background:var(--rose-fonce);color:var(--clair)}

/* ---------- fil d'Ariane ---------- */
.crumb{padding-top:26px;display:flex;gap:9px;flex-wrap:wrap;align-items:center;font-size:.86rem;color:var(--gris-2)}
.crumb a{color:var(--gris)}
.crumb a:hover{color:var(--rose)}
.crumb i{font-style:normal;color:var(--rose)}

/* ---------- titre ---------- */
.head{padding-top:38px;padding-bottom:32px;border-bottom:1px solid var(--bord)}
.head .tag{
  display:inline-block;font-size:.76rem;font-weight:700;color:var(--rose-fonce);
  background:var(--rose-pale);border-radius:999px;padding:5px 13px;margin-bottom:20px;
}
h1{
  font-weight:800;font-size:clamp(2rem,4.2vw,3rem);line-height:1.08;
  letter-spacing:-.028em;max-width:24ch;text-wrap:balance;
}
h1 em{font-style:normal;color:var(--rose)}
.head .meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.head .meta span{font-size:.86rem;color:#5B5248;background:var(--sable);border-radius:999px;padding:7px 15px}
.head .meta b{color:var(--encre);font-weight:700}

/* ---------- corps ---------- */
article{padding:44px 0 20px}
article .lede{font-size:1.13rem;color:var(--encre-2);line-height:1.68;max-width:60ch;margin-bottom:36px;text-wrap:pretty}
article h2{
  font-weight:700;font-size:1.5rem;letter-spacing:-.02em;line-height:1.2;
  margin:42px 0 16px;display:flex;gap:13px;align-items:center;
}
article h2 .n{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:11px;background:var(--rose-pale);
  color:var(--rose-fonce);font-size:.9rem;font-weight:700;letter-spacing:0;
}
article p{font-size:1rem;color:var(--gris);max-width:66ch;margin-bottom:16px;text-wrap:pretty}
article p b{color:var(--encre);font-weight:700}
article ul{list-style:none;margin:18px 0 22px;display:flex;flex-direction:column;gap:11px}
article li{font-size:.98rem;color:var(--gris);padding-left:24px;position:relative;max-width:64ch}
article li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:2px;border-radius:999px;background:var(--rose)}
article li b{color:var(--encre);font-weight:700}

.callout{
  background:var(--rose-pale);border:1px solid var(--rose-bord);border-radius:18px;
  padding:22px 26px;margin:30px 0;max-width:66ch;
}
.callout p{margin:0;font-size:.96rem;color:var(--encre-2)}
.callout .t{display:block;font-size:.76rem;font-weight:700;color:var(--rose-fonce);margin-bottom:9px}

/* ---------- faq ---------- */
.faq{margin:52px 0 0;max-width:820px}
.faq details{background:var(--blanc);border:1px solid var(--bord);border-radius:16px;margin-bottom:12px}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;
  padding:20px 24px;font-weight:600;font-size:1.04rem;line-height:1.4;
}
.faq summary .ind{color:var(--rose);font-weight:700;transition:transform .25s;flex:none}
.faq details[open] summary .ind{transform:rotate(45deg)}
.faq .a{padding:0 24px 22px;color:var(--gris);font-size:.96rem;max-width:62ch}

.avert{
  margin-top:40px;font-size:.78rem;letter-spacing:.02em;color:var(--gris-2);line-height:1.7;
  background:var(--sable);border-radius:14px;padding:16px 20px;
}

/* ---------- appel ---------- */
.cta-band{background:var(--rose);color:var(--clair);margin-top:64px;padding:clamp(44px,5vw,64px) 0}
.cta-band .in{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;align-items:center}
.cta-band h2{font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.14;letter-spacing:-.024em}
.cta-band h2 em{font-style:normal;color:#FFE1EA}
.cta-band p{color:rgba(255,249,244,.86);font-size:.96rem;margin-top:12px;max-width:46ch}
.cta-band .act{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cta-band .btn{background:var(--clair);color:var(--rose-fonce);box-shadow:none;font-size:1rem;padding:1em 1.8em}
.cta-band .btn:hover{background:#fff;color:var(--rose-fonce)}
.cta-band .note{font-size:.82rem;color:rgba(255,249,244,.76)}

/* ---------- pied ---------- */
footer{background:var(--encre);color:rgba(253,250,246,.6);padding:24px 0}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.82rem}
footer a{color:rgba(253,250,246,.76)}
footer a:hover{color:#fff}

@media (max-width:900px){
  .nav{height:72px}
}
/* sous 560 px, seul le monogramme reste */
@media (max-width:560px){
  .brand{width:36px}
  .brand .al-identite{--largeur:36px;height:34px !important;aspect-ratio:auto}
  .brand .al-identite>span{display:none}
  .brand .al-identite>img{position:static;width:auto !important;height:34px !important}
}
@media (max-width:620px){
  body{font-size:16px}
  .nav .btn{display:none}
}

/* ---------- alignement justifié (voir site-v3.html) ---------- */
article p,article li,article blockquote,article dd{text-align:justify;hyphens:auto;-webkit-hyphens:auto}