@charset "UTF-8";
*, *:before, *:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
      -ms-text-size-adjust: none;
          text-size-adjust: none;
}

footer, header, nav, section, main {
  display: block;
}

body {
  line-height: 1.6;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}

@font-face {
  font-family: "icomoon";
  src: url("fonts/icomoon.eot?s4w1j5");
  src: url("fonts/icomoon.eot?s4w1j5#iefix") format("embedded-opentype"), url("fonts/icomoon.ttf?s4w1j5") format("truetype"), url("fonts/icomoon.woff?s4w1j5") format("woff"), url("fonts/icomoon.svg?s4w1j5#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^=icon-], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-kigan:before {
  content: "\e900";
}

.icon-kaisetsu:before {
  content: "\e901";
}

.icon-home:before {
  content: "\e902";
}

.icon-search:before {
  content: "\e986";
}

.icon-menu:before {
  content: "\e9bd";
}

.icon-cancel-circle:before {
  content: "\ea0d";
}

.icon-checkmark:before {
  content: "\ea10";
}

.icon-checkmark2:before {
  content: "\ea11";
}

.icon-play:before {
  content: "\ea15";
}

.icon-pause:before {
  content: "\ea16";
}

.icon-stop:before {
  content: "\ea17";
}

.icon-backward:before {
  content: "\ea1a";
}

.icon-forward:before {
  content: "\ea1b";
}

.icon-arrow-up-left:before {
  content: "\ea39";
}

.icon-arrow-up-right:before {
  content: "\ea3b";
}

.icon-arrow-down-right:before {
  content: "\ea3d";
}

.icon-arrow-down-left:before {
  content: "\ea3f";
}

.icon-circle-up:before {
  content: "\ea41";
}

.icon-circle-right:before {
  content: "\ea42";
}

.icon-circle-down:before {
  content: "\ea43";
}

.icon-circle-left:before {
  content: "\ea44";
}

.icon-radio-checked:before {
  content: "\ea54";
}

.icon-radio-unchecked:before {
  content: "\ea56";
}

.icon-onedrive:before {
  content: "\eaaf";
}

:root {
  --couleur-texte: rgba(34, 34, 34, 1);
  --blanc: rgba(243, 254, 255, 1);
  --couleur-fond: rgba(235, 248, 250, 1);
  --couleur-claire: rgba(217, 234, 236, 1);
  --couleur-claire2: rgba(144, 199, 205, 1);
  --couleur-moyenne: rgba(82, 168, 177, 1);
  --couleur-foncee: rgba(0, 126, 140, 1);
  --contraste: rgba(235, 215, 62, 1);
  --shadows: rgba(83, 101, 102, 0.5);
  --akai: rgba(181, 33, 33, 1);
  --midori: rgba(53, 150, 53, 1);
  --midori2: rgba(35, 125, 35, 1);
  --shiro: rgba(189, 136, 51, 1);
  --shiro2: rgba(225, 171, 85, 1);
  --murasaki: rgba(133, 27, 143, 1);
  --kuro: rgba(36, 58, 61, 1);
  --kuro-moyen: rgba(36, 58, 61, 0.67);
  --kuro-clair: rgba(56, 89, 94, 0.33);
  --ombre: rgba(0, 0, 0, 0.3);
  --radius: 5px;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 12px;
  line-height: 1.5;
}

a {
  text-decoration: none;
}

a.arrow {
  display: block;
  position: fixed;
  cursor: pointer;
  left: 50%;
  width: 0;
  top: 140px;
  font-size: 2.5rem;
  color: var(--couleur-claire2);
}

a.arrow.left {
  margin-left: calc(0% - 350px);
}

a.arrow.right {
  margin-left: calc(0% + 350px - 2.5rem);
}

.arrow__pop {
  display: none;
  text-align: center;
  position: fixed;
  cursor: pointer;
  width: 300px;
  height: auto;
  left: 50%;
  top: 180px;
  background-color: var(--kuro);
  padding: 0.5rem 0.75rem;
  border-radius: 5px;
  z-index: 1000000;
}

.arrow__pop.left {
  margin-left: calc(0% - 350px);
}

.arrow__pop.right {
  margin-left: calc(0% + 50px);
}

.cadreinfos__titre {
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--couleur-claire);
}

.cadreinfos__date {
  font-size: 1.1rem;
  color: var(--couleur-claire2);
}

@media (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  a.arrow.left {
    margin-left: -48%;
    z-index: 3;
  }
  a.arrow.right {
    margin-left: calc(48% - 2.5rem);
  }
  .arrow__pop.left {
    margin-left: -48%;
  }
  .arrow__pop.right {
    margin-left: calc(48% - 300px);
  }
}
@media (max-width: 1024px) and (min-width: 441px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  a.arrow.left {
    margin-left: -48%;
    z-index: 3;
  }
  a.arrow.right {
    margin-left: calc(48% - 2.5rem);
  }
  .arrow__pop.left {
    margin-left: -48%;
  }
  .arrow__pop.right {
    margin-left: calc(48% - 300px);
  }
}
@media (max-width: 440px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  a.arrow.left {
    margin-left: -49%;
    z-index: 3;
  }
  a.arrow.right {
    margin-left: calc(49% - 2.5rem);
  }
  .arrow__pop.left {
    margin-left: -49%;
  }
  .arrow__pop.right {
    margin-left: calc(49% - 300px);
  }
}
/*@group Minical */
.calendriermini {
  position: relative;
}

.calendriermini .calendar-container {
  width: 100%;
  position: relative;
  padding: 1em 0;
}

.calendriermini .calendar-container .image_loading {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -16px;
  margin-left: -16px;
}

:root {
  --minical-border-color: var(--couleur-foncee);
  --minical-active-bg: var(--couleur-fond);
  --minical-active-color: var(--couleur-moyenne);
  --minical-active-border-color: var(--kuro);
  --minical-active-bg-hover: var(--contraste);
  --minical-border-dark-color: var(--couleur-texte);
  --minical-day-disabled-color: var(--couleur-fond);
  --minical-calendrier-couleur6-bg: var(--couleur-claire);
  --minical-calendrier-couleur6-bg-hover: var(--couleur-claire2);
  --minical-calendrier-couleur6-color: var(--couleur-moyenne);
}

.menu-titre {
  display: none;
}

.js .calendriermini .calendar-container .alt {
  display: none;
}

.calendriermini table .table-condensed {
  width: 100%;
  font-size: 0.9em;
  text-align: center;
  margin: 0 auto;
  border-collapse: collapse;
}

.calendriermini table caption {
  margin: 0 auto;
  padding: 0;
}

.calendriermini table th {
  padding: 0;
}

.calendriermini table th, .calendriermini table td {
  line-height: 1.75em;
  padding: 0;
  background: var(--minical-calendrier-couleur6-bg);
}

/* version jqueryui */
.calendriermini .ui-datepicker-inline {
  width: 100;
  border: 0 !important;
  padding: 0 !important;
}

.calendriermini .datepicker .datepicker-days table thead tr:last-of-type {
  background-color: var(--minical-calendrier-couleur6-bg);
}

.calendriermini .datepicker .datepicker-days table tbody tr td.active.day:first-of-type {
  background-color: var(--minical-calendrier-couleur6-color);
}

.calendriermini .datepicker .datepicker-days table tbody tr td.active.day:first-of-type:hover {
  background-color: var(--minical-calendrier-couleur6-bg-hover);
}

.calendriermini .datepicker .datepicker-days table tbody tr td.old.active.day, .calendriermini .datepicker .datepicker-days table tbody tr td.new.active.day {
  background-color: var(--minical-day-disabled-color);
  color: #CCC;
}

/* version picker SPIP 4 sans jqueryui */
.calendriermini .datepicker-inline {
  width: 100% !important;
  border: 0 !important;
  padding: 0 !important;
}

.calendriermini .datepicker-inline th.dow {
  background-color: var(--minical-calendrier-couleur6-bg);
  font-weight: 600;
  color: var(--minical-border-dark-color);
}

.calendriermini .datepicker-inline .old.day, .calendriermini .datepicker-inline .new.day {
  background-color: var(--minical-day-disabled-color);
}

/*@end*/
/*@group perso*/
.calendriermini table.table-condensed thead tr th.prev, .calendriermini table.table-condensed thead tr th.datepicker-switch, .calendriermini table.table-condensed thead tr th.next {
  background-color: var(--minical-calendrier-couleur6-color);
  color: var(--minical-border-dark-color);
  cursor: pointer;
  font-weight: 600;
  text-align: center;
  font-size: 1.6em;
}

table.table-condensed thead tr th.dow {
  background-color: var(--minical-calendrier-couleur6-bg-hover);
}

table.table-condensed thead tr th.dow:first-of-type {
  background-color: var(--minical-calendrier-couleur6-color);
}

.table-condensed {
  background-color: var(--minical-calendrier-couleur6-bg-hover);
  color: var(--minical-border-dark-color);
}

.table-condensed tbody tr td.active:active {
  background-color: var(--minical-active-bg);
}

/*@end*/
/*@group Datepicker*/
.datepicker table {
  margin: 0;
  width: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.datepicker td,
.datepicker th {
  text-align: center;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
  cursor: pointer;
}

.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active[disabled],
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active.disabled:hover[disabled] {
  background-color: var(--minical-calendrier-couleur6-bg-hover);
}

.datepicker table tr td span {
  display: block;
  width: 23%;
  height: 54px;
  line-height: 54px;
  float: left;
  margin: 1%;
  cursor: pointer;
  /*border-radius: 4px*/
}

.datepicker table tr td span:hover,
.datepicker table tr td span.focused {
  background: #eee;
}

.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
  background: none;
  color: var(--minical-day-disabled-color);
  cursor: default;
}

