/* ATTENTION: ne pas mélanger git meld, gitg et gedit tout en même temps. On dirait que ça bork l'unicode/file encoding lorsque gedit est ouvert et recharge le document... */

/*--------------------------------------------------------------------------
 DESIGN BASE LAYOUT: tous les trucs qui sont de la mise en page globale
 -------------------------------------------------------------------------*/

body {
    font-family: "Droid Sans";
    font-size: 100%; /* Make it readable; 100% = 12pt = 16px, ce qui est mieux que 14px */
    margin: 0;
    padding: 0;
    /* Note: don't use WebP. As of 2020, Safari still doesn't f%$$ing support it, yet accounts for 25% of my visitors. Use MozJPEG instead. */
    background-image: url("i/layout/banniere_mobile.jpg");
    background-size: 1200px auto;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center top;
    background-color: black;
}

/* Responsive top menu tiré de https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/ mais le menu hiding/folding ne fonctionne pas */
#page-nav {
    cursor: crosshair;
    font-size: 100%; /* = 12pt = 16px, but at least percentage is scalable etc. */
    color: white; /* affecte surtout les séparateurs entre menu items */
    text-shadow: 1px 1px 1px #000;  /* 1px right, 1px below, 1px blur */
    text-align: center;
    margin-left: auto; /* Encore nécessaire pour que le right-align fonctionne dans la version mobile avec le margin-right 0 */
    padding: 2px;
    /* Un bg noir 0,0,0 subtil, au lieu du 255,255,255 white gradient, s'agence mieux en fin de compte.
    Je pourrais avoir un hard edge très navbar-like en allant de
        rgba(0,0,0, 75%) 0%,
        rgba(0,0,0, 25%) 100%
    ...mais un soft edge tapering off from 30% transparent at the 85% position to 0 at 100% position
    ...est photographiquement mieux, et paraît mieux on mobile aussi. */
    background: linear-gradient(to bottom,
                                rgba(0,0,0, 75%) 0%,
                                rgba(0,0,0, 30%) 85%,
                                rgba(0,0,0,  0%) 100%
                                );
}
#page-nav label, #hamburger {
    display: none;
}
#page-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
    #page-nav ul li {
        display: inline-block;
        padding: 0;
        margin: 0;
    }
        #page-nav ul li a{
            cursor: crosshair;
            padding: 5px; /* La précédente approche de 10px above/below et 15px left/right était way too much, et paraissait mal à basse résolution */
            border-radius: 10px;
        	transition: all 0.4s ease-out; /* Animation des changements entre les états */
        }
        #page-nav ul li a:link,
        #page-nav ul li a:visited{
            color: lightsalmon; /* fonctionne mieux avec un dark navbar over a greenery background photo */
        }
        #page-nav ul li a:hover{
            color: white;
            text-shadow: 1px 1px 1px black;
            text-decoration: none;
            padding-left: 10px; padding-right: 10px; /* The fun part: cette croissance de taille temporaire est animée comme tout le reste */
            background: linear-gradient(to bottom,
                                        rgba(15,10,45, 0.05) 0%,
                                        rgba(15,10,45, 0.70) 100%);
        }
@media screen and (max-width: 720px){
    /* Show Hamburger. This SHOULD work, but it f***ing doesn't for some unknown f***ing reason.  */
    #page-nav label {
        display: inline-block;
        color: white;
        background: #a02620;
        font-style: normal;
        padding: 10px;
    }
    /* Close the menu by default. This SHOULD work, but it f***ing doesn't for some unknown f***ing reason. */
    #page-nav ul {
        display: none;
    }
    /* Break down menu items into vertical. This actually works, unlike the above. */
    #page-nav ul li {
        display: block;
    }
    /* Toggle show/hide menu on checkbox click */
    #page-nav input:checked ~ ul {
        display: block;
    }
    #page-nav { /* Trucs de Jeff pour amincir la hauteur de la bannière. This actually works, unlike the above. */
        margin-right: 0;
        max-width: 210px;  /* Just barely enough to prevent wrapping sur des mobile phones */
    }
    /* Pour les trucs à cacher explicitement sur phone formfactors:*/
    #contenu .hide_on_mobile {
        display: none;
    }
    /* Pour les trucs à flatten and full-width on mobile */
    #contenu .unfloat_on_mobile {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        padding-left: 0 !important; padding-right: 0 !important;
    }
}
.language_switcher {
    border: #4c93ca 1px dotted;
}
    .language_switcher:link, .language_switcher:visited{
        color: #c0bfbc !important;
    }
    .language_switcher:hover{
        /* Cancel everything from the animated transitions des autres menu items, car illisible si on veut garder le bleu du texte correspondant au globe */
        border: none;
        text-shadow: none !important;
        background: linear-gradient(to bottom,
                                        rgba(15,10,45, 0.05) 0%,
                                        rgba(15,10,45, 0.20) 100%) !important;
    }
