/*
 * Dinouna : le style du site dinouna.com.
 * Les couleurs, les polices et les formes viennent de la charte (charte/Dinouna-charte-graphique.pdf, v1).
 * Les polices sont servies par le site lui-même : aucune visite ne passe par un autre service.
 */

@font-face {
  font-family: "Fredoka";
  src: url("/polices/Fredoka_600SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("/polices/Fredoka_700Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/polices/Montserrat_400Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/polices/Montserrat_700Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* Marque */
  --canard: #094c58;
  --orange: #ef8634;
  --sable: #e4be99;
  --creme: #faeee5;
  /* Texte */
  --encre: #052e36;
  --encre-douce: #3f6670;
  --caramel: #a26c3a;
  /* Fonds et teintes */
  --blanc: #ffffff;
  --orange-clair: #fce1cc;
  --sable-clair: #f4e3d2;
  --trait: #e9d8c6;
  --juste-clair: #d3eee3;
  /* Formes : tout est rond, contour encre de 2 px, relief plein sans flou */
  --rayon-etiquette: 12px;
  --rayon-bouton: 20px;
  --rayon-carte: 32px;
  --contour: 2px solid var(--encre);
  --titre: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --texte: "Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--canard);
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--encre);
}
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 6px;
}

.passer {
  position: absolute;
  left: -9999px;
}
.passer:focus {
  left: 16px;
  top: 16px;
  z-index: 10;
  background: var(--blanc);
  padding: 8px 16px;
  border: var(--contour);
  border-radius: var(--rayon-etiquette);
}

/* --- La page ---------------------------------------------------------- */

.entete,
main,
.pied-contenu {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 600px) {
  .entete,
  main,
  .pied-contenu {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 8px;
}
.entete .logo {
  display: block;
  width: 148px;
  line-height: 0;
}
.entete .logo img {
  width: 100%;
}
.entete .retour {
  font-size: 0.875rem;
  white-space: nowrap;
}

main {
  padding-top: 16px;
  padding-bottom: 48px;
}

/* --- Les textes ------------------------------------------------------- */

h1,
h2,
h3 {
  font-family: var(--titre);
  color: var(--canard);
  line-height: 1.2;
  margin: 0;
}
h1 {
  font-weight: 700;
  font-size: clamp(2rem, 7vw, 2.75rem);
  margin-bottom: 8px;
}
h2 {
  font-weight: 600;
  font-size: 1.5rem;
  margin-top: 40px;
  margin-bottom: 12px;
}
h3 {
  font-weight: 600;
  font-size: 1.2rem;
  margin-top: 24px;
  margin-bottom: 8px;
}
p,
ul,
ol {
  margin: 0 0 12px;
}
ul,
ol {
  padding-left: 1.4em;
}
li {
  margin-bottom: 6px;
}
li::marker {
  color: var(--orange);
}
strong {
  font-weight: 700;
}

/* La légende de la charte : 12 px, gras, capitales espacées */
.legende {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 0 0 8px;
}
.legende .point {
  color: var(--orange);
}

.chapeau {
  font-size: 1.125rem;
  margin-bottom: 8px;
}
.date {
  font-size: 0.875rem;
  color: var(--encre-douce);
  margin-bottom: 24px;
}
.discret {
  font-size: 0.875rem;
  color: var(--encre-douce);
}

/* --- Les cartes « autocollant » -------------------------------------- */

.carte {
  background: var(--blanc);
  border: var(--contour);
  border-radius: 24px;
  box-shadow: 0 6px 0 var(--encre);
  padding: 20px;
  margin: 16px 0 28px;
}
@media (min-width: 600px) {
  .carte {
    border-radius: var(--rayon-carte);
    padding: 24px 28px;
  }
}
.carte > :last-child {
  margin-bottom: 0;
}
.carte h2,
.carte h3 {
  margin-top: 0;
}
.carte-sable {
  background: var(--sable-clair);
}
.carte-orange {
  background: var(--orange-clair);
}
.carte-canard {
  background: var(--canard);
  color: var(--creme);
}
.carte-canard h2,
.carte-canard h3 {
  color: var(--blanc);
}
.carte-canard a {
  color: var(--blanc);
}

/* L'encadré doux de la charte : sans contour, sans relief */
.encadre {
  background: var(--sable-clair);
  border-radius: var(--rayon-bouton);
  padding: 16px 20px;
  margin: 16px 0 24px;
}
.encadre > :last-child {
  margin-bottom: 0;
}

/* L'étiquette ronde (« MODE QUIZ ») */
.etiquette {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--sable);
  color: var(--encre);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 12px;
}
.etiquette-orange {
  background: var(--orange);
}
.etiquette-juste {
  background: var(--juste-clair);
}

/* --- Les boutons ------------------------------------------------------ */

.bouton {
  display: inline-block;
  font-family: var(--texte);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  color: var(--blanc);
  background: var(--canard);
  border: var(--contour);
  border-radius: var(--rayon-bouton);
  box-shadow: 0 4px 0 var(--encre);
  padding: 14px 20px;
  margin: 4px 0 12px;
}
.bouton:hover {
  color: var(--blanc);
}
.bouton:active {
  transform: translateY(4px);
  box-shadow: none;
}
.bouton-secondaire {
  color: var(--encre);
  background: var(--blanc);
}
.bouton-secondaire:hover {
  color: var(--encre);
}