.datepicker table tr td span.old,
.datepicker table tr td span.new {
  color: var(--minical-day-disabled-color, #999);
}

.datepicker .datepicker-switch {
  width: 145px;
}

.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next,
.datepicker tfoot tr th {
  cursor: pointer;
}

.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker tfoot tr th:hover {
  background: #eee;
}

.datepicker .prev.disabled,
.datepicker .next.disabled {
  visibility: hidden;
}

.datepicker .cw {
  font-size: 10px;
  width: 12px;
  padding: 0 2px 0 5px;
  vertical-align: middle;
}

.input-append.date .add-on,
.input-prepend.date .add-on {
  cursor: pointer;
}

.input-append.date .add-on i,
.input-prepend.date .add-on i {
  margin-top: 3px;
}

.input-daterange input {
  text-align: center;
}

/*.input-daterange input:first-child
 * border-radius: 3px 0 0 3px*/
/*.input-daterange input:last-child
 * border-radius: 0 3px 3px 0*/
.input-daterange .add-on {
  display: inline-block;
  width: auto;
  min-width: 16px;
  height: 20px;
  padding: 4px 5px;
  font-weight: normal;
  line-height: 20px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  vertical-align: middle;
  background-color: #eee;
  border: 1px solid #ccc;
  margin-left: -5px;
  margin-right: -5px;
}

.datepicker.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  display: none;
  min-width: 160px;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  /*border-radius: 5px*/
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  border-right-width: 2px;
  border-bottom-width: 2px;
  color: #333333;
  font-size: 13px;
  line-height: 20px;
}

.datepicker.dropdown-menu th,
.datepicker.datepicker-inline th,
.datepicker.dropdown-menu td,
.datepicker.datepicker-inline td {
  padding: 4px 5px;
}

form {
  all: unset;
  display: block;
  font: inherit;
}

.formulaire_spip {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 1em 0;
}

.editer-groupe {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  justify-content: space-evenly;
  margin: 2em 0;
}

input.search, input.submit {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0.5em;
  border-radius: var(--radius);
  font-size: 1.2em;
  border: 1px solid var(--couleur-moyenne);
  font-size: 1.6em;
  vertical-align: middle;
}

input.search {
  width: 60%;
  background-color: var(--couleur-fond);
  color: var(--couleur-foncee);
}

input.search::-webkit-input-placeholder {
  color: var(--couleur-claire2);
}

input.search::-moz-placeholder {
  color: var(--couleur-claire2);
}

input.search:-ms-input-placeholder {
  color: var(--couleur-claire2);
}

input.search::-ms-input-placeholder {
  color: var(--couleur-claire2);
}

input.search::placeholder {
  color: var(--couleur-claire2);
}

input.submit {
  width: 20%;
  background-color: var(--couleur-moyenne);
  color: var(--couleur-claire);
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
input.submit:hover {
  background-color: var(--couleur-foncee);
  color: var(--couleur-claire);
  border: 1px solid var(--couleur-foncee);
}
input.submit:active {
  background-color: var(--couleur-claire2);
  border: 1px solid var(--couleur-claire2);
}

input.submit[value=""] {
  background-image: url("images/logo-150.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 35%;
}

nav {
  width: 100%;
}

ul.nav {
  position: fixed;
  top: 50px;
  width: 0%;
  left: 50%;
  margin-left: calc(0% - 350px);
  font-size: 2.5em;
  line-height: 1.6;
  color: var(--couleur-claire2);
  z-index: 3;
}
ul.nav .icon-home {
  color: var(--couleur-claire2);
}

.sommaire ul.nav .icon-home {
  opacity: 0.05;
  color: var(--couleur-foncee);
}

.article ul.nav .icon-home {
  color: var(--couleur-claire2);
}
.article ul.nav .icon-home li.nav__liste {
  display: inline-block;
  width: auto;
  margin: 0 15px;
  height: auto;
  padding: 5px 25px;
  text-align: center;
}
.article ul.nav .icon-home li.nav__liste a {
  color: var(--couleur-claire2);
  font-size: 1.2em;
  text-decoration: none;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.article ul.nav .icon-home li.nav__liste a:hover {
  color: var(--couleur-claire);
}
.article ul.nav .icon-home li.nav__liste:last-child {
  border-right: none;
}
.article ul.nav .icon-home li.nav__liste h3.liste__titre {
  font-size: 1.2em;
}
.article ul.nav .icon-home li.nav__liste h3.liste__titre span.icone {
  content: "";
  margin-right: 10px;
  color: var(--couleur-claire2);
  -webkit-transition: all 1.3s ease-in-out;
  transition: all 1.3s ease-in-out;
}

#appelermenu {
  cursor: pointer;
  display: block;
}
#appelermenu.none {
  display: none;
}

#fermermenu {
  display: block;
  cursor: pointer;
}
#fermermenu.none {
  display: none;
}

ul.menu {
  display: none;
  position: fixed;
  top: 15vh;
  width: 600px;
  height: auto;
  left: 50%;
  margin-left: -300px;
  padding: 5px 2px;
  font-size: 1.2;
  line-height: 1.6;
  color: var(--couleur-claire);
  background-color: var(--kuro);
  border-radius: var(--radius);
  z-index: 5;
}
ul.menu li.menu__liste {
  display: block;
  width: 98%;
  margin: 5px 1%;
  height: auto;
  padding: 5px 25px;
  text-align: left;
  background-color: var(--kuro-clair);
}
ul.menu li.menu__liste a {
  color: var(--contraste);
  font-size: 1.5em;
  text-decoration: none;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
ul.menu li.menu__liste a:hover {
  color: var(--couleur-claire);
}
ul.menu li.menu__liste:last-child {
  border-bottom: none;
}
ul.menu li.menu__liste h3.liste__titre {
  font-size: 1.4em;
  margin-bottom: 5px;
  cursor: pointer;
}
ul.menu li.menu__liste h3.liste__titre span.icone {
  margin-right: 10px;
  color: var(--couleur-claire);
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
ul.menu li li {
  margin-left: 20px;
  text-decoration: none;
  padding: 5px 0;
}

.sommaire nav #kigan {
  display: none;
}

nav #kigan {
  position: fixed;
  top: 235px;
  width: 0%;
  left: 50%;
  margin-left: calc(0% - 350px);
  font-size: 2.5em;
  line-height: 1.6;
  font-size: 2.5em;
  color: var(--couleur-claire2);
  cursor: pointer;
  z-index: 3;
}
nav #kigan #kigan__inori {
  display: none;
  cursor: pointer;
}
nav #kigan #kigan__inori.none {
  display: none;
}
nav #kigan #kigan__cancel {
  display: none;
  cursor: pointer;
}
nav #kigan #kigan__cancel.none {
  display: none;
}

@media (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  ul.nav, nav #kigan {
    margin-left: -48%;
  }
  ul.menu {
    width: 60%;
    font-size: 1.3;
    z-index: 5;
    margin-left: -30%;
    top: 10vh;
  }
}
@media (max-width: 1024px) and (min-width: 441px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  ul.nav, nav #kigan {
    margin-left: -48%;
  }
  ul.menu {
    width: 60%;
    font-size: 1.1;
    z-index: 5;
    margin-left: -30%;
    top: 10vh;
  }
}
@media (max-width: 440px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  ul.nav, nav #kigan {
    margin-left: -49%;
  }
  ul.menu {
    width: 98%;
    margin-left: -49%;
    top: 16vh;
    font-size: 1.1;
    z-index: 10000;
  }
}
.sommaire header, .sommaire .header {
  /* Header : Deux sortes de header pour différencier les deux articles potentiels */
  display: grid;
  grid-template-columns: 0 1fr 250px 350px 1fr;
  grid-template-rows: auto;
  grid-template-areas: "leftsquares left logo breve right";
  background: linear-gradient(to bottom, var(--couleur-claire) 0%, var(--couleur-moyenne) 1px, var(--couleur-foncee) 60%);
  color: var(--couleur-claire);
}
.sommaire header .logo, .sommaire .header .logo {
  grid-area: logo;
  overflow: hidden;
  place-self: center center;
  padding: 0.5rem 0;
}
.sommaire header .breve, .sommaire .header .breve {
  grid-area: breve;
  padding: 1rem;
  place-self: center center;
  text-align: justify;
  color: var(--couleur-claire);
}
.sommaire header .breve .breve__title, .sommaire .header .breve .breve__title {
  font-size: 1.6rem;
  position: relative;
  text-align: center;
  padding: 1.4rem 1rem;
  font-weight: 500;
  color: var(--couleur-claire);
}
.sommaire header .breve .breve__texte, .sommaire .header .breve .breve__texte {
  font-size: 1.6rem;
  line-height: 1.6;
  text-align: center;
  color: var(--couleur-claire2);
}

.sommaire #jour {
  display: grid;
  grid-template-columns: 1fr 600px 1fr;
  grid-template-rows: auto;
  grid-template-areas: "left titre right";
  background-color: color-mix(in srgb, var(--couleur-claire2) 50%, transparent);
}

.titre {
  grid-area: titre;
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  grid-template-rows: auto;
  grid-template-areas: "fete title definition fete2 iconcircle";
  align-self: end;
  padding: 0.5rem 0;
  font-size: 1.6rem;
}
.titre .titre__title {
  grid-area: title;
  color: var(--couleur-foncee);
  padding: 0 0.5rem 0 0;
  font-weight: 500;
}
.titre .titre__definition {
  grid-area: definition;
  color: var(--couleur-moyenne);
  padding: 0 0.5rem 0 0;
}
.titre .titre__fete {
  grid-area: fete;
  color: var(--couleur-foncee);
  padding: 0 0.5rem 0 0;
}
.titre .titre__shiro {
  grid-area: fete2;
  color: var(--shiro);
}
.titre .titre__akai {
  grid-area: fete2;
  color: var(--akai);
}
.titre .icon-circle-right {
  grid-area: iconcircle;
  color: var(--couleur-foncee);
  text-align: right;
  font-weight: 500;
  align-self: center;
}

