/* ##########################################################################
   80_outils.css — Outils CSS (utilitaires)
   Projet : SEP Nancy — Cassiopeia enfant
   Objet : blocs "manuscrit" + options (fond, signature mixte)
   --------------------------------------------------------------------------
   Philosophie :
   - Par défaut : AUCUN fond / aucune boîte (usage facile en article ou module)
   - Options : fonds élégants via classes dédiées (plusieurs ambiances)
   - Signature : nom en manuscrit + complément en police standard
   --------------------------------------------------------------------------
   v1.1 — 2026-03-03
   ########################################################################## */


/* (OPTIONNEL) Pour une manuscrite homogène :
   - Décommente l’import ci-dessous
   - Vérifie RGPD / dépendances externes
*/
/*
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600&display=swap');
*/


/* ==========================================================================
   UTIL — MANUSCRIT (base)
   ========================================================================== */

:where(.sep-manu){
  /* Stack manuscrit (si Caveat n’est pas importée, on tombe sur cursive système) */
  --manu-font: "Caveat", "Patrick Hand", "Dancing Script",
               "Segoe Script", "Bradley Hand", "Comic Sans MS",
               cursive;

  /* Taille : plus petite (retour user) + encore responsive
     clamp(min, fluide, max)
     - min : écrans petits
     - max : grands écrans
     - fluide : progression entre les deux
  */
  --manu-size: clamp(0.98rem, 0.92rem + 0.35vw, 1.28rem);

  /* Aération */
  --manu-lh: 2.00;
  --manu-letter: .018em;

  /* Couleurs / teinte */
  --manu-color: var(--sep-ink, var(--bs-body-color, #1a1a1a));

  /* Largeur “lecture” par défaut (modifiable par classes) */
  --manu-max: 62ch;

  font-family: var(--manu-font);
  font-size: var(--manu-size);
  line-height: var(--manu-lh);
  letter-spacing: var(--manu-letter);
  color: var(--manu-color);

  max-width: var(--manu-max);
  margin: 1.2rem 0;
}

/* Paragraphe : court, respirant */
:where(.sep-manu p){
  margin: 0 0 1.05em;
}

:where(.sep-manu p:last-child){
  margin-bottom: 0;
}


/* ==========================================================================
   MODIFIERS — largeur / alignement / tonalité (toujours sans fond)
   ========================================================================== */

:where(.sep-manu--narrow){ --manu-max: 52ch; }
:where(.sep-manu--wide){   --manu-max: 72ch; }
:where(.sep-manu--full){   --manu-max: 100%; }

:where(.sep-manu--center){
  margin-left: auto;
  margin-right: auto;
}

:where(.sep-manu--muted){
  opacity: .88;
}

/* Encore plus petit (si besoin) */
:where(.sep-manu--small){
  --manu-size: clamp(0.92rem, 0.90rem + 0.25vw, 1.15rem);
  --manu-lh: 1.92;
}

/* Plus ample (ex: citation manuscrite) */
:where(.sep-manu--large){
  --manu-size: clamp(1.10rem, 1.00rem + 0.55vw, 1.55rem);
  --manu-lh: 2.10;
}

/* Interligne plus “serré” si tu veux compacter */
:where(.sep-manu--tight){
  --manu-lh: 1.75;
}


/* ==========================================================================
   SIGNATURE — nom manuscrit + complément en police standard
   Usage conseillé :
   <p class="sep-manu-sign">
     <span class="sep-manu-name">— Nelson Mandela</span>
     <span class="sep-manu-meta">discours prononcé ...</span>
   </p>
   ========================================================================== */

:where(.sep-manu .sep-manu-sign){
  margin-top: .35em;
  text-align: right;
}

/* Nom : reste manuscrit */
:where(.sep-manu .sep-manu-name){
  font-family: var(--manu-font);
  font-weight: 600;
}

/* Complément : police standard, plus petit, plus discret */
:where(.sep-manu .sep-manu-meta){
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 0.82em;
  letter-spacing: 0;
  opacity: .80;
  margin-left: .35em;
  white-space: normal;
}


/* ==========================================================================
   MODIFIER — underline léger (sans fond, juste un trait discret)
   ========================================================================== */

:where(.sep-manu--underline){
  position: relative;
  padding-bottom: .35rem;
}

:where(.sep-manu--underline)::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 1px;
  background: currentColor;
  opacity: .22;
}


/* ==========================================================================
   OPTIONS DE FOND — plusieurs ambiances (à activer via classe)
   IMPORTANT : le fond ajoute padding + bord léger.
   ========================================================================== */

:where(.sep-manu[class*="sep-manu--bg"]){
  --manu-pad-y: 1.15rem;
  --manu-pad-x: 1.35rem;
  padding: var(--manu-pad-y) var(--manu-pad-x);
  border-radius: .45rem;
  border: 1px solid rgba(0,0,0,.08);
}

/* BG 1 — Papier chaud (neutre, élégant) */
:where(.sep-manu--bg-paper){
  background:
    radial-gradient(900px 420px at 18% 10%, rgba(0,0,0,.035), transparent 60%),
    radial-gradient(800px 360px at 82% 25%, rgba(0,0,0,.025), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(250,247,242,.92));
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
}

/* BG 2 — Halo doux (très léger, presque “sans fond”) */
:where(.sep-manu--bg-halo){
  background:
    radial-gradient(520px 320px at 50% 20%, rgba(0,0,0,.035), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.75));
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: none;
}

/* BG 3 — Teinte “SEP” (violet très discret) */
:where(.sep-manu--bg-sep){
  background:
    radial-gradient(780px 420px at 20% 0%, rgba(88,55,160,.10), transparent 62%),
    radial-gradient(680px 380px at 85% 22%, rgba(124,58,237,.08), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(252,250,255,.90));
  border: 1px solid rgba(88,55,160,.16);
  box-shadow: 0 10px 26px rgba(0,0,0,.04);
}


/* ==========================================================================
   Accessibilité / robustesse
   ========================================================================== */

:where(.sep-manu--plain){
  font-family: ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: .01em;
}

/* Mobile : un peu moins de padding sur les fonds */
@media (max-width: 576px){
  :where(.sep-manu){
    max-width: 100%;
  }
  :where(.sep-manu[class*="sep-manu--bg"]){
    --manu-pad-y: 1.0rem;
    --manu-pad-x: 1.05rem;
  }
}



/* READMORE : forcer l’affichage + look “bouton discret” */
.com-content-category-blog .readmore{
  display: block;
  margin: .5rem 0 0;
}
.com-content-category-blog .readmore a{
  display: inline-block;
  padding: .35rem .7rem;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 999px;
  text-decoration: none;
}