/* ═══════════════════════════════════════════════
   l'arbre à idées — style.css (v0.2 aquarelle)
   papier clair · verts d'eau · veines rouges · witchy
   polices web-safe volontairement (esprit 2000s)
   ═══════════════════════════════════════════════ */

:root{
  --papier:    #06082c;   /* papier aquarelle */
  --encre:     #fff99e;   /* texte */
  --feuillage: #4d7a52;
  --feuillage2:#6f9c72;
  --nuageblue: #a9c6de;
  --turquoise: #7fb5ae;
  --ecorce:    #8a7362;
  --terre:     #6e5138;
  --sang:      #d8281c;   /* les nœuds */
  --veine:     #7a1410;   /* les fils qui relient */
  --sortilege: #8f6bb8;   /* violet sorcière, à petite dose */
}

*{ box-sizing:border-box; }

body.papier{
  margin:0;
  background-color:var(--papier);
  /* grain de papier fait maison */
  background-image:
    radial-gradient(1px 1px at 17% 23%, rgba(46,58,47,.10) 60%, transparent),
    radial-gradient(1px 1px at 64% 71%, rgba(46,58,47,.08) 60%, transparent),
    radial-gradient(1px 1px at 83% 34%, rgba(46,58,47,.09) 60%, transparent),
    radial-gradient(1px 1px at 38% 88%, rgba(46,58,47,.08) 60%, transparent);
  background-size:230px 230px;
  color:var(--encre);
  font-family:Verdana, Geneva, sans-serif;
  font-size:13px;
  line-height:1.75;
}

a{ color:var(--veine); }
a:hover{ color:var(--sang); background:rgba(216,40,28,.07); }
a:focus-visible{ outline:1px dashed var(--sang); outline-offset:2px; }
::selection{ background:var(--sang); color:var(--papier); }

/* ─── bandeau & coins ─── */
.bandeau{
  display:block;
  border-top:1px dashed var(--encre);
  border-bottom:1px dashed var(--encre);
  padding:3px 0;
  font-family:"Courier New", monospace;
  font-size:11px;
  color:var(--encre);
  background:rgba(77,122,82,.06);
}
.coin{
  position:absolute;
  font-family:"Courier New", monospace;
  font-size:10px;
  color:var(--ecorce);
  padding:6px 10px;
}
.coin-hg{ left:4px; top:28px; transform:rotate(-2deg); }
.coin-hd{ right:4px; top:28px; transform:rotate(1.5deg); }

/* ─── en-tête ─── */
.entete{ text-align:center; margin:34px 10px 0; }
.titre-site{
  font-family:"Times New Roman", Times, serif;
  font-style:italic;
  font-weight:normal;
  font-size:46px;
  letter-spacing:3px;
  margin:0;
  color:var(--encre);
  text-shadow:2px 2px 0 rgba(216,40,28,.18);
  transform:rotate(-1deg);
}
.sous-titre{
  font-family:"Courier New", monospace;
  font-size:11px;
  color:var(--ecorce);
  margin:6px 0 0;
}

/* ─── l'accueil : la scène zoomable ─── */
.accueil{
  height:100vh;
  overflow:hidden;
}
.fond{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
  cursor:grab;
  touch-action:none;         /* le doigt sert à glisser, pas à scroller */
}
.fond.en-drag{ cursor:grabbing; }

/* marquee à nu, en haut, sans fond */
.flottant-marquee{
  position:fixed; top:0; left:0; right:0; z-index:2;
  border:none; background:none;
}

/* titre POST / SENTIENCE fixé en haut à droite */
.lune-titre{
  position:fixed;
  top:10px; left:-80px;     /* sa position : à régler */
  width:350px;            /* sa taille : à régler */
  height:auto;
  z-index:1;              /* 1 = derrière le titre (qui est à 2) */
  pointer-events:none;    /* on peut cliquer à travers */
}

.titre-post{
  position:fixed;
  top:10px; right:-50px;
  z-index:2;
}
.titre-post img{
  display:block;
  width:400px;      /* la taille de ton titre : règle ici */
  height:auto;
}
.titre-post:hover{ color:var(--sang); background:none; text-shadow:2px 2px 0 rgba(46,58,47,.5); }

/* pied de page posé sur l'herbe, dans le SVG */
.pied-svg{
  fill:var(--encre);
  font-family:"Courier New", monospace;
  font-size:8px;
  text-anchor:middle;
  opacity:.85;
}

/* petits écrans : image entière en bannière, pas de plein écran rogné */
@media (max-width:700px){
  .accueil{ height:auto; overflow:auto; }
  .fond{
    position:static;
    width:100%;
    height:auto;
    aspect-ratio:1000/565;
  }
  .flottant{ position:static; pointer-events:auto; }
}

/* ─── les étoiles (star.png) ─── */
.noeud{
  cursor:pointer;
  pointer-events:bounding-box;   /* toute la zone du lien réagit, pas juste les pixels dessinés */
}
.noeud image, .noeud text{ pointer-events:all; }  /* filet de sécurité vieux navigateurs */
.noeud image{ transition:opacity .15s; }
.noeud:hover image{ opacity:.7; }

.legende{
  fill:var(--encre);
  font-family:"Courier New", monospace;
  font-size:6px;              /* minuscule : on zoome pour lire */
  font-weight:normal;
  text-anchor:middle;
  opacity:1;                  /* toujours visible */
}
.noeud:hover .legende{ fill:var(--sang); }

