/* ------------------------ */
/* ------------------------ */
/* -- STYLES SPÉCIFIQUES -- */
/* ------------------------ */
/* ------------------------ */

/*
DESCRIPTION :

Des styles qui sont appliqués de telle façon à ce qu'ils ne concernent que des éléments et des conteneurs très spécifiques ; soit car ils sont distingués par des ID, soit parce qu'ils ne sont présents qu'à des endroits très particuliers du contenu HTML.
*/

/* ----------------------- */
/* ----------------------- */
/* -- Styles d'éléments -- */

#bouton_partager {
   position: relative;
   /**/
   outline: none;
   text-decoration: underline;
}

#bouton_partager:focus-visible {
   outline: var(--bordure);
}

#bouton_partager::after {
   z-index: 1000;
   pointer-events: none;
   /**/
   position: fixed;
   top: 0;
   left: 0;
   display: flex;
   flex-direction: column;
   width: 100%;
   text-wrap: wrap;
   padding: var(--espacement-S) 0;
   /**/
   background: var(--couleur-claire);
   color: var(--couleur-sombre);
}

#bouton_partager.succes_partage::after {
   content: "Merci, c'est gentil ❤";
}

#bouton_partager.echec_partage::after {
   content: "Le partage a échoué ! ☹";
}

#bouton_partager.succes_copie_adresse::after {
   content: "Le lien a été copié dans votre presse‑papier ⎙";
}

#bouton_partager.echec_copie_adresse::after {
   content: "Le lien n'a pas pu être copié ! ☹";
}


/* ----------------------------- */
#es_logo {
   aspect-ratio: 1/1;
   max-width: calc(16 * var(--espacement-M));
}


/* ------------------------ */
/* ------------------------ */
/* -- Styles de sections -- */

#zone_console,
#sorties {
   display: flex;
   flex-direction: column;
   gap: var(--espacement-XL);
}

/* ------------------------------------ */
/* -- Zone des sorties de la console -- */
#sorties a,
#sorties button,
#sorties input {
   pointer-events: none;
   interactivity: inert;
   /**/
   text-decoration: none;
}

#sorties .invisible_dans_CLC {
   display: none;
}

/* ---------------------------------- */
/* -- Zone de saisie de la console -- */
#zone_saisie {
   z-index: 1000;
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   /**/
   background: var(--couleur-sombre);
   color: var(--couleur-claire);
   outline: var(--bordure);
   outline-offset: 0;
}

#zone_saisie:hover,
#zone_saisie:focus-within {
   background: var(--couleur-moyenne);
}

/* ----------------------------- */
#zone_saisie label {
   z-index: 1000;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   cursor: text;
}

/* ----------------------------- */
#zone_saisie .separateur_protocole::before {
   content: var(--contexte-CLC);
   order: 0;
   display: flex;
   align-items: center;
   text-align: center;
}

/* ----------------------------- */
#zone_saisie *:has(>#saisie) {
   display: flex;
   flex-direction: row;
   align-items: center;
   max-width: calc(60 * var(--espacement-M));
   padding: 0 var(--espacement-XL);
   margin-left: auto;
   margin-right: auto;
}

/* ----------------------------- */
#zone_saisie button[aria-hidden] {
   position: absolute;
   overflow: hidden;
   width: 1px;
   height: 1px;
   margin: -1px;
   padding: 0;
   /**/
   opacity: 0;
}

/* ----------------------------- */
#saisie {
   order: 2;
   flex: 1;
   /**/
   outline: none;
}

/* --------------------- */
/* -- Section contact -- */
p.courriel::before {
   content: "\72\6F\62\69\6E\2E\72\6F\6C\61\6E\64\2E\70\6F\72" / "";
   /* Le contenu vide après le slash est celui qui est interprété par les lecteurs d'écran, l'avoir vide permet d'éviter que les lecteurs ne lisent le contenu du pseudoélément */
}

P.courriel::after {
   content: "\74\66\6F\6C\69\6F\40\67\6D\61\69\6C\2E\63\6F\6D" / "";
   /* Le contenu vide après le slash est celui qui est interprété par les lecteurs d'écran, l'avoir vide permet d'éviter que les lecteurs ne lisent le contenu du pseudoélément */
}

/* ----------------------------- */
p.telephone::before {
   content: "\2B\33\33\00a0\36\00a0\35\32" / "";
   /* Le contenu vide après le slash est celui qui est interprété par les lecteurs d'écran, l'avoir vide permet d'éviter que les lecteurs ne lisent le contenu du pseudoélément */
}

p.telephone::after {
   content: "\00a0\37\37\00a0\30\37\00a0\31\31" / "";
   /* Le contenu vide après le slash est celui qui est interprété par les lecteurs d'écran, l'avoir vide permet d'éviter que les lecteurs ne lisent le contenu du pseudoélément */
}


/* ---------------- */
/* -- Section CV -- */
.cv:not(:has([aria-label="Contenu de la réponse du système"])),
.cv [aria-label="Contenu de la réponse du système"] {
   gap: var(--espacement-3XL);
}

@container (width > 720px) {
   .cv section {
      flex-direction: row;
   }
}

/* ----------------------------- */
.cv header:has(.portrait) {
   display: flex;
   flex-direction: column;
   gap: var(--espacement-XL);
}

@container (width > 480px) {
   .cv header:has(.portrait) {
      flex-direction: row;
      align-items: center;
   }
}

/* ----------------------------- */
.cv section .bloc {
   flex: 1;
}

@container (width < 721px) {
   .cv section .bloc {
      width: unset;
   }
}

/* ----------------------------- */
.cv header:has(.portrait) > * {
   flex: 1;
}

/* ----------------------------- */
.cv .portrait {
   aspect-ratio: 1 / 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   min-width: 256px;
   max-width: min(360px, 66.6vw);
   /**/
   background: var(--couleur-claire);
}

/* ----------------------------- */
.cv .portrait img {
   display: block;
   width: 87%;
   margin: auto auto 0 auto;
}

/* ----------------------------- */
.cv section h2 {
   display: inline-block;
   flex: 1 0 100%;
}

/* ----------------------------- */
.cv .metrique li {
   display: flex;
   flex-direction: row;
   align-items: center;
   /**/
   color: var(--couleur-sombre);
}

/* ----------------------------- */
.cv .metrique svg {
   aspect-ratio: 2/5;
   width: var(--espacement-M);
}

/* ----------------------------- */
.cv [role="meter"] {
   width: 100%;
}

/* ----------------------------- */
.cv [role="meter"] > div {
   display: flex;
   align-items: center;
   width: var(--valeur-meter);
   height: var(--espacement-L);
   /**/
   background: var(--couleur-sombre);
}

/* ----------------------------- */
.cv [role="meter"] label {
   color: var(--couleur-claire);
}