/* Polices chargées par la balise <link> ci-dessus, comme attendu par le bloc
   HTML de Systeme.io. Seules les graisses réellement utilisées sont demandées. */

/* ═══════════════════════════════════════════════════════════════════
   FEMMES DE SAVOIRS — feuille de style intégralement scopée sous
   #site-jihene afin de n'entrer en conflit avec aucun style Systeme.io.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- 1. Jetons de design (palette extraite du logo) ---------- */
#site-jihene{
  /* encres */
  /* Contrastes vérifiés sur parchemin ET sur les sections teintées, seuil
     WCAG AA de 4,5 pour du petit texte. Ne pas éclaircir --ink-mute : à
     #857868 il tombait à 3,4 sur fond teinté et les petits textes (dates,
     légendes, notes) devenaient illisibles. */
  --ink:#221c18;            /* encre profonde — titres            15,2 : 1 */
  --ink-soft:#4b4038;       /* encre diluée — corps de texte       9,1 : 1 */
  --ink-mute:#695c4d;       /* encre pâlie — annotations, glose    5,9 : 1 */
  --ink-hair:#cfc3ab;       /* filets, hairlines */
  /* parchemins */
  --parch:#f8f3e8;
  --parch-2:#f2ebdc;
  --parch-3:#ebe2cf;
  --parch-deep:#e3d8c0;
  /* rubrication (rouge des copistes) — teinte du logo, H≈337° */
  --rub:#b31047;
  --rub-bright:#ce0f57;
  --rub-deep:#8c0d38;
  --plum:#7a2e4a;
  --gold:#a98b54;

  /* logo « Femmes de savoirs » — déclaré une seule fois, réutilisé header + footer */
  --logo:url("assets/logo.png");

  --maxw:1180px;
  --gut:clamp(20px,5vw,64px);
  --hdr:74px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Réinitialisation locale (défensive vs Systeme.io) ---------- */
#site-jihene,#site-jihene *,#site-jihene *::before,#site-jihene *::after{box-sizing:border-box}
#site-jihene h1,#site-jihene h2,#site-jihene h3,#site-jihene h4,
#site-jihene p,#site-jihene ul,#site-jihene ol,#site-jihene li,
#site-jihene figure,#site-jihene blockquote,#site-jihene fieldset,#site-jihene legend{margin:0;padding:0}
/* Second rempart : si la page hôte vise directement les balises plutôt que le
   conteneur, l'héritage ne suffit pas. Ces sélecteurs (id + balise) l'emportent
   sur les siens, et cèdent devant mes propres règles de classe — les rares
   éléments volontairement centrés le restent. */
#site-jihene h1,#site-jihene h2,#site-jihene h3,#site-jihene h4,
#site-jihene p,#site-jihene ul,#site-jihene ol,#site-jihene li,
#site-jihene div,#site-jihene span,#site-jihene a,#site-jihene figure,
#site-jihene figcaption,#site-jihene blockquote,#site-jihene label,
#site-jihene input,#site-jihene select,#site-jihene textarea{
  text-align:left;text-transform:none;text-indent:0;
}
#site-jihene ul,#site-jihene ol{list-style:none}
#site-jihene img,#site-jihene svg{display:block;max-width:100%}
#site-jihene a{color:inherit;text-decoration:none}
#site-jihene button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#site-jihene input,#site-jihene select,#site-jihene textarea{font:inherit;color:inherit;background:none;border:0;border-radius:0;-webkit-appearance:none;appearance:none}
#site-jihene :focus-visible{outline:2px solid var(--rub);outline-offset:3px;border-radius:2px}

