:root {
    --line-height: 1.2em;
}
html {
    font-family: 'outfit', Arial, Helvetica, sans-serif;
    letter-spacing: 0.05em;
    background: #FFFFFF;
    color: var(--octo-marine-100);
}

body {
    margin: 0;
}


main, footer {
    display: grid;
    grid-template-columns: [full-width-start] 2fr [big-content-start] 1fr [content-start] min(70ch, calc(100% - 64px)) [content-end] 1fr [big-content-end] 2fr [full-width-end];
}

main {
    background-color: var(--octo-marine-5);
}

main > * {
    grid-column: content;
}

.octo-point::after {
    content: '.';
    font-size: 1.5em;
    line-height: 0; /* empêche le point d'augmenter la taille prise par la ligne*/
    color: var(--octo-turquoise-100);
}

.octo-point.octo-deux-points::after {
    content: ':';
    font-size: 1em;
    margin-left: 5px;
}

/* HEADER */
header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Changer en deux colonnes? */
    align-items: center;
    grid-gap: 10px;

    margin: 10px
}

.header-quick-ref-card {
    text-align: center;
    text-transform: uppercase;

    width: fit-content;
    padding: 12px;
    border: 2px solid;
    border-radius: 16px;
    margin: auto;
}

#wip-disclaimer {
    color: var(--octo-red-100);
}

#wip-disclaimer::before {
    content: '🚧 ';
}

/* CONTEXTE USAGE */
ul[aria-label="Contextes d'usages"] {
    background-image:  url(assets/Illu_Montagne.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    height: 30em;
    position: relative;
    overflow: hidden;
    padding: 0;
}

@media (max-width: 30em) {
    ul[aria-label="Contextes d'usages"] {
        height: 42rem;
        background-size: cover;

        /* Trick pour que l'image de la montagne ne s'arrête pas brutalement */
        padding-left: 32px;
        margin-left: -32px;
        padding-right: 32px;
        margin-right: -32px;
    }
}


.contextes-usages-sublist {
    position: static;
}

.contextes-usages-list li {
    list-style: none;
    position: absolute;
}

ul[aria-label="Contextes d'usages"] > li {
    width: 100%;
    height: 100%;
}

.contextes-usages-sublist > li {
    background-color: var(--octo-white);
    padding: 5px;
    border-radius: 15px;
    transform: translate(-50%, -50%);
    text-align: center;
}

.contextes-usages-list-ecran-clavier-souris {
    top: 32%;
    left: 50%;
}

@media (max-width: 30em) {
    .contextes-usages-list-ecran-clavier-souris {
        left: 40%;
    }
}

.contextes-usages-list-synthese-vocale {
    top: 48%;
    left: 37%;
}

@media (max-width: 30em) {
    .contextes-usages-list-synthese-vocale {
        left: 25%;
    }
}

.contextes-usages-list-liseuse {
    top: 54%;
    left: 62%;
}

.contextes-usages-list-afficheur-braille {
    top: 60%;
    left: 42%;
}

@media (max-width: 30em) {
    .contextes-usages-list-afficheur-braille {
        left: 27%;
    }
}

.contextes-usages-list-assistant-vocal {
    top: 70%;
    left: 45%;
}

/* DEFINITION A11y WEB */
#definition-accessibilite-web-figure {
    margin-left: 0;
    margin-right: 0;
}

#definition-accessibilite-web-figure blockquote {
    margin: 0 0 10px;
    padding: 25px;
    border: 2px solid;
    border-radius: 20px;
    background-color: var(--octo-white);

    position: relative;
}

#definition-accessibilite-web-figure blockquote::before {
    content: url(assets/Guillemets_1.svg); /* taille actuellement determinée par svg - attente du vrai fichier */
    position: absolute;
    left: 0;
    top: 0;

    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%);
}

#definition-accessibilite-web-figure blockquote::after {
    content: url(assets/Guillemets_2.svg); /* taille actuellement determinée par svg - attente du vrai fichier */
    position: absolute;
    right: 0;
    bottom: 0;

    width: 64px;
    height: 64px;
    transform: translate(50%, 50%);
}