.article header, .article .header {
  display: grid;
  grid-template-columns: 0 1fr 170px 430px 1fr;
  grid-template-rows: auto;
  grid-template-areas: "leftsquares left logo titre right" "leftsquares left logo sous-titre right";
  min-height: 180px;
  background: linear-gradient(to bottom, var(--couleur-claire) 0%, var(--couleur-moyenne) 1px, var(--couleur-foncee) 60%);
  color: var(--couleur-claire);
  place-items: center;
}
.article header .logo, .article .header .logo {
  grid-area: logo;
  padding: 0.5rem 0 0 1.5rem;
}
.article header .titre, .article .header .titre {
  grid-area: titre;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto auto;
  grid-template-areas: "title titlebis" "definition definitionbis" "fete fete";
  align-items: baseline;
}
.article header .titre .titre__title, .article .header .titre .titre__title {
  grid-area: title;
  font-size: 1.7rem;
  color: var(--contraste);
  font-weight: 500;
  place-self: center center;
  padding: 0 0.5rem;
}
.article header .titre .titre__titlebis, .article .header .titre .titre__titlebis {
  grid-area: titlebis;
  font-size: 1.7rem;
  color: var(--contraste);
  font-weight: 500;
  place-self: center center;
  padding: 0 0.5rem;
}
.article header .titre .titre__titlebis:empty, .article .header .titre .titre__titlebis:empty {
  width: 0;
  display: none;
}
.article header .titre .titre__definition, .article .header .titre .titre__definition {
  grid-area: definition;
  font-size: 1.4rem;
  color: var(--couleur-claire);
  place-self: center center;
  padding: 0;
}
.article header .titre .titre__definitionbis, .article .header .titre .titre__definitionbis {
  grid-area: definitionbis;
  font-size: 1.4rem;
  color: var(--couleur-claire);
  place-self: center center;
  padding: 0;
}
.article header .titre .titre__definitionbis:empty, .article .header .titre .titre__definitionbis:empty {
  width: 0;
  display: none;
}
.article header .titre .titre__fete, .article .header .titre .titre__fete {
  grid-area: fete;
  font-size: 1.2rem;
  color: var(--contraste);
  place-self: center center;
  padding: 1rem 0 0 0;
}
.article header .titre .titre__fetebis, .article .header .titre .titre__fetebis {
  display: none;
}
.article header .titre .titre__fetebis:empty, .article .header .titre .titre__fetebis:empty {
  width: 0;
  display: none;
}
.article header .titre .titre__title, .article header .titre .titre__titlebis, .article header .titre .titre__definition, .article header .titre .titre__definitionbis, .article header .titre .titre__fete, .article header .titre .titre__akai, .article header .titre .titre__shiro, .article .header .titre .titre__title, .article .header .titre .titre__titlebis, .article .header .titre .titre__definition, .article .header .titre .titre__definitionbis, .article .header .titre .titre__fete, .article .header .titre .titre__akai, .article .header .titre .titre__shiro {
  padding: 0 1rem;
}
.article header .titre .titre__akai, .article .header .titre .titre__akai {
  grid-area: fete;
  font-size: 1.1rem;
  color: var(--akai);
  place-self: center center;
  padding: 1rem 0 0 0;
  font-weight: 400;
}
.article header .titre .titre__shiro, .article .header .titre .titre__shiro {
  grid-area: fete;
  font-size: 1.2rem;
  color: var(--contraste);
  place-self: center center;
  padding: 1rem 0 0 0;
  font-weight: 500;
}
.article header .sous-titre, .article .header .sous-titre {
  grid-area: sous-titre;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  grid-template-areas: "date" "infos";
  align-items: baseline;
  font-size: 1.1rem;
  color: var(--couleur-claire);
}
.article header .sous-titre .sous-titre__date, .article .header .sous-titre .sous-titre__date {
  grid-area: date;
  place-self: center center;
}
.article header .sous-titre .sous-titre__infos, .article .header .sous-titre .sous-titre__infos {
  grid-area: infos;
  place-self: center center;
}

/* Pour jQuery, bis */
.titreter {
  grid-area: titre;
}
.titreter .titre__titleter {
  font-weight: 500;
  font-size: 2.4rem;
  color: var(--contraste);
  padding: 3rem 0;
}

@media (max-width: 1366px) and (min-width: 957px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  .sommaire header, .sommaire .header {
    grid-template-columns: 0 0.5fr 200px 60% 0.5fr;
  }
  .sommaire header .logo, .sommaire .header .logo {
    justify-self: start;
    margin-left: 50px;
    padding: 0;
  }
  .sommaire header .breve .breve__title, .sommaire .header .breve .breve__title {
    font-size: 2rem;
    font-weight: 500;
  }
  .sommaire header .breve .breve__texte, .sommaire .header .breve .breve__texte {
    font-size: 2rem;
  }
  .sommaire #jour {
    grid-template-columns: 15% 70% 15%;
  }
  .sommaire #jour .titre__title, .sommaire #jour .titre__definition, .sommaire #jour .titre__fete, .sommaire #jour .titre__shiro, .sommaire #jour .titre__akai, .sommaire #jour .icon-circle-right {
    font-size: 2rem;
  }
  .article header, .article .header {
    grid-template-columns: 0 0.5fr 200px 60% 0.5fr;
    min-height: 200px;
    overflow: hidden;
  }
  .article header .logo, .article .header .logo {
    grid-area: logo;
    justify-self: start;
    padding-right: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  .article header .titre, .article .header .titre {
    grid-area: titre;
  }
  .article header .titre .titre__title, .article header .titre .titre__titlebis, .article .header .titre .titre__title, .article .header .titre .titre__titlebis {
    font-size: 1.8rem;
  }
  .article header .titre .titre__definition, .article header .titre .titre__definitionbis, .article .header .titre .titre__definition, .article .header .titre .titre__definitionbis {
    font-size: 1.8rem;
  }
  .article header .titre .titre__fete, .article header .titre .titre__akai, .article header .titre .titre__shiro, .article .header .titre .titre__fete, .article .header .titre .titre__akai, .article .header .titre .titre__shiro {
    font-size: 1.3rem;
  }
  .article header .sous-titre, .article .header .sous-titre {
    grid-area: sous-titre;
  }
  .article header .sous-titre .sous-titre__date, .article header .sous-titre .sous-titre__infos, .article .header .sous-titre .sous-titre__date, .article .header .sous-titre .sous-titre__infos {
    font-size: 1.3rem;
  }
}
@media (max-width: 956px) and (min-width: 875px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  .sommaire header, .sommaire .header {
    grid-template-columns: 0 0.5fr 200px 60% 0.5fr;
  }
  .sommaire header .logo, .sommaire .header .logo {
    justify-self: start;
    margin-left: 50px;
    padding: 0;
  }
  .sommaire header .breve .breve__title, .sommaire .header .breve .breve__title {
    font-size: 2rem;
    font-weight: 500;
  }
  .sommaire header .breve .breve__texte, .sommaire .header .breve .breve__texte {
    font-size: 2rem;
  }
  .sommaire #jour {
    grid-template-columns: 15% 70% 15%;
  }
  .sommaire #jour .titre__title, .sommaire #jour .titre__definition, .sommaire #jour .titre__fete, .sommaire #jour .titre__shiro, .sommaire #jour .titre__akai, .sommaire #jour .icon-circle-right {
    font-size: 2rem;
  }
  .article header, .article .header {
    grid-template-columns: 0 0.5fr 200px 50% 0.5fr;
    min-height: 200px;
    overflow: hidden;
  }
  .article header .logo, .article .header .logo {
    grid-area: logo;
    justify-self: start;
    padding-right: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  .article header .titre, .article .header .titre {
    grid-area: titre;
  }
  .article header .titre .titre__title, .article header .titre .titre__titlebis, .article .header .titre .titre__title, .article .header .titre .titre__titlebis {
    font-size: 1.8rem;
  }
  .article header .titre .titre__definition, .article header .titre .titre__definitionbis, .article .header .titre .titre__definition, .article .header .titre .titre__definitionbis {
    font-size: 1.8rem;
  }
  .article header .titre .titre__fete, .article header .titre .titre__akai, .article header .titre .titre__shiro, .article .header .titre .titre__fete, .article .header .titre .titre__akai, .article .header .titre .titre__shiro {
    font-size: 1.3rem;
  }
  .article header .sous-titre, .article .header .sous-titre {
    grid-area: sous-titre;
  }
  .article header .sous-titre .sous-titre__date, .article header .sous-titre .sous-titre__infos, .article .header .sous-titre .sous-titre__date, .article .header .sous-titre .sous-titre__infos {
    font-size: 1.3rem;
  }
}
@media (max-width: 874px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  .sommaire header, .sommaire .header {
    grid-template-columns: 0 0.5fr 200px 70% 0.5fr;
  }
  .sommaire header .logo, .sommaire .header .logo {
    justify-self: start;
    margin-left: 60px;
    padding: 0;
  }
  .sommaire header .breve .breve__title, .sommaire .header .breve .breve__title {
    font-size: 1.6rem;
    font-weight: 500;
  }
  .sommaire header .breve .breve__texte, .sommaire .header .breve .breve__texte {
    font-size: 1.6rem;
  }
  .sommaire #jour {
    grid-template-columns: 15% 70% 15%;
  }
  .sommaire #jour .titre__title, .sommaire #jour .titre__definition, .sommaire #jour .titre__fete, .sommaire #jour .titre__shiro, .sommaire #jour .titre__akai, .sommaire #jour .icon-circle-right {
    font-size: 2rem;
  }
  .article header, .article .header {
    grid-template-columns: 0 0.5fr 200px 60% 0.5fr;
    min-height: 200px;
    overflow: hidden;
  }
  .article header .logo, .article .header .logo {
    grid-area: logo;
    justify-self: start;
    padding-left: 50px;
    opacity: 0.3;
    -webkit-transform: scale(2.2);
            transform: scale(2.2);
  }
  .article header .titre, .article .header .titre {
    grid-area: titre;
  }
  .article header .titre .titre__title, .article header .titre .titre__titlebis, .article .header .titre .titre__title, .article .header .titre .titre__titlebis {
    font-size: 1.8rem;
  }
  .article header .titre .titre__definition, .article header .titre .titre__definitionbis, .article .header .titre .titre__definition, .article .header .titre .titre__definitionbis {
    font-size: 1.8rem;
  }
  .article header .titre .titre__fete, .article header .titre .titre__akai, .article header .titre .titre__shiro, .article .header .titre .titre__fete, .article .header .titre .titre__akai, .article .header .titre .titre__shiro {
    font-size: 1.3rem;
  }
  .article header .sous-titre, .article .header .sous-titre {
    grid-area: sous-titre;
  }
  .article header .sous-titre .sous-titre__date, .article header .sous-titre .sous-titre__infos, .article .header .sous-titre .sous-titre__date, .article .header .sous-titre .sous-titre__infos {
    font-size: 1.3rem;
  }
}
@media (max-width: 1024px) and (min-width: 441px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  .sommaire header, .sommaire .header {
    grid-template-columns: 0 0.5fr 150px 70% 0.5fr;
  }
  .sommaire header .logo, .sommaire .header .logo {
    justify-self: start;
    margin-left: 20px;
    padding: 0;
  }
  .sommaire header .breve .breve__title, .sommaire .header .breve .breve__title {
    font-size: 2rem;
    font-weight: 500;
  }
  .sommaire header .breve .breve__texte, .sommaire .header .breve .breve__texte {
    font-size: 2rem;
  }
  .sommaire #jour {
    grid-template-columns: 15% 70% 15%;
  }
  .sommaire #jour .titre__title, .sommaire #jour .titre__definition, .sommaire #jour .titre__fete, .sommaire #jour .titre__shiro, .sommaire #jour .titre__akai, .sommaire #jour .icon-circle-right {
    font-size: 2rem;
  }
  .article header, .article .header {
    grid-template-columns: 0 0.5fr 50px 75% 0.5fr;
    min-height: 200px;
    overflow: hidden;
  }
  .article header .logo, .article .header .logo {
    grid-area: logo;
    justify-self: start;
  }
  .article header .titre, .article .header .titre {
    grid-area: titre;
  }
  .article header .titre .titre__title, .article header .titre .titre__titlebis, .article .header .titre .titre__title, .article .header .titre .titre__titlebis {
    font-size: 1.3rem;
  }
  .article header .titre .titre__definition, .article header .titre .titre__definitionbis, .article .header .titre .titre__definition, .article .header .titre .titre__definitionbis {
    font-size: 1.2rem;
  }
  .article header .titre .titre__fete, .article header .titre .titre__akai, .article header .titre .titre__shiro, .article .header .titre .titre__fete, .article .header .titre .titre__akai, .article .header .titre .titre__shiro {
    font-size: 1.2rem;
  }
  .article header .sous-titre, .article .header .sous-titre {
    grid-area: sous-titre;
  }
  .article header .sous-titre .sous-titre__date, .article header .sous-titre .sous-titre__infos, .article .header .sous-titre .sous-titre__date, .article .header .sous-titre .sous-titre__infos {
    font-size: 1.2rem;
  }
}
@media (max-width: 440px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  .sommaire header, .sommaire .header {
    grid-template-columns: 0 0.5fr 0 90% 0.5fr;
    overflow: hidden;
  }
  .sommaire header .logo, .sommaire .header .logo {
    justify-self: start;
    margin-left: 30px;
    padding: 0;
    opacity: 0.3;
    -webkit-transform: scale(1.9);
            transform: scale(1.9);
  }
  .sommaire header .breve .breve__title, .sommaire .header .breve .breve__title {
    white-space: nowrap;
    font-size: 1.8rem;
    font-weight: 500;
  }
  .sommaire header .breve .breve__texte, .sommaire .header .breve .breve__texte {
    white-space: nowrap;
    font-size: 1.8rem;
  }
  .sommaire .titre__definition, .sommaire .titre__shiro {
    display: none;
  }
  .sommaire #jour {
    grid-template-columns: 15% 70% 15%;
  }
  .sommaire #jour .titre__title, .sommaire #jour .titre__definition, .sommaire #jour .titre__fete, .sommaire #jour .titre__shiro, .sommaire #jour .titre__akai, .sommaire #jour .icon-circle-right {
    font-size: 2rem;
  }
  .article header, .article .header {
    grid-template-columns: 0 0.5fr 0 80% 0.5fr;
    min-height: 200px;
    overflow: hidden;
  }
  .article header .logo, .article .header .logo {
    grid-area: logo;
    justify-self: start;
    padding-left: 50px;
    opacity: 0.3;
    -webkit-transform: scale(2.2);
            transform: scale(2.2);
  }
  .article header .titre, .article .header .titre {
    grid-area: titre;
  }
  .article header .titre .titre__title, .article header .titre .titre__titlebis, .article .header .titre .titre__title, .article .header .titre .titre__titlebis {
    white-space: nowrap;
    font-size: clamp(1rem, 6vw, 2.4rem);
  }
  .article header .titre .titre__definition, .article header .titre .titre__definitionbis, .article .header .titre .titre__definition, .article .header .titre .titre__definitionbis {
    white-space: nowrap;
    font-size: clamp(0.9rem, 5vw, 2.4rem);
  }
  .article header .titre .titre__fete, .article header .titre .titre__akai, .article header .titre .titre__shiro, .article .header .titre .titre__fete, .article .header .titre .titre__akai, .article .header .titre .titre__shiro {
    white-space: nowrap;
    font-size: clamp(0.7rem, 5vw, 2.4rem);
  }
  .article header .sous-titre, .article .header .sous-titre {
    grid-area: sous-titre;
  }
  .article header .sous-titre .sous-titre__date, .article header .sous-titre .sous-titre__infos, .article .header .sous-titre .sous-titre__date, .article .header .sous-titre .sous-titre__infos {
    white-space: nowrap;
    font-size: clamp(0.7rem, 4vw, 1.5rem);
  }
}
div.banniere {
  display: grid;
  grid-template-columns: 1fr 600px 1fr;
  grid-template-rows: auto;
  grid-template-areas: ". banniere .";
  background: linear-gradient(to bottom, var(--couleur-moyenne) 0px, var(--couleur-foncee) 90%);
  color: var(--couleur-claire);
  font-size: 1.2rem;
}
div.banniere .banniere__items {
  grid-area: banniere;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 1rem;
}
div.banniere .banniere__items span.banniere__kto, div.banniere .banniere__items span.banniere__shinko, div.banniere .banniere__items span.banniere__kyo {
  padding: 0.25rem 2rem;
}
div.banniere .banniere__items span.banniere__shinko,
div.banniere .banniere__items span.banniere__kyo {
  color: var(--contraste);
}

