@charset "utf-8";

/* -------------------------------
   CSS pour site web
   Aïkido Paris XV la Plaine
------------------------------- */

:root {
    /* palette de couleurs de base */
    --rouge-akai: #b23733ff;
    --rouge-iro: #c6363dff;
    --bleu-aoi: #2a5676ff;
    --indigo-clair: #72a5c2ff;
    --indigo-desature: #2bb8ffff;
    --indigo-pale: #def2fcff;
    --sakura: #feeeeeff;
    --vert-midori: #3eb36fff;
    --marron-kurozen: #ad4d00ff;
    --marron-tcha: #955041ff;
    --orange-oni: #fd5900ff;
    --jaune-safran: #fca546ff;
    --orange-saumon: #f78068ff;
    --bleu: var(--bleu-aoi);
    --rouge: var(--rouge-iro);
    --couleur-sombre: black;
    --couleur-claire: white;
    --couleur-1: var(--bleu);
    --couleur-2: var(--rouge);
    --couleur-3: var(--indigo-clair);
    --couleur-4: var(--indigo-pale);

    --larg-lat: 17em;
}

* {
    font-style: normal;
    text-decoration: none;
    line-height: normal;
    font-weight: normal;
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    overflow-y: auto;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13pt;
    color: var(--couleur-sombre);
}

h1, h2, h3 {
    font-family: Georgia, serif;
    color: var(--couleur-1);
}

h2, h3 {
    margin-bottom: 0.8em;
}

h2 {
    font-size: 1.2em;
}

h3 {
    margin-top: 1.4em;
}

h4 {
    color: var(--couleur-3);
    text-transform: uppercase;
}

p, ul {
    margin-bottom: 1.6em;
}

li {
    margin-left: 1em;
    padding-left: 1em;
}

p, ul, li {
    line-height: 1.4em;
}

a {
    color: inherit;
    font-family: inherit !important;
    font-size: inherit !important;
}

p a {
    color: var(--couleur-1);
}

/* ****************************
     Eléments communs
 *****************************/

.colore {
    color: var(--couleur-1);
}

.centre {
    text-align: center;
}

.souligne {
    text-decoration: underline;
}

.float-g {
    float: left;
}

.float-d {
    float: right;
}

.patch {
    border-radius: 0.6em;
    box-shadow: 0.1em 0.1em 0.3em #00000055;
    background-color: var(--couleur-4);
    color: var(--couleur-1);
}

.illus-cont {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.illus {
    display: block;
    margin: 1.6em;
}

.illus figcaption {
    display: block;
    width: 100%;
    padding: 1em;
    text-align: center;
    background-color: var(--couleur-4);
    color: var(--couleur-1);
    font-size: 0.8em;
}

.illus img {
    width: 100%;
}

.w50p {
    width: 50%;
}

.w40p {
    width: 40%;
}

.w30p {
    width: 30%;
}

.w20p {
    width: 20%;
}

/* ****************************
     Entête et menu
 *****************************/

#entete {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    height: 13em;
    background-color: var(--couleur-1);
    color: var(--couleur-claire);
}

#banniere {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 1em;
    height: calc(100% - 3em);
}

#logo {
    display: block;
    height: 4em;
}

#logo img {
    height: 100%;
}

#titre h1, #titre h2 {
    color: var(--couleur-claire);
    text-align: center;
}

#titre h1 {
    padding: 0.4em;
    border-bottom: 1px solid var(--couleur-claire);
}

#titre h1:hover {
    color: var(--couleur-2);
}

#titre h2 {
    padding: 0.4em;
    font-family: Helvetica, Arial, sans-serif !important;
    text-transform: uppercase;
    font-size: 0.9em;
}

#cartouche {
    display: block;
    width: 2.6em;
    aspect-ratio: 1 / 3;
    background-image: url(images/aikido.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

#menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    height: 3em;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin-bottom: 0;
}

#menu li {
    position: relative;
    display: flex;
    margin: 0;
    padding: 0;
    border-right: 1px solid var(--couleur-claire);
    background: linear-gradient(to bottom, #ffffff55, #ffffff00 60%);
    transition: all 400ms;
}

#menu li:last-child {
    border-right: none;
}

#menu li:hover {
    background-color: var(--couleur-2);
}

#menu li a {
    display: flex;
    margin: 0;
    padding: 0.6em 2em;
    height: 100%;
    width: 100%;
}

.sous-menu {
    position: absolute;
    z-index: 100;
    top: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    font-size: 0.9em;
    box-shadow: 0.1em 0.1em 0.3em #00000055;
}

.ferme {
    display: none;
}

.sous-menu li {
    background: var(--couleur-3) !important;
    border: 0 !important;
}

.sous-menu li:hover {
    background: var(--couleur-1) !important;
}

.sous-menu li a {
    align-items: center;
    justify-content: center;
    text-align: center;
}


/* ****************************
     Articles
 *****************************/

.illus-article {
    display: block;
    max-width: 15em;
}

.illus-article img {
    width: 100%;
}


/* ****************************
     Informations latérales
 *****************************/

#lateral {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: var(--couleur-3);
    color: var(--couleur-claire);
}