#definition-accessibilite-web-figure ul {
    margin-bottom: 0;
}


#definition-accessibilite-web-figure li::marker { /* pas compatible Safari */
    content: '> ';
    font-weight: bold;
}

/* CONCEVOIR POUR TOUT LE MONDE */
#qui-sont-vos-utilisateurs {
    padding: 0 20px;
    border: 2px solid;
    border-radius: 20px;
    background-color: var(--octo-turquoise-5);
}

#qui-sont-vos-utilisateurs-question {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
}

#qui-sont-vos-utilisateurs li::marker{
    content: '> ';
    font-weight: bold;
}

#qui-sont-vos-utilisateurs-pourcentage {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 20px;
    align-items: center;
}

#qui-sont-vos-utilisateurs-pourcentage > strong {
    font-size: 2em
}

#questions-user-research-p {
    margin-top: 40px;
    font-weight: bold;
}

#questions-user-research-list {
    margin-top: 0;
}

#questions-user-research-list li::marker{
    content: '> ';
    font-weight: bold;
}

#concevoir-pour-un-cas-extreme-par-exemple {
    display: block;
    margin-bottom: 10px;
}

/* NORMES ET LOIS */
#referentiels-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'wcag .'
                         'en .'
                         'rgaa-raam rgaa-raam';


    grid-gap: 10px;
}

@media (max-width: 40em) {
    #referentiels-list {
        grid-template-columns: 1fr;
    }
}

#list-item-wcag {
    grid-area: wcag;
}

#list-item-en {
    grid-area: en;
}

#list-item-rgaa-raam {
    grid-area: rgaa-raam;
}

#list-item-rgaa-raam > ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}

@media (max-width: 40em) {
    #list-item-rgaa-raam > ul {
        grid-template-columns: 1fr;
    }
}


#referentiels-list li {
    list-style: none;
    padding: 0;
}
#referentiels-list, #referentiels-list ol, #referentiels-list ul {
    padding: 0;
}

.referentiels-list-item-referentiel {
    padding: 10px;
    margin-bottom: 10px;
}

.referentiels-list-item-referentiel-name {
    display: grid;

    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    width: 100%;

    font-weight: bold;
    font-size: 1.5em;
    border-radius: 10em;
    border: 2px solid;
    background-color: var(--octo-white);
}

.referentiels-list-item-referentiel-name, .referentiels-list-item-referentiel-name > img {
    height: 3.5em;
}
#list-item-wcag .referentiels-list-item-referentiel-name > img,
#list-item-en .referentiels-list-item-referentiel-name > img {
    transform: scale(1.5);
}

.referentiels-list-item-referentiel-name-abbr-wrapper {
    border-left: 2px solid;
    width: 100%;
    height: 100%;

    display: grid;
    align-items: center;
    justify-items: center;
    text-align: center;
}

.referentiels-list-item-referentiel-description {
    margin-top: 10px;
    text-align: center;
}
.referentiels-list-item-referentiel-description > * {
    display: block;
}

.lois-echeances-france-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));
    grid-gap: 20px;
    padding: 0;
    justify-items: center;
}

.lois-echeances-france-list > li {
    list-style: none;

    width: 100%;
    text-align: center;

    padding: 15px 5px 5px;
    border: 2px solid;
    border-radius: 20px;

    display: grid;
    grid-auto-rows: 1fr 1fr;
}

.lois-echeances-france-list > li:nth-child(1) {
    background-color: var(--octo-turquoise-20);
}

.lois-echeances-france-list > li:nth-child(2) {
    background-color: var(--octo-marine-5);
}

.lois-echeances-france-list > li:nth-child(3) {
    background-color: var(--octo-white);
}

.lois-echeances-france-list-listitem-entete {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

#note-produits-numerique {
    font-size: 0.8em;
}


/* TRAVAIL D'EQUIPE */