@media (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 3) {
  div.banniere {
    grid-template-columns: 1fr 80% 1fr;
    font-size: 1rem;
  }
  div.banniere .banniere__items {
    justify-content: space-evenly;
  }
  div.banniere .banniere__items span.banniere__kto, div.banniere .banniere__items span.banniere__shinko, div.banniere .banniere__items span.banniere__kyo {
    padding: 0.25rem;
  }
}
article {
  grid-template-columns: 1fr 600px 1fr;
  grid-template-rows: auto;
  grid-template-areas: "left intro right" "left article right" " left outro right" "left kaisetsu right";
  background-color: color-mix(in srgb, var(--contraste) 3%, transparent);
  display: grid;
}

.priere.intro.none, .priere.outro.none {
  display: none;
}

/* @keyframes fadeIn
 * from
 *  opacity: 0
 *  transform: translateY(20px)
 * to
 *  opacity: 1
 *  transform: translateY(0) */
/* .priere.intro.fadein, .priere.outro.fadein
 * animation: fadeIn 1s ease-in-out
 * animation-fill-mode: forwards
 * */
/* @keyframes fadeOut
 * from
 *  opacity: 1
 *  transform: translateY(0)
 * to
 *  opacity: 0
 *  transform: translateY(20px) */
/* .priere.intro.fadeout, .priere.outro.fadeout
 * animation: fadeOut 1s ease-in-out
 * animation-fill-mode: forwards   */
.priere.intro {
  grid-area: intro;
  line-height: 1.6;
  color: var(--couleur-texte);
  text-align: justify;
}

.priere.intro h4.intro__titre {
  font-size: 1.6rem;
  position: relative;
  text-align: left;
  padding: 1.4rem 0 1rem 0;
  font-weight: 500;
  color: var(--couleur-foncee);
}

.priere.intro .intro__texte {
  font-size: 1.7rem;
}

.priere.intro .intro__textebis {
  font-size: 1.4rem;
}

.priere.outro {
  grid-area: outro;
  line-height: 1.6;
  color: var(--couleur-texte);
  text-align: justify;
}

.priere.outro h4.outro__titre {
  font-size: 1.6rem;
  position: relative;
  text-align: left;
  padding: 1.4rem 0 1rem 0;
  font-weight: 500;
  color: var(--couleur-foncee);
}

.priere.outro .outro__texte {
  font-size: 1.7rem;
}

.priere.outro .outro__textebis {
  font-size: 1.4rem;
}

.texte {
  grid-area: article;
  line-height: 1.6;
  color: var(--couleur-texte);
  padding: 0rem 0.5rem;
  text-align: justify;
}

.texte h4.title {
  font-size: 1.6rem;
  position: relative;
  padding: 0 0 0.5rem 0;
  text-align: left;
  top: 2rem;
  font-weight: 500;
}

.texte h5.references {
  font-size: 1.3rem;
  padding: 0.5rem 0 0 0;
  position: relative;
  text-align: right;
  top: -1.2rem;
}

.ten {
  border: 0.7px solid;
  border-radius: 50%;
  padding: 0 0.25rem 0 0.25rem;
  margin: 0 0.1rem;
  font-size: 1rem;
  vertical-align: 0.1rem;
  opacity: 0.8;
}

.ten:last-of-type {
  margin-right: 1rem;
}

.texte p.intro {
  font-size: 1.6rem;
  text-align: justify;
  font-weight: 400;
}

.texte h3.presentation {
  font-size: 1.8rem;
  padding: 1rem 0;
  text-align: left;
  font-weight: 400;
  padding: 1rem 0 0 1.5rem;
}

.texte p.text {
  font-size: 1.7rem;
  text-indent: 1.5rem;
  padding: 0.5rem 0;
  font-weight: 400;
}

.kaisetsu {
  grid-area: kaisetsu;
  line-height: 1.6;
  color: var(--couleur-texte);
  padding: 0rem 0.5rem;
  text-align: justify;
  margin-top: 2rem;
}

.kaisetsu h4.title {
  font-size: 1.6rem;
  padding: 0 0 0.5rem 0;
  text-align: left;
  position: relative;
  top: 2rem;
  color: var(--couleur-foncee);
}

