/* ============================================================
   OUNIMO — Pages de TEXTE (Démarche · Biographie · Contact)
   Même maison : on réutilise les variables, la barre et le pied
   de style.css. Ici le texte est le sujet : sobre, centré, aéré,
   sans cadre ni décor.
   ============================================================ */
@import url("style.css");

/* fond ivoire clair, comme une page d'ouvrage */
body.page-texte{
  background:linear-gradient(180deg,var(--best-wall1),var(--best-wall3));
  color:var(--ink);min-height:100vh}

.page{max-width:720px;margin:0 auto;
  padding:clamp(120px,18vh,200px) clamp(24px,7vw,40px) clamp(80px,12vh,140px)}

.page h1{font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(2.6rem,7vw,4.4rem);line-height:1.02;margin-bottom:10px}
.page .page-sub{font-family:var(--sans);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:44px}

/* corps de lecture en Inter */
.page p{font-family:var(--sans);font-size:18px;line-height:1.75;
  color:var(--ink-soft);margin-bottom:24px}

/* Paragraphes justifiés (pages Démarche & Biographie) — césure auto (lang="fr")
   pour éviter les grands espaces entre les mots */
.page--justif p{text-align:justify;-webkit-hyphens:auto;hyphens:auto}

/* citations verbatim : Cormorant italique, fine barre vermillon à gauche */
.page blockquote{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.45rem,3vw,1.9rem);line-height:1.4;color:var(--ink);
  margin:36px 0;padding:4px 0 4px 26px;border-left:2px solid var(--seal)}

/* ---------- Biographie : portrait flotté à droite ----------
   La page garde EXACTEMENT la même colonne (720px, centrée) que les autres
   pages de texte ; le portrait flotte à droite et le texte l'enveloppe. */
.page--bio::after{content:"";display:table;clear:both}   /* contient le flottant */
.bio-photo{float:right;width:clamp(220px,40%,300px);margin:6px 0 22px 34px}
.bio-photo img{width:100%;height:auto;display:block;border-radius:3px;
  background:#fff;aspect-ratio:1040/1300;object-fit:cover;
  box-shadow:0 22px 52px -26px rgba(40,30,15,.5)}
@media(max-width:680px){
  /* sur petit écran : portrait centré au-dessus du texte, pas de flottant */
  .bio-photo{float:none;width:100%;max-width:300px;margin:6px auto 26px}
}

/* ============================================================
   HABILLAGE DES PAGES DE TEXTE — trois ingrédients, monochrome
   (le vermillon reste la seule ponctuation de couleur) :
   1. la MATIÈRE du papier (grain + vignette douce),
   2. une ŒUVRE en filigrane sur tout le fond (calligraphie fantôme),
   3. une APPARITION en fondu au chargement + un COLOPHON de fin.
   ============================================================ */

/* — Matière du papier + réglages du filigrane —
   --wm-art     : l'œuvre affichée en filigrane (changer ici = changer le fond) ;
   --wm-opacity : son intensité (plus haut = plus présent). */
body.page-texte{position:relative;overflow-x:clip;
  --wm-art:url("../assets/oeuvres/En_Su_nombre__podemos_ver_al_felino_.webp");
  --wm-opacity:.09;
  background:
    radial-gradient(125% 85% at 50% -8%, var(--best-wall3), transparent 58%),
    linear-gradient(180deg,var(--best-wall1),var(--best-wall3));
  background-attachment:fixed}

/* une œuvre DIFFÉRENTE par page (à défaut, le filigrane par défaut ci-dessus s'applique) */
body[data-page="demarche"]  {--wm-art:url("../assets/oeuvres/1780161193628_Be_Water_my_friend_.webp")}
body[data-page="biographie"]{--wm-art:url("../assets/oeuvres/En_Su_nombre__podemos_ver_al_felino_.webp")}

/* — L'œuvre en filigrane : une calligraphie fantôme sur toute la page.
   multiply → le blanc du scan disparaît, il ne reste que les traits noirs ;
   fixée → le texte glisse par-dessus comme sur un mur peint. */
.page-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--wm-art) center/cover no-repeat;
  filter:grayscale(1);mix-blend-mode:multiply;opacity:var(--wm-opacity)}
body.page-texte::before{        /* vignette : coins assombris, centre éclairé */
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(135% 105% at 50% 32%, transparent 56%, rgba(60,44,22,.085) 100%)}
body.page-texte::after{         /* grain : le grain du papier */
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.05;mix-blend-mode:multiply;background-size:150px 150px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* le contenu repasse au-dessus de la matière (la barre garde son z-index:50) */
body.page-texte .page,
body.page-texte footer{position:relative;z-index:1}

/* — Apparition en fondu au chargement (la colonne de lecture monte doucement) — */
@keyframes pageRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.page{animation:pageRise .7s cubic-bezier(.22,.61,.36,1) both}
@media(prefers-reduced-motion:reduce){.page{animation:none}}

/* — Colophon : signe de fin discret (filet — losange vermillon — filet) — */
.colophon{display:flex;align-items:center;justify-content:center;gap:14px;
  margin:58px 0 0;clear:both}
.colophon::before,.colophon::after{content:"";width:48px;height:1px;
  background:var(--best-rule)}
.colophon .cdot{width:6px;height:6px;background:var(--seal);transform:rotate(45deg)}

/* ---------- Contact ---------- */
.contact-coords{font-family:var(--sans);font-size:18px;line-height:1.9;
  color:var(--ink);margin:8px 0 40px}
.contact-coords a{color:var(--seal);text-decoration:none}
.contact-coords a:hover{text-decoration:underline}
.contact-coords .muted{color:var(--whisper);font-size:15px}

.contact-form{display:flex;flex-direction:column;gap:18px;max-width:520px}
.contact-form label{font-family:var(--sans);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:7px}
.contact-form input,.contact-form textarea{width:100%;font-family:var(--sans);font-size:16px;
  color:var(--ink);background:#fff;border:1px solid var(--best-rule);border-radius:2px;
  padding:13px 15px;transition:border-color .25s}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--seal)}
.contact-form textarea{min-height:150px;resize:vertical}
.contact-form button{align-self:flex-start;font-family:var(--sans);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;background:var(--ink);border:none;border-radius:2px;
  padding:14px 30px;cursor:pointer;transition:background .25s}
.contact-form button:hover{background:var(--seal)}
.form-note{font-family:var(--sans);font-size:12px;color:var(--whisper);margin-top:4px}