/* le cœur : légende un peu plus grande, en italique */
.leg-coeur{
  font-family:"Courier New", monospace;
  font-weight:normal;
  text-anchor:middle;
  opacity:1;
  font-size:10px;
  fill:var(--encre);
}

/* ─── pied de page ─── */
.pied{
  text-align:center;
  font-family:"Courier New", monospace;
  font-size:10px;
  color:var(--encre);
  margin-top:16px;
  padding:14px 10px 30px;
}
.rouge-glow{ color:var(--sang); text-shadow:0 0 5px rgba(216,40,28,.6); }

/* ═══════════════════════════════════════════════
   pages "réflexion" & manifeste — pleine largeur,
   deux colonnes, rien de tordu, collage d'images
   ═══════════════════════════════════════════════ */

/* fond manifesto */

body.fond-internet{
  background:url('internet.png') center / cover no-repeat fixed;
}
.fond-internet .page{
  background:rgba(251,250,245,0);
}
.fond-internet .col p,
.fond-internet .page .strate{
  display:inline;
  background:rgba(0,0,0,.6);
  color:var(--encre);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  padding:3px 6px;
  line-height:2;
}
.fond-internet .col p::after{
  content:"";
  display:block;
  height:14px;      /* l'espace entre deux paragraphes : à régler */
}



.page{
  position:relative;              /* indispensable pour coller des images dessus */
  max-width:none;
  margin:18px 24px 40px;
  padding:26px 34px 34px;
  background:var(--papier);
  border:none;
  box-shadow:none;
  font-size:14px;                 /* corps de texte, ajuste ici */
}

/* ─── les deux colonnes du texte ───
   <div class="colonnes">
     <div class="col"> …première moitié du texte… </div>
     <div class="col col-basse"> …seconde moitié… </div>
   </div>                                                        */
.colonnes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
}
.col-basse{ padding-top:110px; }   /* la 2e colonne commence plus bas : règle ici */

/* ─── le trou rond entre les colonnes ───
   un demi-cercle invisible dans chaque colonne, le texte coule autour.
   même margin-top des deux côtés = le rond est aligné.               */
.trou-gauche{
  float:right;
  width:110px; height:220px;
  margin-top:120px;               /* hauteur du rond : règle ici (des deux côtés !) */
  shape-outside:circle(110px at 110px 110px);
}
.trou-droit{
  float:left;
  width:110px; height:220px;
  margin-top:10px;                /* 120 - 110 de padding-top de la colonne basse */
  shape-outside:circle(110px at 0 110px);
}

/* titre texte (sobre) — remplaçable par un PNG via .titre-png */
.page h1{
  font-family:"Times New Roman", Times, serif;
  font-weight:normal;
  font-style:normal;
  font-size:26px;
  letter-spacing:1px;
  color:var(--encre);
  text-shadow:none;
  margin:0 0 10px;
}
/* titre en image : <img class="titre-png" src="montitre.png" alt="titre"> */
.titre-png{
  display:block;
  max-width:65%;
  height:auto;
  margin:0 0 14px;
}

.page h2{
  font-family:"Courier New", monospace;
  font-size:13px;
  color:var(--encre);
  font-weight:bold;
  margin:20px 0 8px;
}
.page h2::before{ content:"✶ "; color:var(--encre); }

.strate{
  font-family:"Courier New", monospace;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--encre);
  margin:0 0 18px;
}

.page blockquote{
  margin:16px 6px;
  padding:8px 14px;
  border-left:3px double var(--encre);
  color:#4a5a4b;
  font-style:italic;
  break-inside:avoid;             /* pas de citation coupée entre deux colonnes */
}
.page blockquote cite{ display:block; font-style:normal; font-size:11px; color:var(--ecorce); margin-top:4px; }

.note-marge{
  font-family:"Courier New", monospace;
  font-size:11px;
  color:var(--encre);
  background:rgba(143,107,184,.07);
  border:1px dotted var(--encre);
  padding:8px 12px;
  margin:16px 0;
  break-inside:avoid;
}

.separateur{
  text-align:center;
  color:var(--encre);
  letter-spacing:8px;
  margin:24px 0;
}

/* ─── images ───
   1) DANS LE TEXTE : <img class="illustration" src="monimage.png">
      -> prend la largeur de la colonne, coule avec le texte           */
.illustration{
  display:block;
  width:100%;
  height:auto;
  margin:14px 0;
  break-inside:avoid;
}

/* 2) COLLÉE PAR-DESSUS (overlay librement positionnable) :
      <img class="colle" src="monimage.png" style="top:300px; left:45%; width:220px;">
      -> position réglée au cas par cas dans le style="" (voir tuto)   */
.colle{
  position:absolute;
  z-index:3;
  height:auto;
}
/* variante : collée à cheval sur le bord droit du cadre */
.colle-droite{
  position:absolute;
  z-index:3;
  right:-30px;                    /* dépasse du cadre, comme le croquis */
  height:auto;
}

/* liens de bas de page vers les réflexions voisines */
.veines-liees{
  margin-top:30px;
  padding-top:14px;
  font-family:"Courier New", monospace;
  font-size:12px;
  color:var(--encre)
}
.veines-liees a{ display:inline-block; margin:2px 8px; }

@media (max-width:700px){
  .page{ margin:12px 8px; padding:18px 16px; }
  .colonnes{ grid-template-columns:1fr; gap:0; }
  .col-basse{ padding-top:0; }
  .trou-gauche, .trou-droit{ display:none; }
  .titre-png{ max-width:90%; }
  .page h1{ font-size:30px; }
  .colle, .colle-droite{ display:none; }   /* le collage libre gêne sur petit écran */
}