.kaisetsu h5.references {
  font-size: 1.3rem;
  padding: 0.5rem 0 0 0;
  text-align: right;
  position: relative;
  top: -1.2rem;
  color: var(--couleur-foncee);
}

.kaisetsu p.intro {
  font-size: 1.6rem;
  text-align: justify;
  font-weight: 400;
}

.kaisetsu h3.presentation {
  font-size: 1.8rem;
  padding: 1rem 0;
  text-align: left;
  font-weight: 400;
  padding: 1rem 0 0 1.5rem;
  color: var(--couleur-foncee);
}

.kaisetsu p.text {
  font-size: 1.7rem;
  text-indent: 1.5rem;
  padding: 0.5rem 0;
}

.midori .title, .midori .references, .midori .presentation, .midori .verset {
  color: var(--midori);
}

.akai .title, .akai .references, .akai .presentation, .akai .verset {
  color: var(--akai);
}

.shiro .title, .shiro .references, .shiro .presentation, .shiro .verset {
  color: var(--shiro);
}

.murasaki .title, .murasaki .references, .murasaki .presentation, .murasaki .verset {
  color: var(--murasaki);
}

.texte p.text .verset {
  font-size: 0.9rem;
  font-style: italic;
  baseline-shift: super;
  vertical-align: top;
}

@media (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  article {
    grid-template-columns: 1fr 85% 1fr;
  }
  article .texte h3.presentation, article .texte h4.title {
    font-size: 2.2rem;
  }
  article .texte h5.references {
    font-size: 2rem;
    top: -1.3rem;
  }
  article .texte h4.title {
    top: 3rem;
  }
  article .texte p.intro, article .texte p.text {
    font-size: 2.2rem;
  }
  article .ten {
    font-size: 1.6rem;
  }
}
@media (max-width: 1024px) and (min-width: 441px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  article {
    grid-template-columns: 1fr 85% 1fr;
  }
  article .texte h3.presentation, article .texte h4.title {
    font-size: 2.2rem;
  }
  article .texte h5.references {
    font-size: 2rem;
    top: -1.3rem;
  }
  article .texte h4.title {
    top: 3rem;
  }
  article .texte p.intro, article .texte p.text {
    font-size: 2.2rem;
  }
  article .ten {
    font-size: 1.6rem;
  }
}
@media (max-width: 440px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  article {
    grid-template-columns: 1fr 85% 1fr;
  }
  article .texte h3.presentation, article .texte h4.title {
    font-size: 2.2rem;
  }
  article .texte h5.references {
    font-size: 1.8rem;
    top: -1rem;
    text-align: left;
  }
  article .texte h4.title {
    margin-top: 1rem;
    top: 0;
  }
  article .texte p.intro, article .texte p.text {
    font-size: 2.2rem;
  }
  article .ten {
    font-size: 1.6rem;
  }
}
header .leftsquares, .header .leftsquares {
  grid-area: leftsquares;
  position: absolute;
  left: 0;
  padding: 2px 0 0 2px;
}

.leftsquares.akai > * > * {
  background-color: var(--akai);
}

.leftsquares.midori > * > * {
  background-color: var(--midori2);
}

.leftsquares.shiro > * > * {
  background-color: var(--shiro2);
}

.leftsquares.murasaki > * > * {
  background-color: var(--murasaki);
}

.leftsquare1 {
  display: flex;
  flex-direction: row;
  gap: 2.5px;
}

.square11 {
  width: 10px;
  height: 10px;
  margin-left: 12.5px;
  background-color: var(--contraste);
}

.square12 {
  width: 10px;
  height: 10px;
  margin-left: 10px;
}

.square13 {
  width: 10px;
  height: 10px;
}

.square14 {
  width: 10px;
  height: 10px;
  margin-left: 10px;
}

.square15 {
  width: 10px;
  height: 10px;
  margin-left: 10px;
}

.leftsquare2 {
  display: flex;
  flex-direction: row;
  gap: 2.5px;
  margin-top: 2.5px;
  opacity: 0.9;
}

.square21 {
  width: 10px;
  height: 10px;
}

.square22 {
  width: 10px;
  height: 10px;
}

.square23 {
  width: 10px;
  height: 10px;
  margin-left: 10px;
}

.square24 {
  width: 10px;
  height: 10px;
  margin-left: 10px;
}

.square25 {
  width: 10px;
  height: 10px;
  opacity: 0.5;
}

.leftsquare3 {
  display: flex;
  flex-direction: row;
  gap: 2.5px;
  margin-top: 2.5px;
  opacity: 0.8;
}

.square31 {
  width: 10px;
  height: 10px;
}

.square32 {
  width: 10px;
  height: 10px;
  margin-left: 12.5px;
}

.square33 {
  width: 10px;
  height: 10px;
  opacity: 0.5;
}

.square34 {
  width: 10px;
  height: 10px;
  margin-left: 10px;
}

.square35 {
  width: 10px;
  height: 10px;
  margin-left: 10px;
}

.leftsquare4 {
  display: flex;
  flex-direction: row;
  gap: 2.5px;
  margin-top: 2.5px;
  opacity: 0.7;
}

.square41 {
  width: 10px;
  height: 10px;
  margin-left: 12.5px;
}

.square42 {
  width: 10px;
  height: 10px;
  margin-left: 10px;
}

.square43 {
  width: 10px;
  height: 10px;
}

.square44 {
  width: 10px;
  height: 10px;
  margin-left: 10px;
}

.leftsquare5 {
  display: flex;
  flex-direction: row;
  gap: 2.5px;
  margin-top: 2.5px;
  opacity: 0.6;
}

.square51 {
  width: 10px;
  height: 10px;
}

.square52 {
  width: 10px;
  height: 10px;
  margin-left: 10px;
  opacity: 0.7;
}

.square53 {
  width: 10px;
  height: 10px;
}

.square54 {
  width: 10px;
  height: 10px;
  margin-left: 10px;
}

.leftsquare6 {
  display: flex;
  flex-direction: row;
  gap: 2.5px;
  margin-top: 2.5px;
  opacity: 0.5;
}

.square61 {
  width: 10px;
  height: 10px;
}

.square62 {
  width: 10px;
  height: 10px;
}

.square63 {
  width: 10px;
  height: 10px;
  margin-left: 20px;
}

.square64 {
  width: 10px;
  height: 10px;
  margin-left: 10px;
}

.leftsquare7 {
  display: flex;
  flex-direction: row;
  gap: 2.5px;
  margin-top: 2.5px;
  opacity: 0.4;
}

.square71 {
  width: 10px;
  height: 10px;
}

.square72 {
  width: 10px;
  height: 10px;
  margin-left: 10px;
}

.square73 {
  width: 10px;
  height: 10px;
}

.square74 {
  width: 10px;
  height: 10px;
  margin-left: 10px;
}

.leftsquare8 {
  display: flex;
  flex-direction: row;
  gap: 2.5px;
  margin-top: 2.5px;
  opacity: 0.3;
}

.square81 {
  width: 10px;
  height: 10px;
  margin-left: 10px;
}

.square82 {
  width: 10px;
  height: 10px;
  margin-left: 10px;
}

.square83 {
  width: 10px;
  height: 10px;
  margin-left: 10px;
}

.leftsquare9 {
  display: flex;
  flex-direction: row;
  gap: 2.5px;
  margin-top: 2.5px;
  opacity: 0.25;
}

.square91 {
  width: 10px;
  height: 10px;
}

.square92 {
  width: 10px;
  height: 10px;
  margin-left: 10px;
}

.square93 {
  width: 10px;
  height: 10px;
}

.leftsquare10 {
  display: flex;
  flex-direction: row;
  gap: 2.5px;
  margin-top: 2.7px;
  opacity: 0.2;
}

.square101 {
  width: 10px;
  height: 10px;
  margin-left: 10px;
}

.square102 {
  width: 10px;
  height: 10px;
}

.square103 {
  width: 10px;
  height: 10px;
  margin-left: 10px;
}

.leftsquare11 {
  display: flex;
  flex-direction: row;
  gap: 2.5px;
  margin-top: 2.7px;
  opacity: 0.15;
}

.square111 {
  width: 10px;
  height: 10px;
}

.square112 {
  width: 10px;
  height: 10px;
  margin-left: 10px;
}

.leftsquare12 {
  display: flex;
  flex-direction: row;
  gap: 2.5px;
  margin-top: 2.7px;
  opacity: 0.15;
}

.square121 {
  width: 10px;
  height: 10px;
  margin-left: 12.5px;
}

.square122 {
  width: 10px;
  height: 10px;
}

.leftsquare13 {
  display: flex;
  flex-direction: row;
  gap: 2.5px;
  margin-top: 2.7px;
  opacity: 0.15;
}

.square131 {
  width: 10px;
  height: 10px;
}

.leftsquare14 {
  display: flex;
  flex-direction: row;
  gap: 2.5px;
  margin-top: 2.7px;
  opacity: 0.1;
}

.square141 {
  width: 10px;
  height: 10px;
  margin-left: 10px;
}

.leftsquare15 {
  display: flex;
  flex-direction: row;
  gap: 2.5px;
  margin-top: 2.7px;
  opacity: 0.05;
}

.square151 {
  width: 10px;
  height: 10px;
}

@media (max-width: 440px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  .leftsquares.akai > * > *, .leftsquares.midori > * > *, .leftsquares.shiro > * > *, .leftsquares.murasaki > * > * {
    opacity: 0.3;
  }
}
article.contenu {
  display: grid;
  grid-template-columns: 1fr 600px 1fr;
  grid-template-rows: auto;
  grid-template-areas: ". rechercher ." ". resultats .";
}

.rechercher {
  grid-area: rechercher;
  font-size: 1.1rem;
  color: var(--couleur-claire);
  background-color: var(--kuro);
  border-radius: var(--radius);
  margin: 1.5rem 0;
}
.rechercher p {
  font-size: 1.6rem;
  color: var(--couleur-claire2);
  margin: 1rem 0;
  text-align: center;
}

.rechercher span {
  font-weight: 600;
}

