/* Pages « Repères de la période » (ce1/, ce2/, cm1/), chargées après styles.css :
   photo en galet en haut, drapeaux et pictos dessinés, hibou et bouclier du site. */

/* Haut de page : le texte, puis la grande photo en galet qui déborde à droite (.rangee, .photo-galet) */
.reperes-haut {
  padding-bottom: 1rem;
}

.reperes-haut .bilan-texte {
  margin-top: 1rem;
}

/* Un drapeau planté devant chaque repère du programme, comme sur le chemin de l'accueil */
.reperes-drapeau {
  --drapeau-l: 2.8rem;
  --drapeau-h: 3.35rem;
  display: block;
  margin-bottom: 0.5rem;
}

/* La pousse, pour ce qui vaut toute l'année */
.reperes-pousse {
  display: block;
  width: 2.6rem;
  height: auto;
  margin-bottom: 0.5rem;
}

/* « En bref », avec le hibou du site posé en bas à droite de l'aplat bleu */
.bref-illustre {
  position: relative;
  padding-bottom: 8rem;
}

.bref-hibou {
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: 0;
  width: clamp(6rem, 4rem + 5vw, 9.5rem);
  height: auto;
  pointer-events: none;
}

@media (min-width: 48rem) {
  .bref-illustre {
    padding-bottom: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
    padding-right: 13rem;
  }
}

/* Le chemin de l'année : la période en cours est mise en avant */
.drapeau--ici .drapeau-quand {
  font-size: 1.1rem;
}

.drapeau--ici .drapeau-icone {
  transform: rotate(-8deg) scale(1.15);
}

/* Pictos des activités : dessins nets, posés et un peu inclinés, sans rond autour */
/* Même hauteur pour tous : les titres des cartes restent alignés */
.picto {
  display: block;
  width: auto;
  height: 3.5rem;
  margin-bottom: 0.75rem;
  transform: rotate(-6deg);
}

.picto .b { fill: var(--bleu); }
.picto .s { fill: var(--soleil); }
.picto .w { fill: #fff; }

.picto .t {
  stroke: var(--bleu);
  stroke-width: 3;
  stroke-linejoin: round;
}

.picto .l {
  fill: none;
  stroke: var(--bleu);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.picto .chiffres {
  fill: var(--bleu);
  font-family: var(--police);
  font-size: 15px;
  font-weight: 900;
}

/* Les activités : trois ou quatre cartes, sans trou dans la grille */
@media (min-width: 64rem) {
  .bilan-plan--trois {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* « Pas encore là ? », avec le bouclier du site */
.carte-bouclier {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.carte-bouclier img {
  width: clamp(4rem, 3rem + 2vw, 5.5rem);
  height: auto;
}