/* --- Le sommaire ------------------------------------------------------ */

.sommaire {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: sommaire;
}
.sommaire li {
  counter-increment: sommaire;
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}
.sommaire li::before {
  content: counter(sommaire);
  flex: none;
  font-family: var(--titre);
  font-weight: 700;
  color: var(--orange);
  min-width: 1.4em;
}

/* --- Les étapes numérotées, en pastilles ------------------------------ */

.etapes {
  list-style: none;
  padding: 0;
  counter-reset: etape;
}
.etapes > li {
  counter-increment: etape;
  position: relative;
  padding-left: 48px;
  min-height: 34px;
  margin-bottom: 14px;
}
.etapes > li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: -2px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.05rem;
  background: var(--sable-clair);
  border: var(--contour);
  border-radius: 999px;
}

/* --- Les tableaux, qui deviennent des fiches sur le téléphone --------- */

.tableau {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 12px 0 24px;
  font-size: 0.9375rem;
}
.tableau th,
.tableau td {
  text-align: left;
  vertical-align: top;
  padding: 12px;
  border-bottom: 1px solid var(--trait);
}
.tableau thead th {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
  background: var(--sable-clair);
}
.tableau thead th:first-child {
  border-top-left-radius: var(--rayon-etiquette);
}
.tableau thead th:last-child {
  border-top-right-radius: var(--rayon-etiquette);
}
.tableau tbody th {
  font-weight: 700;
}

@media (max-width: 599px) {
  .tableau thead {
    position: absolute;
    left: -9999px;
  }
  .tableau,
  .tableau tbody,
  .tableau tr,
  .tableau th,
  .tableau td {
    display: block;
    width: 100%;
  }
  .tableau tr {
    background: var(--blanc);
    border: var(--contour);
    border-radius: var(--rayon-bouton);
    box-shadow: 0 4px 0 var(--encre);
    padding: 4px 0;
    margin-bottom: 16px;
  }
  .tableau th,
  .tableau td {
    border-bottom: 0;
    padding: 6px 16px;
  }
  .tableau tbody th {
    font-weight: 700;
    font-size: 1rem;
    color: var(--canard);
    padding-top: 10px;
  }
  .tableau td[data-titre]::before {
    content: attr(data-titre);
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--encre-douce);
  }
}

/* --- Les questions de l'aide ----------------------------------------- */

.faq details {
  background: var(--blanc);
  border: var(--contour);
  border-radius: var(--rayon-bouton);
  box-shadow: 0 4px 0 var(--encre);
  margin-bottom: 16px;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--canard);
  padding: 16px 52px 16px 18px;
  position: relative;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  line-height: 22px;
  text-align: center;
  font-family: var(--texte);
  font-weight: 700;
  color: var(--encre);
  background: var(--sable-clair);
  border: var(--contour);
  border-radius: 999px;
}
.faq details[open] summary::after {
  content: "\2212";
}
.faq .reponse {
  padding: 0 18px 16px;
}
.faq .reponse > :last-child {
  margin-bottom: 0;
}

/* --- Les jeux de l'accueil ------------------------------------------- */

.accueil-logo {
  max-width: 420px;
  margin: 8px auto 24px;
}
.accueil-logo img {
  width: 100%;
  display: block;
}
.accueil-titre {
  text-align: center;
}
.accueil-titre .chapeau {
  max-width: 34em;
  margin-left: auto;
  margin-right: auto;
}
.jeux {
  list-style: none;
  padding: 0;
  margin: 16px 0 24px;
  display: grid;
  gap: 16px;
}
@media (min-width: 600px) {
  .jeux {
    grid-template-columns: 1fr 1fr;
  }
}
.jeux li {
  background: var(--blanc);
  border: var(--contour);
  border-radius: var(--rayon-bouton);
  box-shadow: 0 4px 0 var(--encre);
  padding: 16px 18px;
  margin: 0;
}
.jeux h3 {
  margin: 0 0 4px;
}
.jeux p {
  margin: 0;
  font-size: 0.9375rem;
}
.bientot {
  text-align: center;
}

/* --- Les champs que le sponsor doit remplir ------------------------- */

.a-completer,
.carte-canard .a-completer,
.pied .a-completer {
  display: inline;
  background: #fff2a8;
  color: var(--encre);
  font-weight: 700;
  outline: 2px dashed var(--orange);
  outline-offset: 1px;
  border-radius: 4px;
  padding: 0 4px;
}

/* --- Le pied de page -------------------------------------------------- */

.pied {
  background: var(--canard);
  color: var(--creme);
  padding: 32px 0 40px;
  font-size: 0.9375rem;
}
.pied a {
  color: var(--blanc);
  font-weight: 700;
}
.pied nav ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.pied nav li {
  margin: 0;
}
.pied .slogan {
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}
.pied .slogan .point {
  color: var(--orange);
}
.pied p {
  margin-bottom: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .bouton:active {
    transform: none;
  }
}

/* --- Le lien vers l'autre langue, en haut à droite (English / Français) --- */

.entete-liens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 18px;
}
.entete .langue {
  font-size: 0.875rem;
  white-space: nowrap;
}
/* L'accueil n'a pas d'en-tête : la ligne ne porte que ce lien */
.entete-langue {
  justify-content: flex-end;
  padding-bottom: 0;
}