@charset "UTF-8";
/* 1- abstract */
:root {
  --couleur-nuage: #ECEFF1;
  --couleur-accent: #badaff;
  --couleur-wrapper: #aaccff;
  --couleur-hover: #DADADB;
  --couleur-erreur: #BB0022;
  --couleur-info: #0022BB;
  --couleur-success: #00BB22;
  --largeur-wrapper: 100vw;
  --ecart-ombre: 0.5rem; }

@media screen and (min-width: 721px) {
  :root {
    --largeur-wrapper: 64rem; } }
/* 3- base */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box; }

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0; }

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
:where(ul[class], ol[class]) {
  list-style: none; }

/* Remove default padding */
:where(ul[class],
ol[class]) {
  margin: 0;
  padding: 0; }

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth; }

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5; }

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto; }

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block; }

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit; }

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important; } }
/* Débuggueur CSS  */
/* * {
    outline: 1px solid red;
  }
*/
html {
  font-size: .625em;
  /* fallback IE8+ */
  font-size: calc(1em * .625);
  /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */ }

/* Remove focus for mouse users */
:focus:not(:focus-visible) {
  outline: none; }

/* Set core body defaults */
body {
  font-size: 1.6rem; }

/* Set text selection */
::-moz-selection {
  color: #000;
  background-color: #fd0; }

::selection {
  color: #000;
  background-color: #fd0; }

/* Set cursor pointer */
label[for],
button,
input[type="submit"],
select {
  cursor: pointer; }

/* Remove font style on address */
address {
  font-style: normal; }

/* Text meant only for screen readers. */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  width: 1px;
  position: absolute;
  white-space: nowrap; }

/* Image replacement technique 2012 H5BP  - https://css-tricks.com/the-image-replacement-museum/ */
.ir {
  font: 0/0 a;
  color: transparent;
  border: 0;
  text-shadow: none; }

/* Print external URLs */
@media print {
  a {
    text-decoration: underline; }

  a[href]:not([href^='#'])::after {
    content: "(" attr(href) ")"; } }
/* ms-madi-regular - latin */
@font-face {
  font-family: 'Ms Madi';
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/ms-madi-v2-latin-regular.woff2") format("woff2"), url("../fonts/ms-madi-v2-latin-regular.woff") format("woff"); }
body {
  font-size: 1.8rem;
  font-family: "Fira Sans", sans-serif;
  cursor: default; }

h1 {
  font-family: 'Ms Madi', serif;
  font-size: 6.4rem; }

.text-center {
  text-align: center; }

/* 4- layout */
.titreContainer {
  width: var(--largeur-wrapper);
  overflow: hidden; }

.nuage {
  width: 100%; }

.corpsNuage {
  position: absolute;
  width: 100%;
  height: 15rem;
  background-color: var(--couleur-nuage);
  border-radius: 0 0 0 20rem;
  box-shadow: var(--ecart-ombre) var(--ecart-ombre) rgba(0, 0, 0, 0.2); }

.bumpANuage {
  position: absolute;
  height: 30rem;
  width: 30rem;
  top: -2rem;
  right: -10rem;
  background-color: var(--couleur-nuage);
  border-radius: 50%;
  box-shadow: var(--ecart-ombre) var(--ecart-ombre) rgba(0, 0, 0, 0.2); }

.bumpBNuage {
  position: absolute;
  height: 12rem;
  width: 12rem;
  top: 7rem;
  right: 16rem;
  background-color: var(--couleur-nuage);
  border-radius: 50%;
  box-shadow: var(--ecart-ombre) var(--ecart-ombre) rgba(0, 0, 0, 0.2); }

.bumpCNuage {
  position: absolute;
  height: 21rem;
  width: 25rem;
  top: 3rem;
  right: 25rem;
  background-color: var(--couleur-nuage);
  border-radius: 50%;
  box-shadow: var(--ecart-ombre) var(--ecart-ombre) rgba(0, 0, 0, 0.2); }

.icone {
  transition: all 1s ease-in-out;
  background-image: url("../images/ltds-col2.svg");
  background-size: cover;
  border-radius: 50%;
  box-shadow: var(--ecart-ombre) var(--ecart-ombre) rgba(0, 0, 0, 0.2); }

.icone:hover {
  background-image: url("../images/ltds-color.svg");
  transform: rotate(0deg); }

.boutonNuage {
  display: inline-block; }

.topicone {
  width: 10rem;
  height: 10rem; }

@media screen and (max-width: 720px) {
  .titreContainer {
    height: 100%; }

  .nuage {
    position: absolute;
    top: 0;
    left: 0; }

  .corpsNuage {
    width: 120%; }

  .menu {
    position: relative;
    width: 100%; }

  .pluie {
    visibility: hidden; }

  .topicone {
    display: inline-block; }

  .titre {
    display: inline-block; }

  .imgME {
    width: 7rem; }

  .tritop {
    position: relative;
    top: 0.5rem;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%; } }
/* computer screen */
@media screen and (min-width: 721px) {
  :root {
    --largeur-wrapper: 64rem; }

  .titreContainer {
    position: sticky;
    z-index: 100;
    top: 0;
    height: 30rem; }

  .menu {
    position: absolute;
    top: 10rem;
    right: 1rem; }

  .topicone {
    position: absolute;
    top: 2.5rem;
    left: 0.5rem;
    transform: rotate(-20deg); }

  .titre {
    position: absolute;
    left: 11.5rem;
    top: 2rem; }

  .imgME {
    height: 4.8rem; } }
.wrapper {
  min-height: 100vh;
  background-color: var(--couleur-wrapper);
  position: absolute;
  text-align: center;
  width: var(--largeur-wrapper); }

@media screen and (max-width: 720px) {
  .wrapper {
    left: 0;
    right: 0;
    top: 0;
    overflow: clip; } }
@media screen and (min-width: 721px) {
  .wrapper {
    transform: translateX(-50%);
    margin: auto;
    left: 50%; } }
.clearfix {
  margin-top: 3rem; }

.copyright {
  font-size: 0.5em; }

@media screen and (max-width: 720px) {
  .copyright {
    margin-top: 2em; } }
@media screen and (min-width: 721px) {
  .copyright {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translate(-50%, 0); } }
/* 5- components */
.boutonNuage {
  position: relative;
  z-index: 1;
  width: 72px; }

.pluie {
  width: 7.2rem;
  font-size: 1rem;
  z-index: -1;
  position: relative;
  opacity: 0;
  transform: translate(0, -2.4rem);
  transition: all 1s; }

.boutonNuage:hover .pluie {
  transform: translate(0, 0);
  opacity: 1; }

input[type="submit"], button, .bouton {
  display: inline-block;
  min-height: 2.5rem;
  background-color: var(--couleur-nuage);
  border-radius: 2rem;
  border: none;
  box-shadow: var(--ecart-ombre) var(--ecart-ombre) rgba(0, 0, 0, 0.2);
  padding: 1rem;
  font-family: "Fira Sans", sans-serif;
  font-size: 1.8rem;
  text-decoration: none;
  color: #000000;
  transition: background-color 0.4s ease-out; }
  input[type="submit"] a:visited, input[type="submit"] a:link, button a:visited, button a:link, .bouton a:visited, .bouton a:link {
    color: #000000; }
  input[type="submit"]:hover, button:hover, .bouton:hover {
    background-color: var(--couleur-hover); }
  input[type="submit"][disabled], button[disabled], .bouton[disabled] {
    color: rgba(0, 0, 0, 0.2);
    cursor: default; }
    input[type="submit"][disabled]:hover, button[disabled]:hover, .bouton[disabled]:hover {
      background-color: var(--couleur-nuage); }

.message-erreur {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem; }
  .message-erreur::before {
    content: "!";
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    background-color: var(--couleur-erreur);
    color: white;
    width: 2em; }

.message-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem; }
  .message-info::before {
    content: "!";
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    background-color: var(--couleur-info);
    color: white;
    width: 2em; }

.message-success {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem; }
  .message-success::before {
    content: "!";
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    background-color: var(--couleur-success);
    color: white;
    width: 2em; }

.formulaire label {
  display: flex;
  flex-direction: column; }
.formulaire input:not([type="submit"]), .formulaire textarea {
  font-family: "Fira Sans", sans-serif;
  font-size: 0.8em;
  width: 100%; }
.formulaire .champ-necessaire {
  background-image: url(../images/bouton-nuage.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
  height: 3rem;
  aspect-ratio: 3 / 2; }
.formulaire span.champ-necessaire {
  margin-bottom: -0.5rem; }

.creation-spectacle {
  display: grid;
  gap: 2rem; }
  .creation-spectacle label {
    width: 100%;
    font-family: 'Ms Madi', serif;
    font-size: 1.25em;
    align-items: flex-start; }
  .creation-spectacle input[type="submit"] {
    justify-self: center;
    min-width: 20rem; }

/* 6- pages */
.article {
  position: relative;
  border-radius: 20pt;
  border: 2pt solid #ffffff; }
  .article + .article {
    margin-top: 3em; }
  .article img {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto; }

.dateArticle {
  font: 1.2em 'Ms Madi';
  padding: 0.5rem; }

.titreArticle {
  font-weight: bold;
  font-family: 'Ms Madi', serif;
  font-size: 2.4em;
  cursor: pointer; }

.contenuArticle {
  transition: all 1s;
  transform-origin: top center; }

.ploye {
  /*transform: scaleY(0);

  height: 1em;*/
  clip: rect(auto, auto, 0, auto); }

@media screen and (max-width: 720px) {
  .infos {
    position: relative;
    margin-left: 1rem;
    margin-right: 1rem; }

  .portA {
    background-color: var(--couleur-nuage);
    border-radius: 20pt;
    border: 2pt solid #ffffff; } }
@media screen and (min-width: 721px) {
  .infos {
    padding-bottom: 10rem;
    position: relative; }

  .article {
    width: 95%;
    margin: auto;
    background-color: var(--couleur-nuage); }

  .dateArticle {
    position: absolute;
    background-image: url("../images/bouton-nuage.svg");
    background-size: 15rem 10rem;
    background-repeat: no-repeat;
    /* background-overflow: visible; /* TODO ? */
    width: 15rem;
    height: 10rem;
    padding-top: 4.5rem;
    transform: translate(-50%, -50%); } }
.gros-nuage {
  background-image: url(../images/bouton-nuage.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  aspect-ratio: 3/2;
  font-family: 'Ms Madi', serif;
  font-size: 1.25em; }
  @media screen and (max-width: 579px) {
    .gros-nuage {
      width: 58rem;
      margin-left: calc(0.5 * calc(100vw - 58rem));
      margin-right: calc(0.5 * calc(100vw - 58rem)); } }
  @media screen and (min-width: 580px) {
    .gros-nuage {
      background-size: contain; } }
  .gros-nuage .form-boutons {
    display: flex;
    flex-direction: row;
    gap: 2rem; }

.creation-compte {
  padding-right: 2rem;
  padding-left: 2rem; }
  .creation-compte .champs {
    display: grid;
    margin-bottom: 2rem;
    grid-auto-rows: 1fr;
    gap: 2rem; }
    .creation-compte .champs label {
      width: 100%;
      font-family: 'Ms Madi', serif;
      font-size: 1.25em;
      align-items: flex-start; }
    .creation-compte .champs select {
      width: 100%;
      background-color: #fff;
      border: 1px solid rgba(0, 0, 0, 0.5); }
    @media screen and (min-width: 580px) {
      .creation-compte .champs {
        grid-template-columns: 1fr 1fr; } }

.warning {
  outline: 1px solid red; }

p {
  margin-top: 2rem;
  margin-bottom: 2rem; }

.formulaire-validation {
  padding: 0 2rem; }
  .formulaire-validation .boutons-validation {
    margin-top: 2rem;
    display: flex;
    gap: 2rem;
    justify-content: center; }
  .formulaire-validation label {
    width: 100%;
    font-family: 'Ms Madi', serif;
    font-size: 1.25em;
    display: flex;
    justify-content: center;
    gap: 2rem;
    align-items: flex-end; }

.framed {
  border: solid 1px var(--couleur-accent);
  outline: solid 1px var(--couleur-hover);
  padding: 1rem; }

.contained {
  margin: 2rem; }

/*# sourceMappingURL=main.css.map */