/* ==================================================

   SYSTEM.CSS

   Système de layout et composants du site

   ================================================== */


/* ==================================================
   ELEVATION
   ================================================== */


/*
   Principe

   Une seule variable --elevation contrôle :

   - la profondeur de l'ombre
   - le déplacement de l'objet

   L'objet se déplace donc exactement en fonction
   de la variation de son élévation.


   REPOS

   ┌──────────────┐
   │     CARD     │
   └──────────────┘
          █████
           █████


   HOVER

        ┌──────────────┐
        │     CARD     │
        └──────────────┘
          █████████
           █████████


   ACTIVE

   ┌──────────────┐
   │     CARD     │
   └──────────────┘
        ███


   Inspiré de :
   https://romaricpascal.is/posts/hover-effects-css-custom-properties/
*/


:root {

  /* ------------------------------------------------
     Valeurs générales
     ------------------------------------------------ */

  --elevation-base: 0.35em;
  --elevation-up: 0.50em;
  --elevation-down: 0.10em;

  --elevation-color: var(--system-color);

  --elevation-transition:
    transform 140ms ease-out;
}


/* --------------------------------------------------
   Élévation plate
   -------------------------------------------------- */

.elevation-flat {
  box-shadow: none;
}


/* --------------------------------------------------
   Élévation simple
   -------------------------------------------------- */

.elevation-1 {

  box-shadow:
    var(--elevation-base)
    var(--elevation-base)
    0
    var(--elevation-color);
}


/* --------------------------------------------------
   Élévation interactive générique
   -------------------------------------------------- */

.elevation-interactive {

  --elevation: var(--elevation-base);

  --shadow-elevation:
    var(--elevation)
    var(--elevation)
    0
    var(--elevation-color);

  --transform-elevation:
    translate(
      calc(
        var(--elevation-base) - var(--elevation)
      ),
      calc(
        var(--elevation-base) - var(--elevation)
      )
    );

  box-shadow:
    var(--shadow-elevation);

  transform:
    var(--transform-elevation);

  transition:
    var(--elevation-transition);
}


.elevation-interactive:hover,
.elevation-interactive:focus-visible {

  --elevation:
    var(--elevation-up);
     transform:

}


.elevation-interactive:active {

  --elevation:
    var(--elevation-down);
}


/* ==================================================
   LAYOUT
   ================================================== */

.container {

  width:
    min(
      calc(100% - (2 * var(--site-gutter))),
      var(--site-max-width)
    );

  margin-inline: auto;
}


.section,
.footer {

  margin-block:
    var(--pico-spacing);
}


/* ==================================================
   GRID
   ================================================== */

.grid {

  display: grid;

  gap:
    var(--pico-grid-row-gap)
    var(--pico-grid-column-gap);
}


.grid-2,
.grid-3,
.grid-4 {

  grid-template-columns: 1fr;
}


@media (min-width: 768px) {

  .grid-2,
  .grid-3,
  .grid-4 {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


@media (min-width: 1024px) {

  .grid-3 {

    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}


@media (min-width: 1280px) {

  .grid-4 {

    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }
}


/* --------------------------------------------------
   Grilles asymétriques
   -------------------------------------------------- */

.grid-1-2,
.grid-2-1,
.grid-1-3,
.grid-3-1 {

  grid-template-columns: 1fr;
}


@media (min-width: 768px) {

  .grid-1-2 {

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 2fr);
  }


  .grid-2-1 {

    grid-template-columns:
      minmax(0, 2fr)
      minmax(0, 1fr);
  }


  .grid-1-3 {

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 3fr);
  }


  .grid-3-1 {

    grid-template-columns:
      minmax(0, 3fr)
      minmax(0, 1fr);
  }
}


/* ==================================================
   CARD
   ================================================== */


/*
   La card possède directement son ombre.

   Pas de pseudo-élément :
   l'ombre et le déplacement sont calculés
   à partir de la même variable --elevation.
*/


.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;

  margin-bottom:
    calc(var(--pico-spacing) * 2);

  border:
    var(--pico-border-width)
    solid
    var(--system-color);

  box-shadow: none;
  transform: none;
}


/* --------------------------------------------------
   Card interactive
   -------------------------------------------------- */
a:has(> .card) {
  text-decoration: none;
}

a:has(> .card) > .card {

  --elevation-base: 0.35em;
  --elevation-up: 0.50em;
  --elevation-down: 0.10em;

  --elevation: var(--elevation-base);

  --shadow-elevation:
    var(--elevation)
    var(--elevation)
    0
    var(--elevation-color);

  --transform-elevation:
    translate(
      calc(var(--elevation-base) - var(--elevation)),
      calc(var(--elevation-base) - var(--elevation))
    );

  box-shadow:
    var(--shadow-elevation);

  transform:
    var(--transform-elevation);

  transition:
    transform 140ms ease-out,
    box-shadow 140ms ease-out;
}

a:has(> .card):hover > .card,
a:has(> .card):focus-visible > .card {
  --elevation: var(--elevation-up);
}

a:has(> .card):active > .card {
  --elevation: var(--elevation-down);
}


/* --------------------------------------------------
   Contenu de card
   -------------------------------------------------- */

.card > img {

  display: block;

  width: 100%;

  margin: 0;
}


.card > figure {

  margin-top: auto;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}


.card > header,
.card > .card-content,
.card > .content,
.card > footer {

  padding:
    calc(var(--pico-spacing) * 2);
}


/* ==================================================
   CARD — HORIZONTAL
   ================================================== */

.card-horizontal {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}


.card-horizontal > img,
.card-horizontal > figure {

  grid-column: 1;
  grid-row: 1;

  min-width: 0;

  margin: 0;
}