.resultats {
  grid-area: resultats;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.resultats ul {
  grid-area: resultats;
  align-items: center;
  padding: 10px 0 50px 0;
}
.resultats ul li {
  display: flex;
  align-items: center;
  padding: 5px 0;
  font-size: 1.2rem;
}
.resultats ul li .messe {
  min-width: 40%;
  text-align: center;
}
.resultats ul li .messe a {
  color: var(--couleur-texte);
  text-decoration: none;
}
.resultats ul li .messe a:hover {
  text-decoration: underline;
}
.resultats ul li .cercle {
  display: none;
  width: 5rem;
  height: 1.6rem;
  display: inline-block;
  margin-right: 1rem;
  text-align: center;
}
.resultats ul li .dujour {
  min-width: 25%;
  text-align: center;
}
.resultats ul li .fete2 {
  min-width: 20%;
  text-align: center;
}
.resultats ul li.akai {
  color: var(--akai);
}
.resultats ul li.midori {
  color: var(--midori);
}
.resultats ul li.shiro {
  color: var(--shiro);
}
.resultats ul li.murasaki {
  color: var(--murasaki);
}
.resultats ul li.annee:first-of-type {
  display: none;
  font-size: 1.5rem;
  width: 100%;
  border-radius: var(--radius);
  background-color: var(--couleur-claire);
  justify-content: center;
  color: var(--couleur-foncee);
  margin: 1rem 0;
  padding: 0.5rem 0;
  font-weight: 400;
}
.resultats ul p.spip.intro, .resultats ul p.spip.text, .resultats ul h4.spip.title, .resultats ul h3.spip.presentation {
  display: none;
}
.resultats ul li.vignette {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.resultats ul li.vignette .vignette__texte {
  /* display: none */
  justify-content: flex-start;
  text-align: center;
  width: 50%;
  margin: 1rem 0;
  padding: 1rem;
  border-radius: var(--radius);
  background-color: var(--kuro);
  color: var(--couleur-claire);
}

div.texte.titre {
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--couleur-foncee);
}

@media (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  article.contenu {
    grid-template-columns: 1fr 80% 1fr;
  }
}
@media (max-width: 440px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  article.contenu {
    grid-template-columns: 7fr 90% 1fr;
  }
  article.contenu .resultats .messe {
    min-width: 30%;
  }
  article.contenu .resultats .dujour {
    min-width: 5%;
  }
  article.contenu .resultats .fete2 {
    min-width: 10%;
  }
  .vignette__texte {
    min-width: 80%;
  }
}
article.kenkin {
  display: grid;
  grid-template-columns: 1fr 600px 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: ". titre ." ". kenkin .";
}
article.kenkin .titre {
  grid-area: titre;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem 0;
  font-size: 2rem;
  color: var(--couleur-foncee);
}
article.kenkin .informations {
  grid-area: kenkin;
  margin: 1rem;
}
article.kenkin .annai {
  padding: 2rem;
  background-color: color-mix(in srgb, var(--couleur-claire) 80%, transparent);
  border-radius: 5px;
  -webkit-box-shadow: 1px 1px 3px color-mix(in srgb, var(--ombre) 90%, transparent);
          box-shadow: 1px 1px 3px color-mix(in srgb, var(--ombre) 90%, transparent);
  margin-bottom: 5rem;
}
article.kenkin .annai#stripe1 {
  border-left: 5px solid var(--couleur-moyenne);
}
article.kenkin .annai#stripe1 p {
  margin-top: 1rem;
}
article.kenkin .annai#furikomi1 {
  border-left: 5px solid var(--couleur-moyenne);
}
article.kenkin .annai#furikomi1 p {
  margin-top: 1rem;
  text-align: center;
  font-weight: 400;
  font-size: 1.5rem;
}
article.kenkin .annai#furikomi1 p span {
  color: var(--couleur-foncee);
  font-weight: 600;
}
article.kenkin ul.moyens {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
article.kenkin ul.moyens li.methode {
  display: block;
}
article.kenkin ul.moyens li.methode img {
  max-width: 150px;
  height: auto;
  margin: 1rem 0;
  border-radius: 5px;
  -webkit-box-shadow: 1px 1px 3px var(--ombre);
          box-shadow: 1px 1px 3px var(--ombre);
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
article.kenkin ul.moyens li.methode img:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
article.kenkin h3 {
  margin-bottom: 1rem;
  font-size: 1.6rem;
  color: var(--couleur-foncee);
  text-align: center;
  font-weight: 500;
}
article.kenkin h4 {
  margin-top: 1rem;
  font-size: 1.5rem;
  color: var(--couleur-foncee);
  text-align: center;
  font-weight: 500;
}
article.kenkin h5 {
  margin-top: 1rem;
  font-size: 1.3rem;
  padding: 0.3rem 0;
  color: var(--couleur-foncee);
  font-weight: 500;
}
article.kenkin h5 .icon-circle-right {
  color: var(--couleur-foncee);
  margin: 0 0.4rem;
}
article.kenkin p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--couleur-texte);
  text-align: justify;
}
article.kenkin p a {
  color: var(--couleur-foncee);
  text-decoration: none;
}
article.kenkin p a:hover {
  /* color: darken(var(--contraste), 10%) */
  color: var(--contraste);
}
article.kenkin p a em {
  font-style: normal;
  font-weight: 600;
}
article.kenkin p a .icon-arrow-up-right, article.kenkin p a .icon-arrow-down-right {
  font-size: 0.9rem;
  margin-left: 0.2rem;
  color: var(--couleur-foncee);
}
article.kenkin .way {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
article.kenkin .way .donation-amount-wrapper {
  margin: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
article.kenkin .way .donation-amount-wrapper .currency-symbol {
  height: 2.5rem;
  width: 2.5rem;
  font-size: 1.3rem;
  border: 1px solid var(--ombre);
  border-right: none;
  -webkit-box-shadow: 1px 1px 3px color-mix(in srgb, var(--ombre) 90%, transparent);
          box-shadow: 1px 1px 3px color-mix(in srgb, var(--ombre) 90%, transparent);
  padding: 0.5rem;
  border-radius: 5px 0 0 5px;
  background-color: color-mix(in srgb, var(--couleur-moyenne) 80%, transparent);
  color: var(--couleur-claire);
  display: flex;
  align-items: center;
  justify-content: center;
}
article.kenkin .way .donation-amount-wrapper label {
  display: none;
}
article.kenkin .way .donation-amount-wrapper .donation-amount {
  height: 2.5rem;
  border-radius: 0 5px 5px 0;
  width: 13.5rem;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  border: 1px solid var(--ombre);
  -webkit-box-shadow: 1px 1px 3px color-mix(in srgb, var(--ombre) 90%, transparent);
          box-shadow: 1px 1px 3px color-mix(in srgb, var(--ombre) 90%, transparent);
  background-color: color-mix(in srgb, var(--couleur-fond) 80%, transparent);
  text-align: left;
  color: var(--couleur-foncee);
}
article.kenkin .way .donation-amount-wrapper .donation-amount:focus {
  outline: none;
}
article.kenkin .way .btn-payment {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.5rem;
  margin: 0 1rem;
  font-size: 1.2rem;
  background-color: var(--couleur-moyenne);
  color: var(--couleur-claire);
  border: 1px solid color-mix(in srgb, var(--ombre) 50%, transparent);
  padding: 0.5rem;
  width: 16rem;
  text-align: center;
  border-radius: var(--radius);
  -webkit-box-shadow: 1px 1px 3px color-mix(in srgb, var(--ombre) 90%, transparent);
          box-shadow: 1px 1px 3px color-mix(in srgb, var(--ombre) 90%, transparent);
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
article.kenkin .way .btn-payment:hover {
  background-color: var(--couleur-foncee);
  color: var(--couleur-claire);
}
article.kenkin .way .btn-payment .symbol {
  font-weight: 500;
  margin-right: 0.5rem;
  border: 1px solid var(--couleur-claire);
  border-radius: 50%;
  height: 2rem;
  width: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

#stripe.block,
#furikomi.block {
  opacity: 1;
}

#stripe,
#furikomi {
  opacity: 0.1;
}

#stripe1.block,
#furikomi1.block {
  display: block;
}

#stripe1,
#furikomi1 {
  display: none;
}

.kenkin__kansya {
  font-size: 6rem;
  text-align: center;
  color: var(--contraste);
  margin: 2rem 0;
}

