/* root, ça te permet de créer des variables disponibles dans toutes tes classes css */
:root {
    /* Définit les variables pour les informations que tu auras à retaper souvent. 
    exemple
    background-color: var(--couleur_secondaire)       
    font-size: var(--taille_texte);  font-size: var(--taille_sous_titre);
    color: var(--couleur_hyperlien);
    
  mieux de les mettre dans les média query sinon conflits
    --taille_titre: 1.7rem;
    --taille_sous_titre: 1.1rem;
    --taille_texte: 0.9rem;  */

    /* Evite de mettre trop de couleur sur ton site, sinon ce sera un arc en ciel. */
    --couleur_primaire: royalblue;
    --couleur_secondaire: rgb(192, 249, 192);
    --couleur_filariane: rgb(223, 235, 223);

    --couleur_important: red;
    --couleur_hyperlien: rgb(34, 13, 154);
    --couleur_texte: black;

    /* La même chose pour les polices d'écriture, évite d'en mettre trop de différente, fait par type de texte. */
    --titre_font: serif;
    --sous-titre_font: sans-serif;
    --text-font: sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
}

body {
    /* La couleur par défaut est déjà blanche, on a pas besoin de la remettre, ça peut entrainer des confusions. */
    /* background-color: #fff; */

    /* Je suis pas sûr que tu veuilles mettre une seule et unique font sur ton site web, le mieux c'est de ne pas la définir au body 
        D'autant plus que tu mets une taille de police global de 1rem pour tous les éléments du body, 
        ce qui veut dire que t'es obligé de redéfinir des tailles sur chacun des composants que tu veux réduire ou grossir.
    */
    /* font: 1.0rem / 1.2 Helvetica Neue, Helvetica, Arial, sans-serif; */

    max-width: 1400px;
    /* On a pas besoin de mettre un commentaire pour les marges, margin ça parle bien. */
    /* marges */
    margin: 0 auto;
    padding: 0 10px;
    /* Le curseur n'a pas lieu d'être en pointer, ça donne l'impression à l'utilisateur de pouvoir cliquer sur tout et d'avoir une action associée. */
    /* cursor: pointer; */
    /* On ne met pas de style sur du texte dans une balise global comme le body à moins que tu ne veuilles faire en sorte de toujours couper le texte comme ça. */
    /* word-wrap: break-word; */
}

/* La balise image pour le responsive, c'est bien si elle est définit au global 
    vu que toutes les images devront être responsive. 
*/

img {
    display: block;
    max-width: 90%;
    /* heigt auto par defaut obligé pour ne pas élargir la colonne à la taille des photos*/
    border-radius: 8px;
    margin: auto;
    /*centre les image dans la colonne*/
    /*   width: 100%;
    
    La height par défaut c'est déjà auto, pas besoin de le spécifier, ça peut mener à une mauvaise interprétation. */
    /* height: auto; */

    /*  On évite de mettre un border-radius sur un élément qui gère uniquement le responsive, on 
        créera une classe pour le style de l'élément qui doit avoir ce comportement. 
    */
    /* border-radius: 15px; */
}

/* Le responsive pour ce genre d'élément c'est dans le css global */
figure {
    margin: 0;
    padding: 0;
}

/*initi les box  effaçons nos styles de navigateur par défaut */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}
/*
a:link, a:visited,  a:hover, a:active
{
    text-decoration: none;
}
*/
/* ******************* Titres sous titres     */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: maroon;
    margin-bottom: 0.5rem;
    /*
  !important;
 margin-bottom: 0.2rem;
 padding-top: 0.2rem;*/
    line-height: 1.2;
    /*line-height: 1.6;*/
    font-weight: 700;
}

h1 {
    padding-top: 3.5rem;
    font-size: 2.2rem; /*font-size: 3.2rem;*/
    display: block;
    text-align: center;
    padding-bottom: 1.2rem;
}

h1 .sub {
        font-size:70%;  /*
        font-size: 0.7rem;*/
    color: maroon;
    font-style: italic;
    display: block;
}

h2 {
    font-size: 1.8 rem;
    margin-top: 25px;
    /*
 text-align: center;*/
    /*
 margin-top: 1.46rem !important;*/
}