/* Position adaptative des éléments : la barre d'infos change de largeur selon qu'elle soit en portrait ou en paysage */
@media (orientation: landscape) {
    #lateral {
        width: var(--larg-lat);
        flex-direction: column;
    }

    #lateral div {
        width: 100%;
        padding: 0 1.6em;
    }

    #lateral div:first-of-type {
        padding-top: 1.6em;
    }
}

@media (orientation: portrait) {
    #lateral {
        width: 100%;
        flex-direction: row;
        gap: 1em;
    }

    #lateral div {
        width: 25%;
        padding: 1.6em 1em;
    }

    #lateral div p {
        margin-bottom: 0;
    }
}

#lateral div {
    display: block;
    font-size: 0.8em;
}

#lateral * a:hover {
    color: var(--couleur-1);
}

#lateral p {
    font-size: 0.9em;
}

#lateral p a {
    color: inherit;
}

#social, #legal {
    text-align: center;
}

#social {
    display: block;
    height: 1.8em;
}

#social a {
    margin: 0 0.4em;
}

#social a img {
    height: 100%;
}

#icon-mail {
    display: inline-block;
    padding-left: 1.6em;
    background-image: url(images/mail.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

/*#lateral div:last-of-type {*/
/*    min-height: 4em;*/
/*    background-image: url(images/yagasuri.svg);*/
/*    background-repeat: repeat;*/
/*    background-size: 2em;*/
/*    padding: 0;*/
/*}*/

/*#lateral div:last-of-type img {*/
/*    width: 100%;*/
/*}*/

/* ****************************
     Contenu central
 *****************************/

#centre {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    overflow-y: auto;
    height: calc(100% - 13em);
}

/* Position adaptative des éléments : la barre d'infos est latérale en paysage et en haut en portrait */
@media (orientation: landscape) {
    #centre {
        flex-direction: row-reverse;
    }

    #contenu {
        width: calc(100% - var(--larg-lat));
    }
}

@media (orientation: portrait) {
   #centre {
        flex-direction: column;
    }

    #contenu {
        width: 100%;
    }

}

#contenu {
    display: block;
    padding: 2em 4em;
    background-color: var(--couleur-claire);
}

#contenu a:hover {
    color: var(--couleur-3);
}

#contenu h2 {
    font-size: 1.6em;
}

.col2 {
    display: flex;
    flex-wrap: nowrap;
    gap: 3em;
}

/* Position adaptative des éléments en multi-colonnes : deux colonnes en paysages, des éléments empilés en portrait */
@media (orientation: landscape) {
    .col2 {
        flex-direction: row;
    }

    .larg-grand {
        width: 55%;
    }

    .larg-petit {
        width: 45%;
    }

    .larg-mi {
        width: 50%;
    }
}

@media (orientation: portrait) {
   .col2 {
        flex-direction: column;
    }

    .larg-grand, .larg-petit, .larg-mi {
        width: 100%;
    }
}

/* ****************************
     Page d'accueil
 *****************************/

#boite-enseignants {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

.boite-enseignant {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4em;
    margin-top: 0.8em;
    width: auto;
}

.boite-enseignant img, .boite-enseignant p {
    display: block;
}

.boite-enseignant p {
    font-size: 0.8em;
    color: var(--couleur-1);
}

.boite-enseignant img {
    height: 5em;
}

#intro {
    margin-top: 4em;
}

#carrousel-accueil {
    width: calc(100% + 8em);
    max-height: 20em;
    margin: -2em -4em;
    overflow: hidden;
}

#desc-dojo {
    display: block;
    width: 45%;
}

#carrousel-accueil figure {
    position: relative;
    width: 400%; /* 400% car 4 images */
    margin: 0;
    padding: 0;
    font-size: 0;
    text-align: left;
    animation: 20s carrou infinite;
}

#carrousel-accueil figure img {
    width: 25%; /* 25% = 100% / 4 images */
    height: auto;
    float: left;
}

@keyframes carrou {
  0% { left: 0; }
  25% { left: 0; }
  30% { left: -100%; }
  55% { left: -100%; }
  60% { left: -200%; }
  95% { left: -200%; }
  100% { left: -300%; }
}


/* ****************************
     Page infos
 *****************************/

#carrousel {
    width: 100%;
    max-width: 943px; /* C'est la largeur max des images qui ont toutes la même dimension 943x504px pour le carrousel. */
    overflow: hidden;
}

#desc-dojo {
    display: block;
    width: 45%;
}

#carrousel figure {
    position: relative;
    width: 400%; /* 400% car 4 images */
    margin: 0;
    padding: 0;
    font-size: 0;
    text-align: left;
    animation: 20s carrou infinite;
}

#carrousel figure img {
    width: 25%; /* 25% = 100% / 4 images */
    height: auto;
    float: left;
}

@keyframes carrou {
  0% { left: 0; }
  25% { left: 0; }
  30% { left: -100%; }
  55% { left: -100%; }
  60% { left: -200%; }
  95% { left: -200%; }
  100% { left: -300%; }
}

iframe {
    width: 90%;
    aspect-ratio: 4 / 3;
    margin-bottom: 0.6em;
}