.card-horizontal > img {

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.card-horizontal > figure {

  padding: 0;
}


.card-horizontal > figure > img {

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.card-horizontal > header,
.card-horizontal > .card-content,
.card-horizontal > .content,
.card-horizontal > footer {

  grid-column: 2;
  grid-row: 1;
}


.card-horizontal.card-image-right > img,
.card-horizontal.card-image-right > figure {

  grid-column: 2;
}


.card-horizontal.card-image-right > header,
.card-horizontal.card-image-right > .card-content,
.card-horizontal.card-image-right > .content,
.card-horizontal.card-image-right > footer {

  grid-column: 1;
}


@media (max-width: 1279px) {

  .card-horizontal {

    grid-template-columns: 1fr;
  }


  .card-horizontal > img,
  .card-horizontal > figure,
  .card-horizontal.card-image-right > img,
  .card-horizontal.card-image-right > figure {

    grid-column: 1;
    grid-row: auto;
  }


  .card-horizontal > header,
  .card-horizontal > .card-content,
  .card-horizontal > .content,
  .card-horizontal > footer,
  .card-horizontal.card-image-right > header,
  .card-horizontal.card-image-right > .card-content,
  .card-horizontal.card-image-right > .content,
  .card-horizontal.card-image-right > footer {

    grid-column: 1;
    grid-row: auto;
  }
}


/* ==================================================
   CARD — THUMBNAIL
   ================================================== */

.card-thumbnail {

  position: relative;

  aspect-ratio: 4 / 3;

  overflow: hidden;

  padding: 0;
}


.card-thumbnail > img {

  display: block;

  width: 100%;
  height: 100%;

  margin: 0;

  object-fit: cover;
}


.card-thumbnail-overlay {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  padding:
    var(--pico-spacing);

  background:
    color-mix(
      in srgb,
      var(--pico-color) 80%,
      transparent
    );

  opacity: 0;

  transition:
    opacity var(--pico-transition);
}


.card-thumbnail-overlay h3 {

  margin: 0;

  color:
    var(--pico-primary-inverse);

  text-align: center;
}


a:hover .card-thumbnail .card-thumbnail-overlay,
a:focus-visible .card-thumbnail .card-thumbnail-overlay {

  opacity: 1;
}


/* ==================================================
   BUTTON
   ================================================== */


button,
[role="button"] {

  --button-shadow-color: var(--system-color);

  box-shadow:
    0.30em
    0.30em
    0
    var(--button-shadow-color);



 

  border-radius:
    var(--pico-border-button-radius);

  padding:
    calc(var(--pico-form-element-spacing-vertical) / 2)
    var(--pico-form-element-spacing-horizontal);
}


button:hover,
button:focus-visible,
[role="button"]:hover,
[role="button"]:focus-visible {

  box-shadow:
    0.3em
    0.3em
    0
    var(--button-shadow-color);


}


button:active,
[role="button"]:active {

  box-shadow:
    0.10em
    0.10em
    0
    var(--button-shadow-color);


}


/* --------------------------------------------------
   Bouton plein
   -------------------------------------------------- */

[role="button"].fill {

  background-color:
    var(--pico-primary);

  border-color:
    var(--pico-primary);

  color:
    var(--pico-primary-inverse);
}


/* --------------------------------------------------
   Bouton contour
   -------------------------------------------------- */

[role="button"].outline {

  background-color:
    transparent;

  border-color:
    var(--pico-primary);

  color:
    var(--pico-primary);
}


[role="button"].fill:hover,
[role="button"].fill:focus-visible {

  background-color:
    var(--pico-primary-hover);

  border-color:
    var(--pico-primary-hover);

  color:
    var(--pico-primary-inverse);
}


[role="button"].outline:hover,
[role="button"].outline:focus-visible {

  background-color:
    transparent;

  border-color:
    var(--pico-primary);

  color:
    var(--pico-primary);
}


[role="button"].fill:active {

  background-color:
    var(--pico-primary-hover);

  border-color:
    var(--pico-primary-hover);
}


[role="button"].outline:active {

  background-color:
    var(--pico-primary-hover);

  border-color:
    var(--pico-primary-hover);

  color:
    var(--pico-primary-inverse);
}


/* ==================================================
   BUTTON — THEME TOGGLE
   ================================================== */

#theme-toggle {

  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: auto;

  margin: 0;

  padding: 0.5em;
}


#theme-toggle .icon {

  width: 1.1em;
  height: 1.1em;
}


/* ==================================================
   NAVIGATION
   ================================================== */

header nav {

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap:
    var(--pico-spacing);
}


header nav > ul {

  display: flex;

  align-items: center;
  justify-content: center;

  flex-wrap: wrap;

  gap:
    var(--pico-spacing);

  margin: 0;
  padding: 0;
}


header nav li {

  margin: 0;
  padding: 0;
}


header nav a,
header nav button {

  white-space: nowrap;
}


header nav .icon-text {

  display: inline-flex;

  align-items: center;

  gap: 0.35em;
}


@media (min-width: 1280px) {

  header nav {

    flex-direction: row;

    justify-content: space-between;
  }


  header nav > ul {

    justify-content: initial;

    flex-wrap: nowrap;
  }
}


/* ==================================================
   ICONS
   ================================================== */

.icon {

  display: inline-block;

  width: 1em;
  height: 1em;

  vertical-align: -0.125em;

  flex: 0 0 auto;
}


.icon-text {

  display: inline-flex;

  align-items: center;

  gap: 0.35em;
}


.icon-external {

  width: 0.9em;
  height: 0.9em;
}


/* ==================================================
   THEME ICONS
   ================================================== */

.icon-theme-moon {

  display: none;
}


[data-theme="dark"] .icon-theme-sun {

  display: none;
}


[data-theme="dark"] .icon-theme-moon {

  display: inline-block;
}