h2 .sub2 {
    font-size: 70%;
    color: maroon;
    font-style: italic;
}

h2 .sub2a {
    display: block;
    font-size: 70%;
    color: maroon;
    font-style: italic;
}

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

h3 {
    font-size: 1.5rem;
    margin-left: 5px;
    padding-bottom: 0.2rem;
    line-height: 1.2;
}

h3 .sub3 {
    font-size: 70%;
    color: maroon;
    font-style: italic;
    line-height: 1.2;
}

h3 .sub3a {
    display: block;
    font-size: 70%;
    color: maroon;
    font-style: italic;
    line-height: 1.2;
}


h4 {
    font-size: 1.1rem;
    margin-left: 5px;
    padding: 0 0 0.4rem 0;
    line-height: 1.2;
}

h4 .sub4 {
    font-size: 70%;
    color: maroon;
    font-style: italic;
    line-height: 1.2;
}

h4 .sub4a {
    display: block;
    font-size: 70%;
    color: maroon;
    font-style: italic;
    line-height: 1.2;
}

/* évite le sub sub2 sub3 */
small,
.small {
    line-height: 1.2;
    font-size: 70%;
}

.smalla {
    font-size: 70%;
    margin: 0;
    padding: 0;
    display: block;
}

.small85 {
    font-size: 85%;
    margin: 0;
    padding: 0;
    display: block;
}

/*  hyperliens  */
a:link {
    text-decoration: none;
    font-weight: 700;
}

a:hover {
    background-color: red;
    color: white;
    border-radius: 8px;
    padding: 3px;
}


p {
    font-size: var(--taille_texte);
    padding-top: 0.3rem;
    line-height: 1.2;
    margin: 0rem 0rem 0.4rem 3rem;
}
/*
p {
    font-weight: 500;
    padding: 0.3rem;
}
*/
/* dans la page même**************  */

.liste_bouton {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 5px;
    margin-bottom: 10px;
}

ol {
    list-style: none;
    text-indent: 0;
    font-size: var(--taille_texte);
    padding: 0;
    margin: 0;
    padding-bottom: 1rem;
}

ul {
    padding: 0;
    margin: 0;
    font-size: var(--taille_texte);
    list-style-type: square;
    /*
    list-style-position: outside;*/
    text-indent: 0;
    padding-left: 1rem;
    padding-bottom: 1rem;
}

li {/*
    list-style: none;*/
    list-style-type: square;
    font-weight: 500;
    position: relative;
    padding: 2px 0 0 2px;
    line-height: 1.2;
}

/*avec trait sur le coté gauche  https://sharkcoder.com/blocks/list      
ul:nth-of-type(1) {
    list-style-position: inside;
    list-style-type: none;
    padding: 0 5px 0 10px;
    border-left: solid 1px red;
}
 */
ul.suprimPuces {
    font-size: var(--taille_texte);
    list-style-type: none;
    text-indent: 0;
}


/* barre rouge mai sconflits
ul:nth-of-type(2) {
    list-style-position: outside;
    padding: 0;
    border-left: solid 2px red;
}
*/

em {
    color: maroon;
    font-weight: 700;
}

dl {
    margin: 5px 0px 15px 0px;
}

dt {
    font-size: 1.2rem;
    font-weight: 700;
    list-style-type: none;
    text-indent: 0;
    margin: 5px 0px 5px 0px;
    color: maroon;
}

dd {
    font-size: var(--taille_texte);
    font-weight: 500;
    list-style-type: none;
    text-indent: 0;
    margin-left: 1.5rem;
    margin-bottom: 0.3rem;
}

.centrer_vert {
    justify-content: center;
}



/*** modifie la marge top de l'image sous le h3        Css\Figcaption-hover.min.css ****/
figure.figurefx {
    margin: 10px auto;
}

figure.reduc50 {
    max-width: 50%;
}


figcaption {
    font-size: 1.0rem;
}
  

/* marges */

.mt-1 {
    margin-top: 1rem;
}
.mt-3 {
    margin-top: 3rem;
}
.mt-5 {
    margin-top: 5rem;
}
.ml-1 {
    margin-left: 1rem;
}
.ml-3 {
    margin-left: 3rem;
}
.ml-5 {
    margin-left: 5rem;
}
.p-3 {
    margin-left: 3rem;
}