/* ---------- 3. Le parchemin : couleur, halos, grain ---------- */
#site-jihene{
  position:relative;
  isolation:isolate;
  /* Plus de « overflow-x:clip » ici. Un ancêtre qui rogne oblige Safari à
     re-découper le calque de l'en-tête sticky à chaque image, ce qui entretient
     le tremblement. Vérifié aux largeurs 375, 714 et 1600 px : rien ne déborde
     à droite, aucune barre horizontale n'apparaît sans ce rognage. Le seul
     élément hors cadre est le champ piège du formulaire, placé à gauche du
     zéro — une zone que le navigateur ne rend jamais défilable. */
  color:var(--ink-soft);
  background-color:var(--parch);
  background-image:
    /* grain de papier (SVG inline, ~300 octets) */
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27200%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.85%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix type=%27saturate%27 values=%270%27/%3E%3C/filter%3E%3Crect width=%27200%27 height=%27200%27 filter=%27url(%23n)%27 opacity=%27.13%27/%3E%3C/svg%3E"),
    radial-gradient(1100px 640px at 10% -4%,rgba(179,16,71,.05),transparent 62%),
    radial-gradient(900px 620px at 94% 6%,rgba(169,139,84,.09),transparent 60%),
    radial-gradient(1100px 900px at 46% 104%,rgba(122,46,74,.055),transparent 62%);
  background-size:200px 200px,auto,auto,auto;
  background-repeat:repeat,no-repeat,no-repeat,no-repeat;
  /* Propriétés héritables remises à plat : Systeme.io impose les siennes au
     conteneur (c'est ainsi que les textes arrivaient centrés). Sans cette
     remise à zéro, tout ce qui n'est pas explicitement déclaré ici est hérité
     de la page hôte. */
  text-align:left;
  text-transform:none;
  letter-spacing:normal;
  word-spacing:normal;
  font-style:normal;
  text-indent:0;
  direction:ltr;
  font-family:'Newsreader',Georgia,'Times New Roman',serif;
  /* graisse 400 et non 300 : à 300, Newsreader est trop fin pour du texte
     courant à cette taille, même avec un bon contraste */
  font-weight:400;
  font-size:17px;
  line-height:1.74;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-variant-ligatures:common-ligatures;
}
/* fibres verticales très discrètes du parchemin, sous le contenu (z-index:-1). */
#site-jihene::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(140,120,90,.035) 0 1px,transparent 1px 7px);
  opacity:.7;
}
#site-jihene > *{position:relative}

/* ---------- 4. Trame typographique ---------- */
#site-jihene .fds-display{font-family:'Cormorant Garamond',Garamond,Georgia,serif;font-weight:300;color:var(--ink);letter-spacing:-.012em}
#site-jihene .fds-wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
#site-jihene .fds-narrow{max-width:720px}

#site-jihene .fds-kicker{
  font-size:14.5px;font-style:italic;font-weight:400;color:var(--rub);
  letter-spacing:.01em;line-height:1.5;
}
#site-jihene .fds-lead{font-size:clamp(18px,1.5vw,20.5px);line-height:1.7;color:var(--ink-soft)}
#site-jihene .fds-small{font-size:14px;line-height:1.6;color:var(--ink-mute)}
#site-jihene em{font-style:italic}
#site-jihene .fds-rub{color:var(--rub)}

/* ---------- 5. Ornements ---------- */
/* losange + filets — remplace toute numérotation de section */
#site-jihene .fds-orn{display:flex;align-items:center;gap:11px}
#site-jihene .fds-orn::before,#site-jihene .fds-orn::after{content:"";height:1px;background:var(--ink-hair)}
#site-jihene .fds-orn::before{width:34px}
#site-jihene .fds-orn::after{flex:1;background:linear-gradient(90deg,var(--ink-hair),transparent)}
#site-jihene .fds-orn i{width:6px;height:6px;background:var(--rub);transform:rotate(45deg);flex:none}
#site-jihene .fds-orn.is-center::before{flex:1;background:linear-gradient(90deg,transparent,var(--ink-hair))}
#site-jihene .fds-orn.is-center::after{flex:1;background:linear-gradient(90deg,var(--ink-hair),transparent)}

/* frise ondulée inspirée des bordures de manuscrits */
#site-jihene .fds-braid{
  height:9px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2748%27 height=%279%27 viewBox=%270 0 48 9%27%3E%3Cpath d=%27M0 4.5C4 .5 8 8.5 12 4.5S20 .5 24 4.5 32 8.5 36 4.5 44 .5 48 4.5%27 fill=%27none%27 stroke=%27%23b31047%27 stroke-width=%27.9%27 opacity=%27.42%27/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:center;
}

/* filet double, marque de séparation de cahier */
#site-jihene .fds-rule{border-top:1px solid var(--ink-hair);border-bottom:1px solid rgba(207,195,171,.45);height:4px}

/* glose de marge : annotation à l'italique dans la marge, comme un scoliaste */
#site-jihene .fds-gloss{
  font-size:13.5px;font-style:italic;line-height:1.6;color:var(--ink-mute);
  padding-left:14px;border-left:1px solid var(--ink-hair);
}