/* REPARTITION CRITERES = KO DESKTOP / RESIZE */
.figure-repartition-criteres {
    grid-column: big-content;
    position: relative;
    margin: 0;
}

.figure-repartition-criteres figcaption {
    text-align: center;
}

.figure-repartition-criteres > ul {
    padding: 0;
}

.figure-repartition-criteres > img {
    width: auto;
    height: 15em;
    
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.figure-repartition-criteres-list-item {
    position: absolute;
    list-style: none;
    max-width: 30%;
}

@media (max-width: 40em) {
    .figure-repartition-criteres-list-item {
        position: initial;
        list-style: inherit;
        max-width: 100%;

        margin-left: 0;
        margin-bottom: 20px;
    }
}

.figure-repartition-criteres-list-item::marker{
    content: '> ';
    font-weight: bold;
}

.figure-repartition-criteres-list-item-pourcentage {
    font-weight: bold;
    display: block;
}

.figure-repartition-criteres-list-item-dev {
    top: 20%;
    right: 70%;
}

.figure-repartition-criteres-list-item-dev .figure-repartition-criteres-list-item-pourcentage {
    font-size: 2.5em;
}


.figure-repartition-criteres-list-item-contenu {
    top: 20%;
    left: 70%;
}
.figure-repartition-criteres-list-item-contenu .figure-repartition-criteres-list-item-pourcentage {
    font-size: 2em;
}


.figure-repartition-criteres-list-item-design {
    bottom: 5%;
    left: 70%;
}
.figure-repartition-criteres-list-item-design .figure-repartition-criteres-list-item-pourcentage {
    font-size: 1.5em;
}


/* TRAVAIL D'EQUIPE - ROLES-CLES */

#competences-clef-a11y-web {
    display: block;
}

.roles-cles-list {
    grid-column: big-content;
    padding: 0;

    --grid-layout-gap: 10px;
    --grid-column-count: 3;
    --roles-cles-grid-item-width: 24ch;

    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
    --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(var(--roles-cles-grid-item-width), var(--grid-item--max-width)), 1fr));
    grid-gap: var(--grid-layout-gap);
    justify-items: center;

}

.roles-cles-list > li {
    display: flex;
    flex-direction: column;

    max-width: var(--roles-cles-grid-item-width);

    list-style: none;
    padding: 0;
}

.roles-cles-list > li > img {
    height: 10em;
    width: auto;
}

.roles-cles-list > li > div > strong {
    display: block;
}

.roles-cles-list > li > div > strong::before {
    content: '> '
}

/* STACK TECHNIQUE */

/* STACK TECHNIQUE - SANDWICH */

.illustration-sandwich {
    position: relative;

    display: grid;
    justify-items: center;

    font-size: 1em;
}

.illustration-sandwich-img {
    height: auto;
    width: auto;
}

.illustration-sandwich-html, .illustration-sandwich-css, .illustration-sandwich-javascript, .illustration-sandwich-aria {
    position: absolute;
    margin: 0;
    transform: translate(-50%, 0%);
    overflow: hidden;
}

.illustration-sandwich-html {
    font-size: 1.6em;

    bottom: 8%;
    left: 51%;
}

@media (max-width: 30em) {
    .illustration-sandwich-html {
        font-size: 1.2em;
    }
}


.illustration-sandwich-css {
    font-size: 1.6em;

    bottom: 25%;
    left: 52%;
}


@media (max-width: 30em) {
    .illustration-sandwich-css {
        font-size: 1.2em;
    }
}

.illustration-sandwich-javascript {
    font-size: 1.6em;

    bottom: 37%;
    left: 50%
}

@media (max-width: 30em) {
    .illustration-sandwich-javascript {
        font-size: 1.2em;
    }
}

.illustration-sandwich-aria {
    font-size: 1.2em;

    bottom: 67%;
    left: 48%;
}

@media (max-width: 30em) {
    .illustration-sandwich-aria {
        font-size: 1em;
    }
}