#select_hilight{
    /* FIXME: depuis le design de 2017, ne marche plus pour les trucs autres que l'accueil dans le fichier d'index */
    background-color: black;
}


#contenu{
    padding: 2.5%;
    padding-top: 1px; /* weird hack; la différence entre 0 et 1 est immense */
    width: 95%;
    max-width: 1000px; /* TODO: change moi en responsive */
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px; /* selon la banner, pour dévoiler mon menton sur les résolutions de téléphones */
    background-image: url("i/layout/paper_bg_mozjpeg.jpg");
    background-repeat: repeat-x;
    border-radius: 25px;
    /* Ombre portée noire, distance 0px, blur de 30px, opacité 80%; voir https://css3gen.com/box-shadow/ */
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.80);
}


footer {
    width: 90%; margin-left: auto; margin-right: auto;
    clear: both;
    text-align: center;
    color: #A4A4A4;
}
footer a:link, footer a:visited { color: white; }

.copyleft {
    display: inline-block;
    transform: rotate(180deg);
}

/* Call To Action Button*/
.call-to-action {
	color: white;
	background-color: #3465a4;
	background-image: linear-gradient(to bottom, #43a8ec, #2170a4);

	/* Tweaks divers pour compacter le texte, mais finalement pas nécessaires:
	font-size: 14px; line-height: 21px;	font-weight: bold;*/

	display: inline-block;
	padding: 4px 8px 4px;
	border-radius: 10px;

	/* Plus besoin des préfixes -ms-, -moz-, -webkit-, -o- depuis 2013 pour la propriété "transition" */
	transition: all 0.3s ease-out;
}
.call-to-action:link, .call-to-action:visited {
    /* Faut ça sinon le texte refuse de s'habiller en blanc. */
    color: white;
    text-decoration: none;
    }
.call-to-action:hover {
	background-color: orange;
	background-image: linear-gradient(to bottom, #fff266, #ffaa17);
	color: black;
    text-decoration: underline;
    box-shadow: 0px 0px 10px #666666;
}

/* Pour une raison obscure, cette bullshit ne fonctionne pas quand c'est dans le fichier CSS, juste dans le inline CSS de ma vidéo sur page d'open source:
.centered_video {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid gray;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.50);
}*/

/*--------------------------------------------------------------------------
 Dark mode facile
 adapté de ce qu'on trouve dans https://people.gnome.org/~federico/blog/gnome-themes.html
 -------------------------------------------------------------------------*/
@media (prefers-color-scheme: dark) {
    #contenu {
        color: white;
        background-color: #181818;
        background-image: none;
    }

    #contenu a{
        color: skyblue;
    }
    #contenu .call-to-action{
        /* Hack parce que :not(.call_to_action) ne semble pas marcher comme faut */
        color: white;
    }
    #contenu div.auto-float-half blockquote.testimonial-balloon-rightwards p a{
        color: #004275; /* Couleur custom, car le skyblue ne marcherait pas sur le background vert lime */
    }

    #contenu h1{
        color: lightsalmon;
    }
    #contenu h2{
        color: #777;
    }

    .tuile_galerie_whiteBG {
        background-color: white;
        border-radius: 10px;"
    }
}



/*--------------------------------------------------------------------------
 Gestion du texte et des images en général
 -------------------------------------------------------------------------*/
hr {
	height: 6px;
	background: url(/i/layout/hr.png) repeat-x 0 0;
    border: 0;
}

a:link , a:visited {
    color: #005fa9; 
    text-decoration: underline;
    text-decoration-style: dotted;
}
a:hover {
    text-decoration: underline;
    text-decoration-style: solid;
}