/* couleurs fonds  */
.w3-food-egg {
    color: #000 !important;
    background-color: #fffcc4 !important
}

.w3-food-avocado {
    color: #fff !important;
    background-color: #87a922 !important
}

.w3-food-wine {
    color: #fff !important;
    background-color: #80013f !important
}

/*     ombres    ***************** */
.boxOmbre1 {
    border: 1px solid;
    /* entraine un décalae dans la box de grille 
padding: 10px;*/
    box-shadow: 5px 10px 20px #625f5f;
    border-radius: 10px;
}

/* animation */
.w3-animate-zoom {
    animation: animatezoom 0.6s
}

@keyframes animatezoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}




/* media  ***************************** */
@media all and (min-width: 800px) {

    /* écran au dessus de 720 jusqu'à 1400 */
    /*   { body  test
        background-color: aqua;
    }
*/
    :root {
        --taille_titre: 3.1rem;
        --taille_sous_titre: 1.6rem;
        --taille_texte: 1.1rem;
    }

    /* taille icones*/
    .icone {
        font-size: 1.7rem;
        color: red
    }

    h1 {
        font-size: var(--taille_titre);
        text-align: center;
        /*
        padding-bottom: 0.7rem;*/
    }

    h2 {
        font-size: 2.2rem;
        margin: 5px 0 1px 0;
        /*marge entre titre et haut de grille au bord du body*/
    }

    h3 {
        font-size: 1.6rem;
    }

    h3 .sub3a {
        display: block;
        font-size: 70%;
        color: maroon;
        font-style: italic;
        line-height: 1.2;
    }
    h4 {
        font-size: var(--taille_sous_titre);
        padding-left: 4px;
    }

    h5 {
        font-size: var(--taille_texte);
        line-height: 1.4;
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
        margin-block-start: 0;
        margin-block-end: 0;
        line-height: 1.2;
        color: maroon;
    }

    dl {
        margin-left: 2rem;
    }

    figcaption {
        font-size: 80%;
    }
}


/*********     media des grid ***************************** */
    /* Si tu veux ajouter d'autres colonnes, tu peux créer une classe de la même forme que grid2col (ne pas oublier le !important) */
    .grid2col{
        grid-template-columns: 1fr 1fr !important;
    }
    .grid3col {
        grid-template-columns: 1fr 1fr 1fr !important;
    }

    .grid4col {
        grid-template-columns: 1fr 1fr 1fr 1fr !important;
    }

    /* Attention, j'avais mis grid pour l'exemple mais il faut impérativement changer de nom ! */
    .grid {
        display: grid;
        /* à enlever en production     border: 2px solid #da1111;*/
        grid-template-columns: 1fr 4fr;
        /* grid-template-columns: 1fr 4fr; pour varier la largeur*/
        gap: 10px;
        /* retrait identation soustitre grille */
        padding-left: 20px;
        /* identation sous titre grille    padding-bottom: 10px;*/
    }

    .grid>div {
        /*    min-height: 100px;*/
        background-color: transparent;
        padding: 8px;
        border-radius: .7em;
        background-color: rgb(248, 246, 250);
        border: 2px solid red;
        border-radius: 15px;
        /* ombre*/
        box-shadow: 5px 10px 20px #888888;
    }



    @media all and (max-width: 600px) {

        /*pour voir la rupture*/
        body {
            /*    background-color: lightgreen;*/
            margin-top: 50px;
        }

        :root {
            --taille_titre: 1.7rem;
            --taille_sous_titre: 1.1rem;
            --taille_texte: 0.8rem;
        }

        /* taille icones*/
        .icone {
            font-size: 0.9rem;
            color: red
        }

        /* Il y a un autre support que téléphone pris en compte ? */
        /* telephone */
        .grid {
            display: block;
            width: auto;
            padding: 0 10px;
            margin: 0;
        }

        .grid>div {
            min-height: 100px;
            padding: 4px;
        }

        /*le dernier div dans grigd n'a pas de margin-bottom*/
        .grid>div:not(:last-of-type) {
            margin-bottom: 10px;
        }
    }