/* STACK TECHNIQUE - LISTE */

.liste-stack-technique {
    padding-left: 0;
}

.liste-stack-technique > li {
    list-style: none;
    display: grid;
    grid-template-columns: 0fr 1fr;
    margin-bottom: 20px;
}

.nombre-liste {
    width: 3em;
    height: 3em;
    margin-right: 10px;
}

.liste-aria > li {
    margin-top: 10px;
}
.liste-aria > li::marker { /* pas compatible Safari TODO - remplacer avec list-style-type */
    content: '> ';
}

/* COMMENT VERIFIER */

.comment-verifier {
    display: grid;
    grid-template-columns: 0fr 1fr;
}

.naviguer-au-clavier-contenu {
    position: relative;

    border: 2px solid;
    border-radius: 20px;
    padding: 20px;

    background-color: var(--octo-marine-20);
}

.naviguer-au-clavier-contenu-picto-main {
    float: right;
    margin-top: 2em;

    height: 8em;
    width: auto;
}

/* General layout */
#affichage-simplifié,
label[for="affichage-simplifié"] {
    display: none;
}
@supports selector(:has( #affichage-simplifié:not(:checked))) {
    #affichage-simplifié,
    label[for="affichage-simplifié"] {
        display: revert;
    }
}

table.paliers {
    max-width: min(120em, 100%);
    margin: auto;
    grid-column: full-width;
}
table.paliers {
    display: block;
    overflow-x: scroll;
}
table.paliers tbody {
    margin-inline: 3ch;
    border-radius: 30px 30px 0 0;
}
table.paliers tr {
    --padding: 2ch;
    padding: var(--padding);
}
table.paliers {
    border-collapse: collapse;
}
table.paliers th,
table.paliers td {
    border: 1px solid black;
}
:has( #affichage-simplifié:not(:checked)) table.paliers th,
:has( #affichage-simplifié:not(:checked)) table.paliers td {
    border: none;
}

:has( #affichage-simplifié:not(:checked)) table.paliers {
    display: grid;
    grid-template-rows: 0 auto;
}
:has( #affichage-simplifié:not(:checked)) table.paliers thead {
    overflow: hidden;
}
:has( #affichage-simplifié:not(:checked)) table.paliers tbody {
    display: flex;
    flex-direction: column-reverse;
}
:has( #affichage-simplifié:not(:checked)) table.paliers tbody > * {
    flex: 1;
}
:has( #affichage-simplifié:not(:checked)) table.paliers tbody tr {
    display: grid;
    --content-column-count: 9;
    grid-template-columns:
        [step-number-start]
        auto
        [step-number-end step-name-start]
        2fr
        [step-name-end content-start]
        repeat(var(--content-column-count), 1fr)
        [content-end RGAA-percent-start]
        1fr
        [RGAA-percent-end RGAA-level-start]
        1.2em
        [RGAA-level-end];
    align-items: center;
}
:has( #affichage-simplifié:not(:checked)) table.paliers tbody tr th {
    grid-column: step-name;
}
:has( #affichage-simplifié:not(:checked)) table.paliers tbody tr td:nth-of-type(4) {
    grid-column: RGAA-percent;
    align-self: start;
}
:has( #affichage-simplifié:not(:checked)) table.paliers tbody tr td:nth-of-type(5) {
    grid-column: RGAA-level;
}
:has( #affichage-simplifié:not(:checked)) table.paliers tbody tr *,
:has( #affichage-simplifié:not(:checked)) table.paliers tbody tr::before {
    grid-row: 1;
}
/*
FIXME (GAFI 10-05-2024): support trop faible de :has (91%), mais idéalement
& :has([style*="--column"]) {
*/
:has( #affichage-simplifié:not(:checked)) table.paliers tbody tr td:not([style*="--column"]):not(:nth-of-type(4)):not(:nth-of-type(5)),
:has( #affichage-simplifié:not(:checked)) table.paliers tbody tr td ul {
    display: contents;
    list-style: none;
}
:has( #affichage-simplifié:not(:checked)) table.paliers tbody tr [style*="--column"] {
    --content-column-start: 2;
    --absolute-column: calc(var(--content-column-start) + var(--column));
    grid-column: var(--absolute-column);
}

/* Dotted lines */
:has( #affichage-simplifié:not(:checked)) table.paliers tbody tr:not(:first-of-type) {
    /* FIXME (GAFI 10-05-2024): Pas la bonne couleur */
    border-bottom: 1px dotted black;
}

/* Background image */
:has( #affichage-simplifié:not(:checked)) table.paliers tbody {
    --background-color: #def0f7;
    background-color: var(--background-color);
    background-image: url("./assets/Big_picture_ay11.svg");
    --background-svg-width: 590.18;
    --background-svg-height: 344.73;
    aspect-ratio: var(--background-svg-width) / var(--background-svg-height);
    /* FIXME (GAFI 10-05-2024): Valeur complètement sortie du chapeau en faisant joujou avec le responsive jusqu'à ce qu'une ligne wrap 1 fois de plus */
    min-width: 100rem;
}
:has( #affichage-simplifié:not(:checked)) table.paliers tbody tr:first-of-type {
    color: white;
    /* NOTE (GAFI 10-05-2024): Valeurs prises du SVG */
    --sea-floor-height: calc(344.73 - 339.43);
    --sea-height: calc(339.99 - 276.7);
    flex-basis: calc(((var(--sea-floor-height) + var(--sea-height)) / var(--background-svg-height)) * 100% - (var(--padding) * 2));
    flex-grow: 0;
    flex-shrink: 0;
}
:has( #affichage-simplifié:not(:checked)) table.paliers tbody tr:nth-of-type(2) th {
    max-width: 18ch;
}

/* Counter */
:has( #affichage-simplifié:not(:checked)) table.paliers {
    counter-reset: row -1;
}
:has( #affichage-simplifié:not(:checked)) table.paliers tbody tr {
    counter-increment: row;
}
:has( #affichage-simplifié:not(:checked)) table.paliers tbody tr::before {
    grid-column: step-number;
    content: counter(row) " ";
    font-size: calc(2 * var(--line-height));
    font-weight: bold;
}

/* Shapes */
/* Tests */
:has( #affichage-simplifié:not(:checked)) table.paliers tbody td:nth-of-type(1):not(:empty) {
    background-color: white;
    border: 1px solid currentColor;
    border-radius: 100vmax;
    color: var(--octo-marine-100);
    /* FIXME (GAFI 10-05-2024): chapeau */
    padding-left: 1.5ch;
    padding-right: 1.5ch;
    /* FIXME (GAFI 10-05-2024): Valeur sortie du chapeau telle que les retours à la ligne matchent la version print */
    font-size: .75rem;
    /* FIXME (GAFI 10-05-2024): Valeur sortie du chapeau telle que les retours à la ligne matchent la version print */
    width: 17ch;
    min-height: calc(2 * var(--line-height));
    text-align: center;
    align-content: center;
}
/* Roles */
:has( #affichage-simplifié:not(:checked)) table.paliers tbody td:nth-of-type(2):not(:empty),
:has( #affichage-simplifié:not(:checked)) table.paliers tbody td:nth-of-type(2) li {
    color: white;
    background-color: var(--octo-marine-100);
    /* FIXME (GAFI 10-05-2024): chapeau */
    border-radius: 10px;
    /* FIXME (GAFI 10-05-2024): chapeau */
    font-size: .75rem;
    min-height: calc(2 * var(--line-height));
    /* FIXME (GAFI 10-05-2024): chapeau */
    padding-left: 1ch;
    padding-right: 1ch;
    padding-block: .2em;
    text-align: center;
    align-content: center;
    /* FIXME (GAFI 10-05-2024): chapi */
    min-width: 18ch;
    /* FIXME (GAFI 10-05-2024): chapo */
    max-width: 22ch;
    width: fit-content;
    /* FIXME (GAFI 10-05-2024): 🐈🫖 */
    font-weight: lighter;
}
:has( #affichage-simplifié:not(:checked)) table.paliers tbody :any-link {
    color: inherit;
}
:has( #affichage-simplifié:not(:checked)) table.paliers [style*="--character"] {
    position: relative;
}
:has( #affichage-simplifié:not(:checked)) table.paliers [style*="--character"]::after {
    content: var(--character, var(--item));
    position: absolute;
    transform: scaleX(calc(var(--looking-left, -1) * -1)) /* FIXME (GAFI 10-05-2024): Well, if you're sure... better by... GRYFFINDOR! 🧙 */ /* Revoir les SVG pour pas avoir du padding débile autour des personnages */ /* Also, comme le padding est pas le même sur chaque perso, ils ont pas la même taille */ translateY(calc(-100% + var(--baseline, 0)));
    left: var(--position-left, auto);
    top: 0;
    right: var(--position-right, auto);
    /* FIXME (GAFI 10-05-2024): Ne se resize pas avec le viewport alors que le bonhomme à la base de la montagne si...
         peut-être il va falloir sortir le vw ? */
    height: 8rem;
    aspect-ratio: 1;
    pointer-events: none;
}
:has( #affichage-simplifié:not(:checked)) table.paliers tr:last-of-type [style*="--character"] {
    transform: translateY(100%);
}

:has( #affichage-simplifié:not(:checked)) table.paliers [class*="-cloud"] {
    position: relative;
    z-index: 1;
    /* FIXME (GAFI 13-05-2024): Mettre en commun avec les autres contenus */
    font-size: .65rem;
    min-height: calc(2 * var(--line-height));
    /* FIXME (GAFI 10-05-2024): chapi */
    min-width: var(--min-text-length, 18ch);
    /* FIXME (GAFI 10-05-2024): chapo */
    max-width: var(--max-text-length, 22ch);;
    padding-inline: 2ch;
}
:has( #affichage-simplifié:not(:checked)) table.paliers [class*="-cloud"].large-cloud {
    --scale: 1.5;
    --min-text-length: 18ch;
    --max-text-length: 22ch;
}
:has( #affichage-simplifié:not(:checked)) table.paliers [class*="-cloud"].small-cloud {
    --scale: 1.5;
    --min-text-length: 12ch;
    --max-text-length: 19ch;
}
:has( #affichage-simplifié:not(:checked)) table.paliers [class*="-cloud"]::before {
    content: url("./assets/Nuage_2.svg");
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    transform:
            translate(-50%, -55%)
            scale(var(--scale, 1));
    z-index: -1;
}

:has( #affichage-simplifié:not(:checked)) table.paliers [rowspan="2"] {
    white-space: pre;
    align-self: start;
    transform-origin: top center;
    width: fit-content;
    transform:
            translateY(calc(0ch - var(--padding)))
            translateX(-50%)
            rotate(-90deg);
}

/* Temporaire en attendant l'integration des images */
img {
    width: 5em;
    height: 5em;
}

/* FOOTER */

#footer-wrapper {
    grid-area: big-content;

    display: grid;
    align-content: center;
}

footer li {
    list-style: none;
    display: inline;
}

#on-fabrique-accessible {
    margin-top: 25px;
    margin-bottom: 0;
    width: 100%;
    text-align: center;
}

#logo-octo-acn {
    margin: 20px auto;
    width: 10em;
}
#footer-bottom-line {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 10px;

    text-align: center;
}

#footer-bottom-line ul {
    display: flex;
    flex-direction: row;
    gap: 30px;
    margin: 0;
}
#footer-bottom-line a {
    display: inline-block;
}



#footer-bottom-line p, #footer-bottom-line li {
    margin: 0;
}

.cc-by-sa {
    height: 1.2em;
    width: 1.2em;
    margin-left: 0.2em;
}

.lien-externe {
    height: 1em;
    width: 1em;
}