/* réinitialisations de base, ne pas toucher */
* {
    margin: 0;
    padding: 0;
}

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    page-break-inside:avoid;
}
html {
  scroll-behavior: smooth;
}

/* liens vers la typo */
@font-face {
    font-family: 'Altera';
    src: url('fonts/altera-FuturaRenner-Light.otf') format('Opentype');
    font-weight: lighter;
}
@font-face {
    font-family: 'Altera';
    src: url('fonts/altera-FuturaRenner-Regular.otf') format('Opentype');
    font-weight: normal;
}

@font-face {
    font-family: 'Fraunces';
    src: url('fonts/Fraunces_72pt_SuperSoft-Regular.ttf') format('Truetype');
    font-weight: normal;
}
@font-face {
    font-family: 'Fraunces';
    src: url('fonts/Fraunces_72pt_SuperSoft-Italic.ttf') format('Truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Fraunces';
    src: url('fonts/Fraunces_72pt_SuperSoft-Light.ttf') format('Truetype');
    font-weight: lighter;
}
@font-face {
    font-family: 'Fraunces';
    src: url('fonts/Fraunces_72pt_SuperSoft-LightItalic.ttf') format('Truetype');
    font-weight: lighter;
    font-style: italic;
}

body {
    font-family: 'Altera';
    font-size: 40px;
    color: #E100DD;
    /* background-image: linear-gradient(lightpink, white); */
    animation: changebg 60s infinite;
    font-variant-numeric: ordinal;
}
/*@keyframes changebg {
    0% { background-color: white; }
    20% { background-color: #ffd4a2; } /*bisque*/
    /* 40% { background-color: #fcffa6; } fcfbd1 */
    /* 60% { background-color: #f7f3ef; } f7f3ef */
    /* 80% { background-color: #bde0ff; } aliceblue */
    /* 100% { background-color: white; }  */
/* } */
.median {
    color: transparent;
}


h1 {
    color: #E100DD;
    font-size: 100px;
    font-weight: lighter;
}
h2 {
    font-size: 20pt;
    letter-spacing: 1mm;
    margin-top: 6mm;
    font-weight: lighter;
    page-break-before: always;
    text-transform: uppercase;
}
h3 {
    color: #E100DD;
    font-size: 17pt;
    display: inline;
    line-height: 55pt;
    top: 10pt;
    left: -5pt;
    font-weight: normal;
    margin-top: 36pt;
    margin-bottom: 8pt;
    border: 2px solid #E100DD;
    border-radius: 40px;
    padding: 3pt 6pt 0 6pt;
    background-color: white;
    position: relative;
}
.h3-bubble1, .h3-bubble2 {
    border: 2px solid #E100DD;
    border-radius: 40px;
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align: sub;
    background-color: white;
    position: absolute;
    bottom: 2px;
    right: -22px;
}
.h3-bubble2 {
    width: 10px;
    height: 10px;
    bottom: -5px;
    right: -34px;

}
h4 {
    font-family: "Altera";
    font-weight: normal;
    font-size: 18pt;
    line-height: 19pt;
    text-align: center;
    margin-top: 24pt;
    margin-bottom: 8pt;

}
.exergue h4, .encadre h4 {
    margin-top: 0;
    margin-bottom: 17px;
    background-color: white;
}
a {
    text-decoration-style: wavy;
    text-decoration-thickness: 1.5pt;
}
p {
    font-family: "Altera";
    font-weight: normal;
    padding-top: 8pt;
    font-size: 16pt;
    line-height: 18pt;
}
i, .temoignage p {
    font-family: "Fraunces";
    font-style: italic;
    font-weight: lighter;
    letter-spacing: 0.3pt;

}

/*COULEURS*/
a, p , h4, ul li, .couverture, .exergue, .pastille .paysage ul li, ul.liste-bullet li {
   color:#07897E; /*vert*/
}
td {
    border: 1px solid #07897E;
}
text {
    fill: #07897E;
}
img {
    filter: grayscale(0%) contrast(40%) hue-rotate(70deg) saturate(100);
}
.encadre {
    border: 2px dashed #07897E;
}
.encadre ul li::before {
    filter: grayscale(0%) contrast(34%) hue-rotate(-89deg) saturate(5);
}
.logos img, .img-teal {
    filter: grayscale(0%) contrast(28%) hue-rotate(-450deg) saturate(7);
}

/* Masters Riso */
.transp {
    color: transparent;
}
.opacity-0 {
    opacity: 0;
}
h3.transp div {
    border: 2px solid transparent;
}
.text-svg-transp .vector-text {
    fill: transparent; 
}
.transp-border-1px {
    border: 1px solid transparent;
}
.transp-border-2px {
    border: 2px solid transparent !important;
}
/* NOIR */
.bord-noir-2px, .bord-noir-2px div, .exergue.bord-noir-2px {
    border: 2px solid black;
}
.txt-noir, .encadre ul li.txt-noir, ul.liste-bullet li.txt-noir {
    color: black;
    opacity: 100;
}
.txt-noir div {
    color: black;
    opacity: 100;
}
.constellation.txt-noir div {
    border: 1px solid transparent;
}
.bord-noir, table td.bord-noir {
    border: 1px solid black;
}
.bord-points-noir, .encadre.bord-points-noir {
    border: 2px dashed black;
}
.encadre ul li.filtre-noir:before, ul.liste-bullet li.filtre-noir:before, .logos img.filtre-noir, .img-teal.filtre-noir, .frisson-img.filtre-noir, .backcover img.filtre-noir {
    filter: grayscale(100%) contrast(95%) hue-rotate(100deg) saturate(100);
}
.text-svg-noir .vector-text {
    fill: black; 
}



/* TOOLS */
.tools {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 100000;
}
.riso-rose, .riso-teal {
    background-color: pink;
    width: 10mm;
    height: 10mm;
    border-radius: 5mm;
}
.riso-teal {
    background-color: lightseagreen;
}




section {
    padding-top: 8pt;
}
section p {
    padding-top: 0;
}
ul li {
    font-size: 16pt;
    line-height: 18pt;
}
.liste-bullet {
    padding-left: 10mm;  
}
ul.liste-bullet li {
    list-style: none;
}
ul.liste-bullet li::before {
    content:url('bullet.svg'); 
    padding-right: 10px;
    filter: grayscale(0%) contrast(34%) hue-rotate(-89deg) saturate(5)
}
ul.liste-bullet.droits li {
    margin-bottom: 18pt;
}
.encadre ul.questions-choix li, .encadre ul.questions-medecin li {
    margin-bottom: 28pt;
} 
.encadre ul.questions-psy li {
    margin-bottom: 58pt;
}
.paysage ul li:nth-child(4n+1)::before {
    content:url('glyphe-taches.svg');
    padding-right: 10px;
}
.paysage ul li:nth-child(4n+2)::before {
    content:url('glyphe-spots.svg');
    padding-right: 10px;
}
.paysage ul li:nth-child(4n+3)::before {
    content:url('glyphe-taches-3.svg'); 
    padding-right: 10px;
}
.paysage ul li:nth-child(4n+4)::before {
    content:url('glyphe-taches-4.svg'); 
    padding-right: 10px;
}
ul.etoiles li:nth-child(4n+1)::before {
    content:url('glyphe-taches.svg');
    padding-right: 10px;
    bottom: -5px;
}
ul.etoiles li:nth-child(4n+2)::before {
    content:url('glyphe-spots.svg');
    padding-right: 10px;
}
ul.etoiles li:nth-child(4n+3)::before {
    content:url('glyphe-taches-3.svg'); 
    padding-right: 10px;
}
ul.etoiles li:nth-child(4n+4)::before {
    content:url('glyphe-taches-4.svg'); 
    padding-right: 10px;
}
.liste-NB {
    margin-left: 10mm;
}
ul.liste-bullet li.liste-NB::before, li.liste-NB::before {
    content: none;
}
ul.etoiles {
    margin: 0 5mm;
}
ul.etoiles li {
    margin-bottom: 6mm;
}

.paysage h4 {
    margin-bottom: 2mm;
}

table {
    margin: 16pt 0;
    width: 127mm;
}
table p {
    width: auto;
    padding-top: 5pt;
    padding-bottom: 2pt;
}
table tr.debut-table p {
    letter-spacing: 2pt;
    font-weight: bold;
}
table td:first-of-type p {
    letter-spacing: 2pt;
    font-weight: bold;
}
tr:nth-of-type(2n+2) {
    -webkit-transform:skew(15deg);
	-moz-transform:skew(15deg);
	-o-transform:skew(15deg);
	tranform:skew(15deg);
}
tr:nth-of-type(2n+1) {
    -webkit-transform:skew(-15deg);
	-moz-transform:skew(-15deg);
	-o-transform:skew(-15deg);
	tranform:skew(-15deg);
}
td {
    padding-left: 2mm;
}

/* TEXT ON SVG CURVE ^_^ */
svg {
    height: 300px;

}
path {
    fill: transparent;

}
text {
    font-size: 11pt;
    font-weight: bold;
/*    filter: grayscale(0%) contrast(100%) hue-rotate(0deg) saturate(20);*/
}

.pages {
    padding: 6mm 6mm 6mm 10mm;
}
.page {
    margin: -6mm;
    padding: 6mm;
    position: relative;
}



.pages-preview {
    width: 148mm;
    overflow: hidden;
}
.page.preview {
    height: 210mm;
    width: 148mm; border: 2px solid white;
}
.pages-preview p {
    width: 120mm;
}
.pages-preview table {
    width: 120mm;
}
.pages-preview table p {
    width: auto;
}
.preview .titre-infos-2 {
    position: absolute;
    bottom: 6mm;
    left: 6mm;
}

.exergue {
    font-size: 21pt;
    line-height: 22pt;
    padding: 2mm 4mm 2mm 4mm;
    border: 2px solid #E100DD;
    border-radius: 5mm;
    -webkit-transform:rotate(-7deg);
	-moz-transform:rotate(-7deg);
	-o-transform:rotate(-7deg);
	tranform:rotate(-7deg);
    margin: 16mm 10% 24mm 10%;
    width: 100mm;
    background-color: white;
}
.exergue:nth-of-type(2n+1) {
    -webkit-transform:rotate(5deg);
	-moz-transform:rotate(5deg);
	-o-transform:rotate(5deg);
	tranform:rotate(5deg);
    background-color: white;
}
.exergue  p {
    width: 100%;
    background-color: white;
}
.exergue.soutenir {
    position: absolute; 
    top: 5mm; 
    left: 10mm; 
    background-color: white; 
    z-index: 2;
}
.exergue.gauche {
    -webkit-transform:rotate(-7deg);
	-moz-transform:rotate(-7deg);
	-o-transform:rotate(-7deg);
	tranform:rotate(-7deg);
    background-color: white;
}
.temoignage {
    page-break-after: always;
    margin-top: 8mm;
}

.encadre {
    text-decoration-thickness: 2pt;
}
.encadre {
    padding: 4mm 5mm 5mm 5mm;
    border-radius: 5mm;
    page-break-before: always;
    background-color: white;
}
.encadre ul li::before {
    content:url('bulle.svg'); 
    padding-right: 10px;
    background-color: transparent;
}
.encadre ul li {
    margin-bottom: 10pt;
    list-style: none;
    background-color: white;
}
.encadre.a-mediter ul li {
    margin-bottom: 32pt;
    background-color: white;
}
.encadre.liste-questions-prescripteurice ul li {
    margin-bottom: 6mm;
}
.encadre.mes-questions ul li {
    margin-bottom: 60mm;
}


/* COUVERTURE */
div.titre-infos-1, div.titre-infos-2 {
    font-size: 18pt;
    line-height: 20pt;
    width: 80mm;
}
.titre-visuels {
}
.titre-visuels img {
    position: relative;
    width: 80mm;
    cursor: move;
}

.pastille {
    border: 2px solid #2a1477;
    border-radius: 4mm;
    display: inline;
    padding: 2mm 2mm 1mm 2mm;
}

.car p:nth-of-type(2n+2) {
    -webkit-transform:skew(15deg);
	-moz-transform:skew(15deg);
	-o-transform:skew(15deg);
	tranform:skew(15deg);
    margin-left: 5mm;
    margin-bottom: 5mm;
}
.car p:nth-of-type(2n+1) {
    -webkit-transform:skew(-15deg);
	-moz-transform:skew(-15deg);
	-o-transform:skew(-15deg);
	tranform:skew(-15deg);
    margin-left: 5mm;
    margin-bottom: 5mm;
}
.constellation {
    text-align: center;
    margin: 10mm 0 0 3mm;
}
.constellation div {
    display: inline-block;
    margin: 18mm 8mm 0 0;
    font-size: 25pt;
    line-height: 25pt;
}
.constellation div:nth-of-type(2n+2) {
    -webkit-transform:rotate(8deg);
    -moz-transform:rotate(8deg);
    -o-transform:rotate(8deg);
    tranform:rotate(8deg);
}
.constellation div:nth-of-type(2n+1) {
    -webkit-transform:rotate(-8deg);
    -moz-transform:rotate(-8deg);
    -o-transform:rotate(-8deg);
    tranform:rotate(-8deg);
}

.sommaire {
    width: 80mm;
    position: absolute; 
    z-index: 1; 
    transform: rotate(-10deg);
}
.sommaire tr {
    background-color: white; 
}
.sommaire tbody tr:first-of-type p {
    letter-spacing: 0;
    font-weight: normal;
}
.sommaire tbody tr td:first-of-type p {
    font-weight: bold;
    margin-top: -2mm;
}
.sommaire a {
    text-decoration: none;
}
.frisson2 {
    position: absolute;
    width: 90mm; 
    top: 80mm; 
    left: 30mm;
}


/* RESPONSIVE */

/* ÉCRAN SEULEMENT */
@media screen {
    .print-only {
        display: none;
    }
    h2, h3, h4, p {
        max-width: 900px;
    }
    h2 {
        padding-top: 50px;
        margin-top: 50px;
        margin-bottom: 50px;
    }h3, h4 {
        margin-top: 100px;
        margin-bottom: 50px;
    }
    h3 {
        font-size: 25px;
        line-height: 90pt;
    }
    .encadre {
        margin: 30px 0 30px 15%;
        background-color: white;
    }
    p, .encadre, .temoignage .exergue p {
        font-size: 25px;
        line-height: 28px;
        max-width: 900px;
        font-family: "Altera";
        font-weight: normal;
    }
    ul li {
        font-size: 25px;
        line-height: 28px;
        max-width: 600px;
    }
    .page {
        height: 210mm;
    }
    .exergue.soutenir {
        position: relative;
        top: 0;
        left: 0;
    }
    .sommaire {
        transform: none;
        position: fixed;
        top: 30px;
        right: 30px;
    }
    .menu-show, .sommaire p {
        font-size: 20px;
        cursor: pointer;
        padding: 0;
    }
    .menu-show {
        position: fixed; 
        top: 20px; 
        right: 20px; 
        display: none;
        font-size: 25px;
    }
    .temoignage .exergue p {
        margin: auto;
    }
    .temoignage p {
        font-size: 30px;
        line-height: 34px;
        margin: 30px 0 30px 15%;
        max-width: 900px;
    }
    .temoignage.thyroide, .temoignage.bequilles, .temoignage.ajuster, .temoignage.tenir, .temoignage.a-vie, .temoignage.egalite, .temoignage.effets-secondaires {
        transform: rotate(-2deg);
        margin-top: 100px;
        margin-bottom: 100px;
    }
    p.temoignage-vagues {
        margin-top: 40mm;
    }
    .encadre.encadre.groupe p {
        margin-top: 30px;
    }
    .constellation, .backcover {
        max-width: 900px;
    }
    .frisson2 {
        position: relative;
        top: 0; 
        left: 0;
    }

    
}

/* ÉCRAN (VALEURS MINIMUM) */
@media screen and (min-width: 1000px) {
    table {
        margin: 0;
    }

}
/* ÉCRAN (VALEURS MAXIMUM) */
@media screen and (max-width: 1000px) {
    .menu-show {
        display: block;
    }
    .sommaire {
        display: none;
    }
    h3 {
        line-height: 20pt;
        display: block;
        padding: 8pt 10pt 6pt 15pt;
        max-width: 80%;
    }
    .titre-visuels img {
        position: relative;
    }
    .pages {
        max-width: 100%;
        overflow: hidden;
    }
}

@media screen and (max-width: 500px) {
    /* .h3-bubble1, .h3-bubble2 {
        display: none;
    } */
    .titre-extra-visuels {
        display: none;
    }
    .exergue {
        max-width: 80%;
    }
    .pages {
        max-width: 100%;
        overflow: hidden;
    }
}

/* IMPRESSION */

@media print {
    .screen-only {
        display: none;
    }
    body {
        text-align: left;
        animation: none;
        background-color: white;
    }
    a {
        color: #07897E; /*vert*/
        text-decoration-style: dotted;
        text-decoration-thickness: 2pt;
    }
    p, ul li {
        width: 120mm;
    }
    p {
        font-size: 16.5pt;
        line-height: 18pt;
    }
    p i {
        font-size: 16.8pt;
        line-height: 18pt;
    }
    .pages {
        width: 148mm;
        overflow: hidden;
    }
    .page {
        height: 210mm;
    }
    .top6 {
        margin-top: 6mm;
    }
    .titre-infos-2 {
        position: absolute;
        bottom: 6mm;
        left: 6mm;
    }
    .titre-visuels div span:first-of-type {
        color: transparent !important;
    }
    .titre-visuels div span:nth-of-type(2) {
        display: none;
    }
    table p {
        width: auto;
    }
    .sommaire {
        top: 60mm; 
        left: 15mm;
    }
    .temoignage p {
        width: 100%;
        font-size: 18pt;
        line-height: 20pt;
    }
    .temoignage-vagues, .temoignage-mouvement {
        max-width: 115mm;
        margin-left: 5mm;
    }
    .temoignage-vagues {
        margin-top: 30mm;
    }
    p.temoignage-vrais-soins {
        font-size: 21pt;
        line-height: 23pt;
        margin-top: 6mm;
        margin-left: 5mm;
        width: 120mm;
    }
    .temoignage.thyroide, .temoignage.bequilles, .temoignage.ajuster, .temoignage.tenir, .temoignage.a-vie, .temoignage.egalite, .temoignage.effets-secondaires {
        transform: rotate(-5deg);
        font-size: 21pt;
        line-height: 23pt;
        margin-top: 12pt;
        margin-left: 5mm;
        width: 120mm;
    }
    .temoignage.ajuster {
        margin-top: 20mm;
    }
    .temoignage.a-vie {
        margin-top: 60pt;
    }
    .temoignage.bequilles {
        margin-top: 20mm;
    }
    .temoignage.thyroide, .temoignage.effets-secondaires {
        margin-top: 16mm; 
        margin-left: 8mm; 
        width: 110mm;
    }
    .exergue {
        font-size: 17pt;
        line-height: 18pt;
    }
    .exergue-groupe {
        padding-top: 3mm;
        padding-bottom: 4mm;
        margin-top: 6mm;
        margin-bottom: 0mm;
    }
    .exergue-groupe:first-of-type {
        margin-top: 10mm;
    }
    .exergue-groupe.n3 {
        margin-top: 30mm;
        page-break-before: always;
    }
    .exergue-groupe.n5 {
        margin-top: 8mm;
        page-break-before: always;
    }
    .exergue-groupe.n8 {
        margin-top: 8mm;
        page-break-before: always;
    }
    .exergue-groupe.n9 {
        margin-top: 8mm;
        page-break-before: always;
        width: 110mm;
    }
    .exergue-groupe.n10 {
        width: 110mm;
    }
    .exergue-groupe.n11 {
        margin-top: 30mm;
        page-break-before: always;
    }
    .exergue.soutenir {
        font-size: 17pt;
        line-height: 18pt;
    }
    .exergue.aigu {
        -webkit-transform:rotate(-7deg);
        -moz-transform:rotate(-7deg);
        -o-transform:rotate(-7deg);
        tranform:rotate(-7deg);
        margin-top: 2mm;
        margin-bottom: 5mm;
    }
    .exergue.consideration, .exergue.temps {
        position: absolute;
        height: 120mm;
        width: 80mm;
        background-color: white;
        padding: 6mm;
    }
    .exergue.temps {
        -webkit-transform:rotate(7deg);
        -moz-transform:rotate(7deg);
        -o-transform:rotate(7deg);
        tranform:rotate(7deg);
        top: -10mm;
        left: 30mm;
    }
    .exergue.consideration {
        top: 50mm;
        left: -10mm;
    }
    .exergue.consideration p, .exergue.temps p {
        font-size: 19pt;
        line-height: 22pt;
        background-color: white;
    }
    .encadre {
        max-width: 130mm;
        margin: 8mm -1mm 0 -1mm;
        height: 188mm;
    }
    .temoignage .exergue p {
        margin: auto;
        font-family: "Altera";
        font-weight: normal;
    }
    .liste-bullet {
        padding-top: 8pt;
        padding-left: 0;
    }
    .logos img {
        width: 25mm !important;
    }
    .temoignage.doute {
        margin-top: 4mm;
        padding-right: 8mm;
    }
    .temoignage.doute p {
        font-size: 16pt;
        line-height: 18pt;
    }
    .colophon p {
        font-size: 14pt;
        line-height: 16pt;
    }
}

@page {
    size: 148mm 210mm;
    margin: 8mm;
}