@media (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  .article.kenkin {
    grid-template-columns: 1fr 70% 1fr;
  }
}
@media (max-width: 956px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  .article.kenkin {
    grid-template-columns: 1fr 70% 1fr;
  }
}
@media (max-width: 440px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  .article.kenkin {
    grid-template-columns: 1fr 95% 1fr;
    margin-left: 3%;
  }
  .article.kenkin .way {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
.quatrecentquatre {
  display: grid;
  grid-template-columns: 1fr 600px 1fr;
  grid-template-areas: ". quatrecentquatre .";
}
.quatrecentquatre .contenu__404 {
  grid-area: quatrecentquatre;
  color: var(--texte);
}
.quatrecentquatre .contenu__404 h2 {
  color: var(--couleur-foncee);
  text-align: center;
  font-size: 2rem;
  padding: 2rem 0;
  font-size: 2.5rem;
}
.quatrecentquatre .contenu__404 p {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  padding-top: 3rem;
  font-size: 1.7rem;
}
.quatrecentquatre .contenu__404 a {
  text-align: center;
  display: block;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--couleur-foncee);
  text-decoration: none;
  font-size: 1.8rem;
}
.quatrecentquatre .contenu__404 a:hover {
  color: var(--contraste);
}

.rechercher {
  grid-area: rechercher;
  font-size: 1.1rem;
  color: var(--couleur-claire);
  background-color: var(--kuro);
  border-radius: var(--radius);
  margin: 1.5rem 0;
}
.rechercher p {
  font-size: 1.6rem;
  color: var(--couleur-claire2);
  margin: 1rem 0;
  text-align: center;
}

.rechercher span {
  font-weight: 600;
}

.quatrecentquatre {
  grid-template-columns: 1fr 80% 1fr;
}

.quatrecentquatre {
  grid-template-columns: 2fr 90% 1fr;
}

.subscribe, .unsubscribe {
  display: grid;
  grid-template-columns: 1fr 600px 1fr;
  grid-template-rows: auto auto auto auto;
  grid-template-areas: ". abo ." ". informations ." ". form ." ".resultat .";
}
.subscribe h2, .unsubscribe h2 {
  grid-area: abo;
  text-align: center;
  padding: 2rem 1rem;
  color: var(--couleur-foncee);
  font-size: 1.6rem;
  font-weight: 500;
}
.subscribe .informations, .unsubscribe .informations {
  grid-area: informations;
  padding: 2rem 10%;
  color: var(--couleur-foncee);
  line-height: 1.6;
}
.subscribe .informations p, .unsubscribe .informations p {
  font-size: 1.3rem;
  margin-bottom: 1rem;
}
.subscribe .informations span, .unsubscribe .informations span {
  color: var(--shiro2);
  font-weight: 500;
}
.subscribe .informations a, .unsubscribe .informations a {
  color: var(--couleur-moyenne);
  text-decoration: none;
}
.subscribe .informations a:hover, .unsubscribe .informations a:hover {
  color: var(--contraste);
}
.subscribe .informations .icon-arrow-down-right, .unsubscribe .informations .icon-arrow-down-right {
  font-size: 1rem;
  color: var(--shiro2);
  padding: 0 0.4rem;
}
.subscribe form, .unsubscribe form {
  grid-area: form;
  padding: 2rem 5%;
  background-color: var(--kuro);
  border-radius: var(--radius);
  color: var(--couleur-claire);
  line-height: 1.6;
  margin: 1rem 1rem 1.5rem 1rem;
  font-weight: 400;
}
.subscribe form p, .unsubscribe form p {
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
  padding: 0 1.5rem 0;
}
.subscribe form p span, .unsubscribe form p span {
  color: var(--shiro2);
  font-weight: 500;
}
.subscribe input.search.text, .unsubscribe input.search.text {
  display: block;
  width: 100%;
  margin: 1rem 0;
  border: none;
  border-radius: var(--radius);
  font-size: 1.4rem;
  padding: 0.5rem 1.5rem;
}
.subscribe button.submit, .unsubscribe button.submit {
  display: flex;
  margin: 2rem auto 0 auto;
  justify-content: center;
  align-items: center;
  background-color: var(--couleur-moyenne);
  color: var(--couleur-claire);
  border: none;
  border-radius: var(--radius);
  padding: 0.5rem 2rem;
  font-size: 1.4rem;
  cursor: pointer;
}

.resultat {
  grid-area: resultat;
  padding: 1rem;
}
.resultat p {
  font-size: 1.2rem;
  text-align: center;
  color: var(--couleur-moyenne);
  font-weight: 500;
  margin: 1rem;
}

@media (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  .subscribe, .unsubscribe {
    grid-template-columns: 1fr 90% 1fr;
  }
}
@media (max-width: 956px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  .subscribe, .unsubscribe {
    grid-template-columns: 1fr 90% 1fr;
  }
}
@media (max-width: 440px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  .subscribe, .unsubscribe {
    grid-template-columns: 1fr 95% 1fr;
    margin-left: 3%;
  }
}
article.article.auteur {
  display: grid;
  grid-template-columns: 1fr 600px 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: "left auteur right" "left auteurs right" "left liste right";
  background-color: rgba(var(--couleur-fond), 0.6);
}
article.article.auteur h2 {
  grid-area: auteur;
  text-align: center;
  padding: 2rem 1rem;
  color: var(--couleur-foncee);
  font-size: 1rem;
  font-weight: 500;
}
article.article.auteur .info_auteur {
  grid-area: auteurs;
  padding: 2rem 1rem;
  color: var(--couleur-texte);
  line-height: 1.6;
}
article.article.auteur .info_auteur p.info {
  font-size: 1.5rem;
  color: var(--couleur-foncee);
}
article.article.auteur .formulaire_ecrire_auteur {
  background-color: var(--kuro);
  border-radius: var(--radius);
  padding: 2rem 1rem;
  margin: 2rem 0;
  color: var(--couleur-claire2);
  line-height: 1.6;
}
article.article.auteur .editer {
  width: 100%;
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: auto auto;
  grid-template-areas: ". erreur" "label input";
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
article.article.auteur .editer label {
  grid-area: label;
  text-align: right;
  font-size: 1rem;
  font-weight: 500;
  color: var(--couleur-claire);
  align-self: start;
}
article.article.auteur .editer input[type=text],
article.article.auteur .editer input[type=email] {
  grid-area: input;
  padding: 0.5rem;
  margin-right: 2rem;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  align-self: start;
  background-color: var(--couleur-fond);
}
article.article.auteur .editer textarea {
  grid-area: input;
  padding: 0.5rem;
  margin-right: 2rem;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  height: 15rem;
  background-color: var(--couleur-fond);
  align-self: start;
  font-family: inherit;
  resize: vertical;
}
article.article.auteur .editer .erreur_message {
  grid-area: erreur;
  height: 1.5rem;
  font-size: 0.9rem;
  color: var(--akai);
  margin-top: 0.5rem;
  border: 1px solid var(--akai);
  margin-right: 2rem;
  border-radius: var(--radius);
  padding: 0 0.5rem;
  background-color: color-mix(in srgb, var(--couleur-claire) 80%, transparent);
}
article.article.auteur .reponse_formulaire_erreur {
  display: none;
  color: var(--akai);
  font-size: 1.5rem;
  text-align: center;
  border: 1px solid var(--akai);
  border-radius: var(--radius);
  margin: 0 1rem 0 3rem;
  background-color: color-mix(in srgb, var(--couleur-claire) 80%, transparent);
}
article.article.auteur fieldset.previsu {
  background-color: var(--couleur-claire);
  border-radius: var(--radius);
  color: var(--couleur-foncee);
  width: 96%;
  margin: 2%;
  padding: 1rem;
}
article.article.auteur fieldset.previsu legend {
  background-color: var(--couleur-moyenne);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--couleur-claire);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius);
}
article.article.auteur fieldset.previsu p em {
  font-size: 1.2rem;
  font-weight: 400;
}
article.article.auteur fieldset.previsu p strong {
  font-size: 1.5rem;
  font-weight: 600;
}
article.article.auteur fieldset.previsu div div {
  margin: 1rem 0;
  font-size: 1.2rem;
  line-height: 1.6;
  padding-left: 2rem;
}
article.article.auteur input[type=submit] {
  position: relative;
  background-color: var(--couleur-moyenne);
  color: var(--couleur-claire);
  border: none;
  border-radius: var(--radius);
  padding: 0.7rem 1.5rem;
  margin: 1rem 0;
  margin-left: 50%;
  left: -100px;
  width: 200px;
  font-size: 1.2rem;
  cursor: pointer;
}
article.article.auteur .reponse_formulaire_ok {
  font-size: 1.5rem;
  text-align: center;
  color: var(--couleur-claire2);
}
article.article.auteur ul.liste__auteurs {
  grid-area: liste;
  padding: 2rem 2rem;
  background-color: color-mix(in srgb, var(--couleur-claire) 80%, transparent);
  border-radius: var(--radius);
  line-height: 1.6;
  margin: 1rem 1rem 2rem 1rem;
}
article.article.auteur ul.liste__auteurs li {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
article.article.auteur ul.liste__auteurs li .portrait {
  width: 150px;
  flex-shrink: 0;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: 5%;
  margin-right: 1.5rem;
}
article.article.auteur ul.liste__auteurs li .biographie {
  line-height: 1.6;
  color: var(--couleur-texte);
}
article.article.auteur ul.liste__auteurs li .biographie h1.fn {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--couleur-foncee);
}
article.article.auteur ul.liste__auteurs li .biographie .texte.note {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: var(--couleur-foncee);
}
article.article.auteur ul.liste__auteurs li .biographie p.hyperlien {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: var(--couleur-foncee);
}
article.article.auteur ul.liste__auteurs li .biographie p.hyperlien a {
  color: var(--couleur-foncee);
  text-decoration: none;
}
article.article.auteur ul.liste__auteurs li .biographie p.hyperlien a:hover {
  color: var(--contraste);
}