/* ---------- 6. En-tête ---------- */
/* Fond opaque, et surtout PAS de backdrop-filter. L'en-tête portait un verre
   dépoli (blur 9px sur fond translucide) : Safari recalcule ce flou à chaque
   image à partir du contenu qui défile dessous, et sur la texture de papier
   le rééchantillonnage se voyait — l'en-tête vibrait. Chrome, qui met le
   résultat en cache plus agressivement, ne montrait rien : d'où un défaut
   invisible d'un navigateur à l'autre. Un aplat de parchemin donne le même
   rendu au repos, sans aucun recalcul. Ne pas réintroduire de flou ici. */
#site-jihene .fds-header{
  position:sticky;top:0;z-index:60;
  background:var(--parch);
  border-bottom:1px solid rgba(207,195,171,.7);
  transition:box-shadow .4s var(--ease);
  /* Safari ne place pas toujours un élément « sticky » sur son propre calque
     de composition : il le repeint sur le fil principal à chaque image, avec
     une image de retard sur le défilement — l'en-tête paraît alors trembler.
     Chrome promeut ces éléments d'office, d'où un défaut visible uniquement
     sur Safari. Les deux déclarations ci-dessous forcent cette promotion.
     Ne pas les retirer en croyant à du code mort. */
  -webkit-transform:translateZ(0);transform:translateZ(0);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
/* Au défilement, l'en-tête ne change QUE d'ombre : aucune propriété de mise
   en page. Le logo rétrécissait auparavant (54 -> 46 px), ce qui faisait
   passer l'en-tête de 83 à 75 px. Comme il est en flux (position:sticky),
   les 8 px perdus remontaient toute la page, et l'ancrage au défilement du
   navigateur corrigeait aussitôt la position — ce qui repassait sous le
   seuil, redonnait sa taille au logo, et ainsi de suite : l'en-tête
   tremblait. Ne pas réintroduire de changement de hauteur ici. */
#site-jihene .fds-header.is-stuck{box-shadow:0 1px 0 rgba(207,195,171,.5),0 14px 34px -28px rgba(34,28,24,.5)}
#site-jihene .fds-header__in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  min-height:var(--hdr);display:flex;align-items:center;gap:26px;
}
#site-jihene .fds-logo{flex:none;display:block;padding:14px 0}
#site-jihene .fds-logomark{
  display:block;background-image:var(--logo);background-size:contain;
  background-repeat:no-repeat;background-position:left center;
}
#site-jihene .fds-logo .fds-logomark{width:186px;height:54px;transition:opacity .3s var(--ease)}
#site-jihene .fds-logo:hover .fds-logomark{opacity:.72}
#site-jihene .fds-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

#site-jihene .fds-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
/* Le menu était en graisse 300 à 15,5 px : contraste correct mais traits trop
   fins pour être confortables. Graisse 400 et encre profonde. */
#site-jihene .fds-nav a{
  position:relative;font-size:15.5px;font-weight:400;color:var(--ink);padding:6px 0;
  transition:color .3s var(--ease);
}
#site-jihene .fds-nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--rub);
  transition:right .42s var(--ease);
}
#site-jihene .fds-nav a:hover{color:var(--rub)}
#site-jihene .fds-nav a:hover::after,#site-jihene .fds-nav a[aria-current="true"]::after{right:0}
#site-jihene .fds-nav a[aria-current="true"]{color:var(--ink)}

/* Bouton Contact : la pilule a besoin de son propre rembourrage, sinon la règle
   « .fds-nav a » ci-dessus l'aplatit et le cadre arrondi se referme sur le texte.
   Sélecteur plus spécifique (a.fds-btn--nav) pour l'emporter.
   → Pour agrandir ou réduire le cercle, ajuster ce padding. */
/* Texte à l'encre au repos (plus lisible qu'en carmin sur le liseré carmin),
   pilule pleine au survol. */
#site-jihene .fds-nav a.fds-btn--nav{padding:14px 30px;font-size:15px;color:var(--ink)}
#site-jihene .fds-nav a.fds-btn--nav::after{display:none}
/* Au survol le bouton se remplit de carmin : le texte doit repasser en clair.
   Sans cette règle, « #site-jihene .fds-nav a:hover » l'emporte (il a un
   sélecteur de type en plus) et écrit en carmin sur du carmin — le mot
   disparaît. */
