/* Aplats bleu canard profond : une section pleine largeur qui rythme la page.
   Les jetons de couleur sont retournés dans la section, puis rétablis sur les cartes papier posées dessus. */
.aplat{
  --encre:#F8F4EC;--gris:#B4CFCA;--gris-c:#B4CFCA;--filet:rgba(248,244,236,.2);--case:rgba(248,244,236,.1);--fond:rgba(248,244,236,.06);
  --teal:#F8F4EC;--teal-f:#F8F4EC;--teal-c:rgba(248,244,236,.45);
  position:relative;background:#0A5457;color:var(--encre)
}
.aplat :is(.carte,.px-c,.porte,.cas-fiche,.cas-sel,.cas-indice,.oe){
  --encre:#18181B;--gris:#5B5B60;--gris-c:#6B6963;--filet:#E4E1D8;--case:#F1EEE6;--fond:#FBFBF8;
  --teal:#0D7377;--teal-f:#0A5457;--teal-c:#B4CFCA;
  color:var(--encre)
}
.aplat ::selection{background:#F8F4EC;color:#0A5457}

/* Boutons : le bouton noir devient papier, le bouton case devient un voile clair */
.aplat .btn.plein{background:#F8F4EC;color:#18181B}
.aplat .btn.plein:hover{background:#fff}
.aplat .btn.plein:active{background:#E4E1D8}
.aplat .btn:not(.plein){background:rgba(248,244,236,.1);color:#F8F4EC}
.aplat .btn:not(.plein):hover{background:rgba(248,244,236,.18)}
.aplat :is(.carte,.px-c,.porte,.cas-fiche,.cas-sel,.cas-indice,.oe) .btn.plein{background:#18181B;color:#fff}
.aplat :is(.carte,.px-c,.porte,.cas-fiche,.cas-sel,.cas-indice,.oe) .btn.plein:hover{background:#000}

/* Accueil : les cas. L'aplat remplace le quadrillage, les onglets et la fiche restent papier */
.cas.aplat{background:#0A5457}
.cas.aplat .cas-onglet[aria-selected="true"]{color:#fff}
.cas.aplat .cas-curseur{background:#18181B}
.cas-tete:has(.cas-tous){flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px}
.cas-tous{flex:none;gap:10px}

.aplat .lien-s{color:#F8F4EC}

/* Accueil : aller plus loin */
.loin.aplat{padding-bottom:calc(var(--m) * 1.5)}
.loin.aplat + .fx{border-top:0}

/* Pages intérieures : un bloc en aplat garde sa grille et prend de l'air au-dessus et au-dessous */
.bloc.aplat{padding-top:calc(var(--m) * 1.2);padding-bottom:calc(var(--m) * 1.3)}
.bloc.aplat + .bloc{margin-top:calc(var(--m) * 1.4)}
.aplat .liste a:hover{background:rgba(248,244,236,.08)}
.aplat .liste a:active{background:rgba(248,244,236,.14)}
.aplat .faits a,.aplat .engagements a{text-decoration-color:rgba(248,244,236,.55)}

/* Carré de souris : sur l'aplat, la différence garde le même rouge que sur le papier */
.souris.sur-aplat{background:#FF322B}

/* Formations : le pied de l'estampe se pose directement sur l'aplat */
.estampe + .bloc.aplat{margin-top:0}

@media (max-width:760px){
  .cas-tete:has(.cas-tous){flex-direction:column;align-items:flex-start;gap:8px}
  .bloc.aplat{padding-top:calc(var(--m) * 1);padding-bottom:calc(var(--m) * 1.1)}
}