@media (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  article.article.auteur {
    display: grid;
    grid-template-columns: 1fr 80% 1fr;
  }
}
@media (max-width: 440px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  article.article.auteur {
    display: grid;
    grid-template-columns: 2fr 90% 1fr;
  }
  article.article.auteur .editer {
    display: flex;
    flex-direction: column;
    padding: 0 3%;
  }
  article.article.auteur label {
    text-align: left;
    margin-top: 1rem;
    margin-bottom: -0.5rem;
  }
  article.article.auteur input,
  article.article.auteur textarea {
    width: 100%;
  }
  article.article.auteur ul.liste__auteurs li {
    flex-direction: column;
    align-items: center;
  }
  article.article.auteur ul.liste__auteurs li .portrait {
    margin-bottom: 1rem;
  }
}
article.resultats {
  display: grid;
  grid-template-columns: 1fr 600px 1fr;
  grid-template-rows: auto;
  grid-template-areas: ". periode ." ". liste .";
}
article.resultats .resultats__periode {
  grid-area: periode;
  font-size: 1.5rem;
  width: 100%;
  border-radius: var(--radius);
  background-color: var(--couleur-claire);
  text-align: center;
  color: var(--couleur-foncee);
  margin: 1rem 0;
  padding: 0.5rem 0;
  font-weight: 400;
}
article.resultats .resultats__liste {
  grid-area: liste;
  display: flex;
  flex-direction: column;
  font-size: 1.2rem;
  padding: 1rem 0 3rem 0;
}
article.resultats .resultats__liste > div {
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--couleur-claire2);
}
article.resultats .resultats__liste .fete {
  flex: 0 0 auto;
  width: calc(8em + 1rem);
  padding: 0 0.5rem;
  text-align: left;
}
article.resultats .resultats__liste .fete.octave, article.resultats .resultats__liste .fete.dimanche {
  width: calc(8em + 2.5rem);
  padding-left: 1.5rem;
  font-weight: bold;
}
article.resultats .resultats__liste .messe {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
article.resultats .resultats__liste .messe.dimanche, article.resultats .resultats__liste .messe.octave {
  width: calc(auto + 1.5rem);
  font-weight: bold;
}
article.resultats .resultats__liste .date {
  flex: 0 0 calc(7em + 1rem);
  text-align: right;
}
article.resultats .shiro, article.resultats .shiro a {
  color: var(--shiro);
}
article.resultats .akai, article.resultats .akai a {
  color: var(--akai);
}
article.resultats .midori, article.resultats .midori a {
  color: var(--midori);
}
article.resultats .murasaki, article.resultats .murasaki a {
  color: var(--murasaki);
}

@media (max-width: 852px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  article.resultats {
    grid-template-columns: 1fr 80% 1fr;
  }
}
@media (max-width: 440px) and (min-width: 376px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  article.resultats {
    grid-template-columns: 1fr 80% 1fr;
  }
  .fete {
    max-width: calc(4em + 1rem);
  }
  .fete.octave, .fete.dimanche {
    max-width: calc(4em + 2.5rem);
  }
  .date {
    max-width: calc(6em + 1rem);
    font-size: 0.9rem;
  }
}
@media (max-width: 375px) and (min-width: 0px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  article.resultats {
    grid-template-columns: 1fr 80% 1fr;
  }
  .fete {
    max-width: calc(4em + 1rem);
    font-size: 0.9rem;
  }
  .fete.octave, .fete.dimanche {
    max-width: calc(4em + 2.5rem);
    font-size: 0.9rem;
  }
  .date {
    max-width: calc(6em + 1rem);
    font-size: 0.9rem;
  }
}
.langues {
  display: grid;
  grid-template-columns: 1fr 600px 1fr;
  grid-template-rows: auto;
  grid-template-areas: ". titrelangues ." ". listeslangues .";
}
.langues h2 {
  grid-area: titrelangues;
  text-align: center;
  color: var(--couleur-foncee);
  margin: 2rem 0 1rem 0;
  font-size: clamp(1.2rem, 2.5vw, 2rem);
}
.langues ul.listelangues {
  grid-area: listeslangues;
  align-items: center;
  margin: 2rem 0.5rem;
  padding: 2rem;
  background-color: var(--kuro);
  border-radius: var(--radius);
  -webkit-box-shadow: 0 4px 6px var(--shadows);
          box-shadow: 0 4px 6px var(--shadows);
}
.langues ul.listelangues li {
  display: flex;
  background-color: var(--kuro-clair);
  padding: 5px 0;
  align-items: center;
  font-size: 1.2rem;
  margin: 0.5rem 0;
  padding: 0.8rem 5rem;
  border-radius: var(--radius);
}
.langues ul.listelangues li a {
  color: var(--couleur-claire);
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.langues ul.listelangues li a:hover {
  color: var(--contraste);
}

@media (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  .langues {
    grid-template-columns: 1fr 90% 1fr;
  }
}
@media (max-width: 956px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  .langues {
    grid-template-columns: 1fr 85% 1fr;
  }
}
@media (max-width: 440px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  .langues {
    grid-template-columns: 1fr 90% 1fr;
    margin-left: 3%;
  }
  .langues ul.listelangues {
    padding: 1rem;
  }
  .langues ul.listelangues li {
    padding: 0.8rem 2rem;
    font-size: 1rem;
  }
}
.article.privacy {
  display: grid;
  grid-template-columns: 1fr 600px 1fr;
  grid-template-rows: auto;
  grid-template-areas: ". privacy .";
}

.privacy__police {
  grid-area: privacy;
  padding: 1.5rem 0.5rem;
  font-size: 1.2rem;
  text-align: justify;
  color: var(--couleur-foncee);
}
.privacy__police li {
  margin-bottom: 1.5rem;
}
.privacy__police li p {
  margin-bottom: 1rem;
}
.privacy__police .privacy__titre {
  font-weight: 500;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.privacy__police .privacy__soutitre {
  padding: 1rem;
}
.privacy__police .privacy__texte {
  padding: 0 1rem;
  text-indent: 1rem;
}
.privacy__police .privacy__texte a {
  color: var(--couleur-foncee);
  text-decoration: none;
}
.privacy__police .privacy__texte a:hover {
  color: var(--shiro2);
}
.privacy__police .icon-circle-right {
  font-size: 1.4rem;
  color: var(--couleur-foncee);
  padding: 0 1rem;
}
.privacy__police .privacy__right {
  text-align: right;
  padding: 0 1rem;
}
.privacy__police .icon-arrow-up-right {
  font-size: 1rem;
  color: var(--shiro2);
  padding: 0 0.4rem;
}
.privacy__police .icon-arrow-down-right {
  font-size: 1rem;
  color: var(--shiro2);
  padding: 0 0.4rem;
}
.privacy__police span.g {
  color: var(--midori);
}
.privacy__police span.o {
  color: var(--shiro);
}
.privacy__police span.oo {
  color: var(--shiro2);
}
.privacy__police span.l {
  color: var(--murasaki);
}
.privacy__police span.e {
  color: var(--akai);
}

@media (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  .article.privacy {
    grid-template-columns: 1fr 70% 1fr;
  }
}
@media (max-width: 956px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  .article.privacy {
    grid-template-columns: 1fr 70% 1fr;
  }
}
@media (max-width: 440px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  .article.privacy {
    grid-template-columns: 1fr 95% 1fr;
    margin-left: 3%;
  }
}
aside.internal {
  display: grid;
  grid-template-columns: 1fr 600px 1fr;
  grid-template-areas: ". internal .";
  background-color: var(--couleur-claire2);
  position: relative;
  grid-gap: 1rem;
  z-index: 5;
}
aside.internal .internal-links {
  grid-area: internal;
  display: inline-flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  padding: 2rem 0;
}
aside.internal .internal-links__koudoku, aside.internal .internal-links__kenkin {
  padding: 10px;
  width: 250px;
  height: 250px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, var(--couleur-moyenne)), color-stop(70%, var(--couleur-foncee)));
  background: linear-gradient(to bottom, var(--couleur-moyenne) 10%, var(--couleur-foncee) 70%);
  border-radius: 10px;
  -webkit-box-shadow: 1px 3px 4px var(--ombre);
          box-shadow: 1px 3px 4px var(--ombre);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--couleur-claire);
}
aside.internal .internal-links__koudoku a .koudoku__legend {
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  color: var(--couleur-claire);
}
aside.internal .internal-links__kenkin a .kenkin__setumei {
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  color: var(--couleur-claire);
}
aside.internal .internal-links__kenkin a .kenkin__setumei .kenkin__muryou {
  font-size: 2.5rem;
  color: var(--contraste);
}
aside.internal .internal-links__kenkin a .kenkin__legend {
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  color: var(--contraste);
  padding: 1rem 0 0 0;
}

@media (max-width: 440px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  aside.internal {
    display: grid;
    grid-template-columns: 1fr 80% 1fr;
    grid-template-areas: ". internal .";
    background-color: var(--couleur-claire2);
  }
  aside.internal .internal-links {
    grid-area: internal;
    display: flex;
    flex-direction: column;
    align-content: space-around;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 2rem 0;
  }
  aside.internal .internal-links__koudoku, aside.internal .internal-links__kenkin {
    height: 250px;
    width: 100%;
    margin-bottom: 2rem;
  }
}
aside.reso {
  display: grid;
  grid-template-columns: 1fr 600px 1fr;
  grid-template-areas: ". resosocio .";
  background-color: var(--couleur-foncee);
  grid-gap: 1rem;
  position: relative;
  z-index: 3;
}
aside.reso .resosocio {
  grid-area: resosocio;
  display: inline-flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  padding: 1.5rem 0;
}
aside.reso .resosocio .resosocio__icone {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
  width: 50px;
  height: 50px;
  background-color: var(--couleur-claire);
  border-radius: 5px;
  -webkit-box-shadow: 1px 3px 4px var(--shadows);
          box-shadow: 1px 3px 4px var(--shadows);
}

@media (max-width: 440px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  aside.reso {
    display: grid;
    grid-template-columns: 1fr 80% 1fr;
    grid-template-areas: ". resosocio .";
    background-color: var(--couleur-foncee);
  }
  aside.reso .resosocio {
    grid-area: resosocio;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 2rem 0;
  }
}
aside.external {
  display: grid;
  grid-template-columns: 1fr 600px 1fr;
  grid-template-areas: ". external .";
  background-color: var(--couleur-foncee);
  grid-gap: 1rem;
  position: relative;
  z-index: 3;
}
aside.external .external-links {
  grid-area: external;
  display: inline-flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  padding: 1rem 0 2rem 0;
}
aside.external .external-links .external-links__bouton {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: 10px;
  width: 250px;
  height: 220px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, var(--couleur-claire)), color-stop(70%, var(--couleur-claire2)));
  background: linear-gradient(to bottom, var(--couleur-claire) 10%, var(--couleur-claire2) 70%);
  border-radius: 10px;
  color: var(--couleur-foncee);
  -webkit-box-shadow: 1px 3px 4px var(--ombre);
          box-shadow: 1px 3px 4px var(--ombre);
}
aside.external .external-links .external-links__bouton p.legend {
  font-size: 1.2rem;
  font-weight: 300;
  text-align: center;
}

@media (max-width: 440px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  aside.external {
    display: grid;
    grid-template-columns: 1fr 80% 1fr;
    grid-template-areas: ". external .";
    background-color: var(--couleur-foncee);
  }
  aside.external .external-links {
    grid-area: external;
    display: flex;
    flex-direction: column;
    align-content: space-around;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 2rem 0;
  }
  aside.external .external-links .external-links__bouton {
    height: 250px;
    width: 100%;
    margin-bottom: 2rem;
  }
}
footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  background: -webkit-gradient(linear, left top, right top, from(var(--couleur-foncee)), color-stop(var(--couleur-moyenne)), to(var(--couleur-foncee)));
  background: linear-gradient(90deg, var(--couleur-foncee), var(--couleur-moyenne), var(--couleur-foncee));
}
footer a, footer p {
  font-size: 1.3rem;
  margin: 0.5rem 0;
  color: var(--couleur-claire);
  text-decoration: none;
}
footer a:hover, footer p:hover {
  color: var(--contraste);
}