h1, h2, h3, h4, h5{
    font-family: "Source Sans Pro";
    font-weight: normal; /* Il FAUT spécifier ceci */
    line-height: 1.0; /* Encore un truc ridicule, pour éviter les espacements de lignes monstrueux lorsque ça wrappe en mobile */
}
    h1 {
        font-size: 200%;
        font-weight: 200;
        margin-bottom: 0px;
        color: #5c3566;
    }
    h2 { color: #4b7700; }

ul, ul li {
    list-style-image: url("i/layout/bullet-01.png");
}
li{
    margin-bottom: 5px;
}
abbrev{
    text-decoration: underline dotted gray;
}


/* Les deux premiers paragraphes de la page d'accueil en taille plus grande */
.motivational-text-big {
    color: darkolivegreen;
    font-family: "Source Serif Pro";
    font-size: 140%; /* increases to 150% at desktop resolution */
/*    font-weight: 200;*/
}
.motivational-text-small {
    font-family: "Source Sans Pro";
    font-size: 110%; /* increases to 120% at desktop resolution */
/*    font-weight: 200;*/
}

/*--------------------------------------------------------------------------
 Composantes servant aux testimonials
 -------------------------------------------------------------------------*/
blockquote {
    /* Sert à compacter les blockquotes en général, sinon ça bouffe une place folle */
    padding: 0;
    margin: 0.4em;
}
blockquote p{
    /* Pour que le guillemet ouvrant rentre dans la marge de gauche. Normalement ce serait simplement: hanging-punctuation: first; mais faut utiliser un hack stupide, parce qu'en date de 2017 et 2019 http://caniuse.com/#search=hanging-punctuation n'est toujours pas supporté excepté sous Safari.
    */
    text-indent: -.4em;
    font-size: 100%;
}
blockquote.fancy-big-quote{
    font-family: 'Source Serif Pro';
    margin: 2%;
    padding: 4%;
    background-color: #d3d7cf;
    background: linear-gradient(to bottom,
                                rgba(0,0,0, 0.2) 0%,
                                rgba(0,0,0, 0.0) 100%);
    }

.testimonial-balloon-rightwards {
    position: relative;
    padding: 2px 20px; /* Jeff: par défaut c'était "15px 30px", which is too much pour mobile */
    margin: 0;
    background: #5a8f00; /* default bg for browsers without gradient support */
    color: black;
    /* Ajout de Jeff, calibré avec l'inspecteur: */
    text-shadow: 0px 0px 15px white;
    margin-right: 2%;
    /* CSS3 */
    background: linear-gradient(#b8db29, #5a8f00);
    border-radius: 10px;
}
/* Creates the triangle */
.testimonial-balloon-rightwards:after {
    content: "";
    position: absolute;
    bottom: -50px;
    left: 50px;
    border-width: 0 20px 50px 0px;
    border-style: solid;
    border-color: transparent #5a8f00;
}
/* Display of quote author (alternatively use a class on the element following the blockquote)
Modifié par Jeff: +div au lieu de +p pour permettre de placer un floating author image dans un div avec le texte. */
.testimonial-balloon-rightwards + div {
    margin: 15px 0 2em 85px;
    font-style: italic;
    font-size: 90%;
}
    .testimonial-balloon-mugshot{
        float: left;
        width: 40px;
        border-radius: 8px;
        margin: 0px;
        margin-right: 5px;
    }
/* Utilisé pour la frontpage, gets overridden par responsive at higher res */
.standalone-mugshot{
    float: right;
    border: 1px solid #204a87; /* Tango dark blue */
    margin: 5px;
    width: 50px; height: 50px;
    border-radius: 25px;
}


/*--------------------------------------------------------------------------
"Automatic" responsive design portion with CSS columns
 Ce code de colonnes, refait en 2019, est largement supérieur à celui d'IDMK, car inherently responsive grâce à column-width (voir https://css-tricks.com/guide-responsive-friendly-css-columns/#article-header-id-3 notamment la section "2. Declare column width"). Aussi, plus besoin de -moz-column-count et -webkit-column-count depuis mars 2017 (Firefox 52 / Chrome 50)
 -------------------------------------------------------------------------*/
.auto-columns{
    column-width: 200px; /* This is THE key to everything. */
    font-size: 80%;
    /* widows: 3; orphans: 3; not supported dans Firefox en date de 2019 */
}
    .atomic-column-section{
        /* ceci fonctionne dans 80-90% des cas, le browser fait ce qu'il peut. Voir aussi https://css-tricks.com/guide-responsive-friendly-css-columns/#article-header-id-9 ("column-fill") pour régler un cas spécifique de Firefox, mais seulement lorsque le height est défini, ce qui n'est pas mon cas.*/
        break-inside: avoid;
    }
        .column-header{
            font-size: 110%; /* ceci stacks avec le 80% de la colonne en général */
            font-weight: bold;
            color: #932400;
            margin-bottom: 5px;
            margin-left: -15px; /* align into the bulleted lists, quoique c'est peut-être trop spécifique dans les cas des colonnes sans bulleted lists */
        }
        .auto-columns .atomic-column-section .column-header:nth-child(1){
            /* Workaround le fait que le 1er header de la 1ère colonne est décalé verticalement */
            margin-top: 0;
        }
    .auto-columns > ul{
        /* Compact more than the default */
        padding-left: 15px;
        margin: 0px;
    }
        .auto-columns > ul li{
            /* Avec Firefox faut vraiment insister, malgré mon .atomic-column-section, pour que les list items ne se fractionnent pas d'une colonne à l'autre! En date de Firefox 67 en tout cas, cette astuce lui permet de ressembler d'avantage au comportement de Chromium qui est 99% correct. */
            break-inside: avoid;
        }

/*--------------------------------------------------------------------------
"Manual" responsive design
 Progressive-enhancement of the base stuff, for higher resolutions
 -------------------------------------------------------------------------*/
@media (min-width: 720px){ /* tablet portrait size */

    /* Note: don't use WebP. As of 2020, Safari still doesn't f%$$ing support it, yet accounts for 25% of my visitors. Use MozJPEG instead. */
    @media (prefers-color-scheme: light){
        body{
            background-image: url("i/layout/banniere_desktop.jpg");
        }
    }
    @media (prefers-color-scheme: dark){
        body{
            background-image: url("i/layout/banniere_desktop_dark.jpg");
        }
    }


    #contenu{
        margin-top: 220px;
        margin-left: auto;
        margin-right: auto;
        padding: 20px; /* Les pourcentages ne marchent plus trop bien rendus ici */
        width: 90%;
    }
    /* Responsive half/third/quarter floats (not real columns).
    Utilisé quand on veut que ça reste aligné sur des rangées au lieu d'un masonry gallery layout */
    .auto-float-half{
       float: left;
       width: 50.0%;
    }
    .auto-float-third{
       float: left;
       width: 33.3333333%; /* 100% divided by 3 columns */
    }
    .auto-float-quarter{
       float: left;
       width: 25%;
    }
        /* Utilisé uniquement pour les featured testimonials: */
        .auto-float-quarter blockquote p{
            font-size: 80%;
        }
    blockquote.fancy-big-quote{
        float: right;
        width: 30%;
        font-size: 115%;
    }
}
/* Middle-range screens */
/*@media (min-width: 1024px){}*/
@media screen and (min-width: 1200px){
    #contenu{
        margin-top: 260px;
    }
    h1{
        font-size: 275%;
    }
    .motivational-text-big {
        font-size: 150%;
    }
    .motivational-text-small {
        font-size: 120%;
    }
    /* Utilisé uniquement pour les featured testimonials: */
    .auto-float-quarter blockquote p{ font-size: 90%; }
    .standalone-mugshot{
        width: 70px; height: 70px;
        border-radius: 35px;
    }
    blockquote.fancy-big-quote{
        font-size: 125%;
    }
}
/* Change the layout again for the full HD widescreen version */
/*@media screen and (orientation: landscape) and (min-width: 1600px){
}*/

/* Corner case: les résolutions entre mobile et desktop où mon menu est trop verbeux. Aussi à garder même dans les résolutions mobiles (<720px) car ça élimine les // et \\ de mon menu */
@media screen and (max-width: 1000px){
    .optional_words{
        display: none;
    }
    .tuile_galerie img, .tuile_galerie_whiteBG img{
        /* Nasty hack mais ça marche */
        max-width: 75px !important;
        max-height: 50px !important;
}
/* Corner case pour désactiver le dégradé du menu sur les téléphones, sinon il s'en va sur ma face */
@media screen and (max-width: 500px){
    #page-nav{
        background: none;
    }
}