#site-jihene .fds-nav a.fds-btn--nav:hover{background:var(--rub);color:#fbf7ee}

#site-jihene .fds-burger{display:none;margin-left:auto;width:42px;height:42px;position:relative}
#site-jihene .fds-burger span{position:absolute;left:10px;width:22px;height:1px;background:var(--ink);transition:transform .38s var(--ease),opacity .2s}
#site-jihene .fds-burger span:nth-child(1){top:17px}
#site-jihene .fds-burger span:nth-child(2){top:24px}
#site-jihene .fds-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(11deg)}
#site-jihene .fds-burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-11deg)}

/* ---------- 7. Boutons ---------- */
#site-jihene .fds-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:15.5px;line-height:1;padding:16px 28px;
  border-radius:999px;position:relative;overflow:hidden;
  transition:transform .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
#site-jihene .fds-btn--solid{
  background:var(--rub);color:#fbf7ee;
  box-shadow:0 10px 26px -18px rgba(140,13,56,.9);
}
#site-jihene .fds-btn--solid:hover{background:var(--rub-deep);transform:translateY(-1px);box-shadow:0 16px 32px -18px rgba(140,13,56,.85)}
#site-jihene .fds-btn--ghost{border:1px solid var(--ink-hair);color:var(--ink)}
#site-jihene .fds-btn--ghost:hover{border-color:var(--ink);background:rgba(34,28,24,.035);transform:translateY(-1px)}
#site-jihene .fds-btn--nav{padding:14px 30px;font-size:15px;border:1px solid var(--rub);color:var(--rub)}
#site-jihene .fds-btn--nav:hover{background:var(--rub);color:#fbf7ee}
#site-jihene .fds-btn[aria-disabled="true"]{opacity:.55;cursor:default;pointer-events:none}

/* lien à filet, pour les liens secondaires */
#site-jihene .fds-link{
  display:inline-block;font-size:15px;color:var(--ink);
  border-bottom:1px solid var(--rub);padding-bottom:2px;
  transition:color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
#site-jihene .fds-link:hover{color:var(--rub);border-color:transparent}

/* ---------- 8. Sections ---------- */
/* Marge haute plus courte que la basse : chaque bloc démarre plus près du
   précédent (le contenu « remonte »), tout en gardant de l'air avant la
   séparation suivante. */
#site-jihene .fds-sec{
  padding-top:clamp(28px,2.6vw,40px);
  padding-bottom:clamp(44px,4.8vw,74px);
  position:relative;
}
#site-jihene .fds-sec + .fds-sec{border-top:1px solid rgba(207,195,171,.55)}
#site-jihene .fds-sec--tint{background:linear-gradient(180deg,rgba(235,226,207,.55),rgba(235,226,207,.14))}

#site-jihene .fds-head{max-width:790px;margin-bottom:clamp(24px,2.6vw,38px)}
#site-jihene .fds-head .fds-orn{margin-bottom:20px}
#site-jihene .fds-head h2{
  font-family:'Cormorant Garamond',Garamond,Georgia,serif;font-weight:300;
  font-size:clamp(31px,4.1vw,50px);line-height:1.08;color:var(--ink);letter-spacing:-.014em;
}
#site-jihene .fds-head h2 em{font-style:italic;color:var(--rub)}
#site-jihene .fds-head p{margin-top:20px;max-width:640px}

/* ---------- 10. Livres ---------- */
#site-jihene .fds-book{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(28px,4.4vw,64px);align-items:start;
}
#site-jihene .fds-book + .fds-book{margin-top:clamp(46px,5vw,74px);padding-top:clamp(40px,4.3vw,64px);border-top:1px solid rgba(207,195,171,.55)}
#site-jihene .fds-book__fig{position:relative}
#site-jihene .fds-book__fig img{width:100%;height:auto}
/* Couvertures : les visuels sont découpés à la forme du livre (fond
   transparent), donc drop-shadow épouse le contour et pose une ombre TOUT
   AUTOUR — halo doux, puis ombre portée qui ancre le livre.
   NB : ne pas revenir à mix-blend-mode ici. Pendant l'animation d'apparition,
   l'opacité < 1 de l'article crée un contexte d'empilement qui isole le
   mélange : le fond blanc du visuel réapparaissait le temps de la transition. */
