/* ==================================================
   FORÊT DE SOIGNES
   VERSION DENSE
   Tiny Blue + archive scientifique
   ================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;1,400&family=Source+Sans+3:wght@300;400&display=swap');

/* ==================================================
   COULEURS
   ================================================== */

:root{

    --fond:#dce8f0;
    --fond-clair:#edf4f8;

    --texte:#2e5e78;
    --texte-fonce:#1a3a4a;

    --accent:#7aa8c4;
    --accent-clair:#b8cfe0;

    --gris:#8faebb;
}

/* ==================================================
   RESET
   ================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    background:var(--fond);

    color:var(--texte);

    font-family:'Source Sans 3',sans-serif;

    font-weight:300;

    font-size:12px;

    line-height:1.38;

    letter-spacing:.01em;

    overflow-x:hidden;
}

/* ==================================================
   SCÈNES
   ================================================== */

.scene{

    position:relative;

    min-height:auto;

    padding: 0;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

.scene::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(124, 152, 171, 0.92);

    z-index:0;
}

/* ==================================================
   COLONNE
   ================================================== */

.colonne{

    position:relative;

    z-index:1;

    width:240px;

    margin:auto;

    padding:1rem .6rem;
}

.ref {

    width: 400px;
}
/* ==================================================
   TITRES
   ================================================== */

h1{

    font-family:'Lora',serif;

    font-weight:400;

    font-size:1.25rem;

    line-height:1.1;

    color:var(--texte-fonce);

    margin-bottom:.8rem;
}

h2{

    font-family:'Lora',serif;

    font-weight:400;

    font-size:1rem;

    line-height:1.15;

    color:var(--texte-fonce);

    margin-bottom:.5rem;
}

h1 em,
h2 em{

    color:var(--accent);

    font-style:italic;
}

/* ==================================================
   TEXTE CONTINU
   ================================================== */

p{

    margin:0;

    max-width:none;

    text-wrap:pretty;

    hyphens:auto;
}

/* paragraphe suivant */

p + p{

    text-indent:1.2em;
}

/* ==================================================
   REPÈRES
   ================================================== */

.repere{

    font-size:.58rem;

    font-weight:400;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:var(--gris);

    margin-bottom:.3rem;
}

/* ==================================================
   LIENS
   ================================================== */

a{

    color:var(--accent);

    text-decoration:none;

    border-bottom:1px solid var(--accent-clair);

    transition:.25s ease;

    color: red;
}

a:hover{

    color:var(--texte-fonce);

    border-color:var(--accent);
}

/* ==================================================
   FAILLES
   ================================================== */

.faille{

    position:relative;

    height: 7px;px;

    overflow:hidden;

    background:var(--accent);

    margin:.4rem 0;

    transition:height .6s ease;
}

.faille:hover{

    height: 500px;px;
}

.faille-image{

    position:absolute;
    height: max-content;
    inset:0;
}

.faille-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    opacity:0;

    transition:opacity .4s ease;
}

.faille:hover img{

    opacity:.95;
}

/* ==================================================
   FILETS
   ================================================== */

.filet{

    width:18px;

    height:1px;

    background:var(--accent);

    margin:.5rem 0;
}

/* ==================================================
   CITATIONS
   ================================================== */

blockquote{

    margin:.4rem 0;

    padding-left:.8rem;

    border-left:1px solid var(--accent);

    font-style:italic;
}

/* ==================================================
   LÉGENDES
   ================================================== */

figcaption{

    font-size:.65rem;

    color:var(--gris);
}

/* ==================================================
   FOOTER
   ================================================== */

footer{

    text-align:center;

    padding:2rem 0 4rem;

    color:var(--gris);

    font-size:.65rem;

    letter-spacing:.2em;
}

/* ==================================================
   SÉLECTION
   ================================================== */

::selection{

    background:var(--accent);

    color:white;
}

/* ==================================================
   SCROLLBAR
   ================================================== */

::-webkit-scrollbar{
    width:6px;
}

::-webkit-scrollbar-track{
    background:var(--fond);
}

::-webkit-scrollbar-thumb{
    background:var(--accent-clair);
}

/* ==================================================
   FONDS OPTIONNELS
   ==================================================

#scene-1{
    background-image:url("img/fond1.jpg");
}

#scene-2{
    background-image:url("img/fond2.jpg");
}

#scene-3{
    background-image:url("img/fond3.jpg");
}

================================================== */

#scene-1 { 
    background-image: url(img/14.jpg);
}

#scene-2 { 
    background-image: url(img/.jpg);
}

#scene-3 { 
    background-image: url(img/13.jpg);
}
#scene-4 { 
    background-image: url(img/7.jpg);
}

#scene-5 { 
    background-image: url(img/12.jpg);
}

.t1{ margin-left:1em; display:block; }
.t2{ margin-left:-1em; display:block; }
.t3{ width:85%; display:block; }
.t4{ width:120%; display:block; }
.t5{ letter-spacing:.05em; }
.t6{ letter-spacing:-.03em; }
.t7{ opacity:.7; }
.t8{
    display:block;
    margin-top:.5em;
}

.t9{
    display:block;
    margin-top:-.4em;
}

.t10{
    display:block;
    margin-left:2em;
    width:70%;
}

.t11{
    display:block;
    margin-left:-1.5em;
}

.t12{
    font-size:.92em;
}

.t13{
    font-size:1.08em;
}
/* ==================================================
   MOBILE
   ================================================== */

@media (max-width:768px){

    body{
        font-size:11px;
    }

    .colonne{
        width:220px;
    }

    .scene{
        background-attachment:scroll;
    }

    .faille:hover{
        height:180px;
    }
}
```