#zoom-carte {
    padding: 0.4em 1em 0.4em 2em;
    background-image: url(images/loupe.svg);
    background-repeat: no-repeat;
    background-size: 1em;
    background-position: left 0.8em center;
}

.transport li {
    padding-left: 2.4em;
    background-repeat: no-repeat;
    background-size: 2em;
    background-position: left center;
}

.l12 {
    background-image: url(images/metro-12.svg);
}

.l13 {
    background-image: url(images/metro-13.svg);
}

.lt3a {
    background-image: url(images/tram-t3a.svg);
}

.l89 {
    background-image: url(images/bus-89.svg);
}


/* ****************************
     Page d'inscription'
 *****************************/

table {
    box-shadow: 0.1em 0.1em 0.3em #00000055;
    overflow: hidden;
    margin-bottom: 2em;
}

tr, td {
    border: 1px solid var(--couleur-1);
    color: var(--couleur-claire);
}

tr:first-of-type td {
    background-color: var(--couleur-1) !important;
}

td {
    padding: 0.4em 0.6em;
    background-color: var(--couleur-3);
}

td:last-of-type {
    text-align: center;
}

td span {
    font-size: 0.8em;
}

table caption {
    color: var(--couleur-1);
    font-size: 0.9em;
    padding: 0.4em;
}

.telechargement {
    display: block;
    padding: 1em 1.2em;
    margin: 1em;
    font-size: 0.8em;
}

.telechargement span {
    background-image: url(images/tele-pdf.svg);
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
    padding-left: 2.8em;
    margin-right: 0.4em;
    font-size: 1.2em;
}

.tele-lien {
    background-image: url(images/tele-lien.svg) !important;
}

/* ****************************
     Page de contact
 *****************************/

form {
    display: flex;
    flex-direction: column;
    padding: 1.6em 3em;
    gap: 0.2em;
    background-color: var(--couleur-3) !important;
}

label {
    color: var(--couleur-1);
}

input, textarea {
    padding: 0.6em;
    border-radius: 0.4em;
}

input {
    width: 50%;
    margin-bottom: 0.6em;
}

#envoi {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 0.6em;
}

input[type=submit] {
    display: block;
    width: 40%;
    font-size: 0.8em;
    background-color: var(--couleur-1);
    color: var(--couleur-claire);
    cursor: pointer;
    transition: all 400ms;
}

input[type=submit]:hover {
    background-color: var(--couleur-2);
}

.msg-erreur, .msg-ok {
    display: block;
    width: 100%;
    padding: 0.6em;
    text-align: center;
    color: white;
    border-radius: 0.6em;
}

.msg-ok {
    background-color: var(--vert-midori);
}

.msg-erreur {
    background-color: var(--rouge-akai);
}

/* ****************************
     Page enseignants
 *****************************/

.conteneur-enseignant {
    display: block;
    padding: 1em;
    margin-bottom: 1em;
}

.conteneur-enseignant p {
    margin-bottom: 1em;
}

.portrait-enseignant {
    display: block;
    width: 33%;
    padding: 0.6em 0.6em 1.2em 0.6em;
    box-shadow: 0 0 0.3em black;
    text-align: center;
    background-color: white;
    margin: 0 1.2em 1em 0;
 }

.portrait-enseignant,  .portrait-enseignant img {
    border-radius: 0.2em;
 }

.portrait-enseignant img {
    width: 100%;
}

/* ****************************
     Pages des grades
 *****************************/

#select-ceinture {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2em;
    margin-bottom: 1em;
}

.ceinture {
    display: flex;
    height: 2em;
    width: 5em;
    overflow: hidden;
}

.ceinture span {
    display: flex;
    width: 50%;
    height: 100%;
}

.blanc {
    background: white;
}

.jaune {
    background: #ffd500;
}

.orange {
    background: #ff8000;
}

.vert {
    background: #178000;
}

.bleu {
    background: #0033ff;
}

.lien-rev {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4em;
    transform: scale(1);
    transition: 0.2s;
}

.lien-rev:hover {
    transform: scale(1.05);
}

.lien-rev span {
    color: var(--couleur-1);
    text-align: center;
}

dl {
    border: 1px solid #bdc8ca;
    background-color: #f7fafa;
}
.ie7 dl {
    overflow: hidden;
}
dt,
dd {
    box-sizing: border-box;
    padding: 10px;
}
dd ~ dt,
dd ~ dd {
    border-top: 1px solid #bdc8ca;
}
dt {
    float: left;
    width: 20%;
    padding-bottom: 0;
}
.ie7 dt {
    padding-bottom: 10px;
    clear: both;
}
dd {
    margin-left: 20%;
    border-left: 1px dotted #bdc8ca;
    background-color: #fff;
}
.ie7 dd {
    margin-left: 40%;
    overflow: hidden;
}
dd:after {
    content: "";
    display: block;
    clear: both;
}
/*dt*/.row2 + dd:after {
    content:none;
}

#rev-grades h3 {
    margin-top: 2em;
}

#rev-grades h4 {
    margin-top: 1.4em;
    margin-bottom: 0.6em;
}