#site-jihene .fds-book__cover{
  filter:
    /* contact : cerne le livre de près, sur les quatre côtés */
    drop-shadow(0 0 1px rgba(34,28,24,.30))
    /* halo : sans décalage, donc présent tout autour */
    drop-shadow(0 0 16px rgba(34,28,24,.20))
    /* portée : ancre le livre sur la page */
    drop-shadow(0 16px 28px rgba(34,28,24,.20));
}
#site-jihene .fds-book__note{
  margin-top:12px;text-align:center;
  font-size:12.5px;font-style:italic;color:var(--ink-mute);
}
#site-jihene .fds-book__year{
  font-size:13.5px;font-style:italic;color:var(--ink-mute);
}
#site-jihene .fds-book__badge{
  display:inline-block;font-size:12.5px;font-style:italic;color:var(--rub);
  border:1px solid rgba(179,16,71,.35);border-radius:999px;padding:4px 13px;
  background:rgba(179,16,71,.05);
}
#site-jihene .fds-book h3{
  font-family:'Cormorant Garamond',Garamond,Georgia,serif;font-weight:400;
  font-size:clamp(25px,2.9vw,37px);line-height:1.12;color:var(--ink);letter-spacing:-.012em;
  margin-top:10px;
}
#site-jihene .fds-book__body{margin-top:18px;max-width:58ch}
#site-jihene .fds-book__body p + p{margin-top:14px}
#site-jihene .fds-book__list{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 10px}
#site-jihene .fds-book__list li{
  font-size:14px;font-style:italic;color:var(--ink-soft);
  border:1px solid var(--ink-hair);border-radius:999px;padding:5px 14px;background:rgba(255,252,245,.6);
}
#site-jihene .fds-book__cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}

/* ---------- 16. Pied de page ---------- */
#site-jihene .fds-footer{
  padding-block:clamp(42px,4.6vw,66px);
  border-top:1px solid rgba(207,195,171,.7);
  background:linear-gradient(180deg,rgba(227,216,192,.32),rgba(227,216,192,.5));
}
#site-jihene .fds-footer__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:34px 48px;align-items:start}
#site-jihene .fds-footer__logo .fds-logomark{width:200px;height:58px;opacity:.9}
#site-jihene .fds-footer__name{
  margin-top:16px;font-family:'Cormorant Garamond',Garamond,serif;font-size:20px;
  color:var(--ink);letter-spacing:.005em;
}
#site-jihene .fds-footer__grid nav{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:15px}
#site-jihene .fds-footer__grid nav a:hover{color:var(--rub)}
#site-jihene .fds-footer__bot{
  margin-top:clamp(34px,4vw,52px);padding-top:22px;border-top:1px solid rgba(207,195,171,.7);
  display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;font-size:13px;color:var(--ink-mute);
}

/* ---------- 18. Apparitions ---------- */
/*
   Le masquage initial n'a lieu QUE si le script s'est exécuté (classe .js-on
   posée par lui). Sans script — bloqué, filtré ou en erreur — tout reste
   visible : sinon la page entière serait invisible. */
#site-jihene.js-on [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .82s var(--ease),transform .82s var(--ease);transition-delay:var(--d,0ms)}
#site-jihene.js-on [data-reveal].is-in{opacity:1;transform:none}

/* ---------- 20. Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  #site-jihene *,#site-jihene *::before,#site-jihene *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;
  }
  #site-jihene [data-reveal]{opacity:1;transform:none}
}

/* ---------- 11. Carte de citation (extrait du site) ---------- */
/* carte de citation */
#site-jihene .fds-quote{
  background:linear-gradient(168deg,rgba(255,252,245,.95),rgba(242,235,220,.72));
  border:1px solid rgba(207,195,171,.8);
  border-radius:20px;
  padding:clamp(24px,3vw,38px) clamp(22px,3vw,40px);
  box-shadow:0 30px 54px -48px rgba(34,28,24,.55);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;
}
#site-jihene .fds-quote__leaf{flex:none;width:26px;color:var(--rub);opacity:.78;margin-top:5px}
#site-jihene .fds-quote p{
  font-family:'Cormorant Garamond',Garamond,Georgia,serif;
  font-weight:300;font-style:italic;
  font-size:clamp(19px,2vw,24px);line-height:1.5;color:var(--ink);letter-spacing:-.004em;
}
#site-jihene .fds-quote footer{margin-top:14px;font-size:13.5px;color:var(--ink-mute);font-style:normal}