/* ==========================================================================
   COURS ENFANTS — styles propres à cours-enfants.html
   --------------------------------------------------------------------------
   Chargé après style.css et page-interieure.css.

   Deux blocs seulement :
     1. le bandeau de titre — même parti pris que sur Cours adultes : deux
        colonnes, le texte dans une bulle blanche à gauche, l'illustration
        à droite ;
     2. les quatre cartes grises de « Où et quand ? ».
   ========================================================================== */


/* ==========================================================================
   1. LE BANDEAU DE TITRE
   --------------------------------------------------------------------------
   Le fichier porte une bande vide sur sa gauche : le premier trait de crayon
   n'apparaît qu'à 238 px du bord, sur 1800. Affiché tel quel, le dessin
   semblait donc décollé de la bulle, avec un grand vide crème entre les deux.

   On rogne cette bande — et elle seule. « aspect-ratio » donne à la boîte une
   proportion un peu plus haute que celle du fichier, « cover » y fait tenir
   l'image en la débordant, et « object-position: right » choisit de quel côté
   le surplus est retiré : à gauche. Le tronc de l'arbre, dessiné tout au bord
   droit, reste donc entier — c'est lui qu'un rognage centré tranchait en deux.

   La proportion 2/1 retire 172 px sur les 238 : le dessin se rapproche de la
   bulle et grandit d'autant, tout en gardant un souffle sur sa gauche.
   ========================================================================== */

.hero-page__illustration img {
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: right;
}

/* L'illustration prend deux fois la place du texte, comme sur Cours adultes,
   ET elle sort du conteneur pour aller jusqu'au bord droit de l'écran.

   Pourquoi la faire sortir : le tronc de l'arbre est dessiné tout au bord du
   fichier. Tant que l'image s'arrête à la marge du conteneur, ce bord tombe
   en plein milieu de la page et le dessin a l'air tranché. Poussé jusqu'au
   bord de l'écran, il se comporte comme un bandeau : le regard n'y voit plus
   une coupure mais une image qui continue au-delà de la fenêtre.

   Comment : une marge droite négative. Sur une grille, une marge négative ne
   décale pas l'élément, elle l'élargit d'autant — la colonne garde sa place,
   l'image déborde. Sa valeur est exactement la distance qui sépare le bord du
   conteneur du bord de la fenêtre : la moitié de ce qui reste une fois les
   1140 px du conteneur retirés, plus la marge intérieure de celui-ci.

   Les règles sont enfermées dans « min-width », et non écrites telles quelles :
   ce fichier est chargé APRÈS page-interieure.css, si bien qu'une déclaration
   nue passerait par-dessus celle qui remet le bandeau sur une seule colonne
   en dessous de 900 px — et la page resterait en deux colonnes sur mobile. */
@media (min-width: 1001px) {

  .hero-page {
    grid-template-columns: 1fr 2fr;
  }

  .hero-page__illustration {
    margin-right: calc(-1 * (max(0px, (100vw - var(--largeur-max)) / 2) + var(--espace-m)));
  }

  /* « 100vw » compte la largeur de la barre de défilement, que la page
     l'affiche ou non : l'image dépasse donc du bord de quelques pixels. On
     rogne ce surplus ici, sinon toute la page se mettrait à défiler
     horizontalement. */
  .zone-creme {
    overflow: hidden;
  }
}


/* --------------------------------------------------------------------------
   LA BULLE BLANCHE
   Comme sur le site d'origine, le texte du bandeau est posé dans une bulle
   blanche. La forme est obtenue en donnant à chaque coin un rayon horizontal
   et un rayon vertical différents : le coin devient un quart d'ellipse, et le
   rectangle une bulle.

   Ces règles sont les jumelles de celles de cours-adultes.css. La répétition
   est assumée pour l'instant : les deux fichiers ne sont jamais chargés
   ensemble, et déplacer la bulle dans le gabarit commun toucherait une page
   déjà validée. À mutualiser dans page-interieure.css si une troisième page
   en a besoin.
   -------------------------------------------------------------------------- */

.bulle {
  /* Les marges intérieures sont larges parce que les bords sont courbes :
     dans une bulle, le texte doit rentrer davantage que dans un rectangle,
     sinon les premières et dernières lignes touchent la paroi. */
  padding: var(--espace-l) var(--espace-m);
  background-color: var(--fond);
  border-radius: 46% 54% 40% 60% / 52% 44% 56% 48%;
}

/* Plus petit que le titre des autres bandeaux : il est ici enfermé dans une
   bulle, pas posé en pleine page. */
.bulle__titre {
  margin-bottom: var(--espace-s);
  font-size: clamp(1.5rem, 2.6vw, 32px);
}

/* Aucune règle de taille : le texte reste à la taille courante du site. */
.bulle__texte {
  margin: 0;
}


/* ==========================================================================
   2. LES QUATRE CARTES « OÙ ET QUAND ? »
   --------------------------------------------------------------------------
   Quatre panneaux gris en 2 × 2, chacun avec son picto jaune à gauche et son
   texte à droite. C'est une liste dans le HTML — quatre situations mises sur
   le même plan — d'où la remise à zéro des puces et du retrait.
   ========================================================================== */

.cartes-lieux {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Toutes les cartes prennent la hauteur de la plus haute, comme sur le site
     d'origine : sans cela, la rangée du haut, dont les textes tiennent sur une
     ligne, serait nettement plus basse que celle du bas. */
  grid-auto-rows: 1fr;
  gap: var(--espace-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.carte-lieu {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
  padding: var(--espace-m);
  background-color: var(--gris-bloc);
}

/* Les quatre pictos n'ont pas les mêmes proportions dans leur fichier : le
   chapeau est large et bas, l'épingle haute et étroite. On les enferme donc
   tous dans un carré de même taille, « contain » se chargeant de les y faire
   tenir sans les déformer — sinon ils paraîtraient de tailles différentes.

   « flex-shrink » les empêche de s'écraser quand le texte est long. */
.carte-lieu__picto {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.carte-lieu__texte {
  margin: 0;
}

/* Un numéro de téléphone ne se coupe jamais en deux lignes : il passe en
   entier à la ligne suivante plutôt que de se casser au milieu. */
.carte-lieu__texte a {
  white-space: nowrap;
}


/* ==========================================================================
   3. RESPONSIVE
   ========================================================================== */

/* Le bandeau à bulle bascule en une seule colonne dès 1000 px, alors que le
   reste du site attend 900. Raison : entre les deux, la colonne de gauche
   n'est plus assez large pour la bulle — une quinzaine de caractères par
   ligne, et la forme se tord en œuf. Les règles d'empilement du gabarit
   commun sont ici simplement étendues, ce fichier étant chargé après lui. */
@media (max-width: 1000px) {

  .hero-page {
    grid-template-columns: 1fr;
  }

  .hero-page__illustration {
    order: -1;
  }

  /* Empilée sous l'illustration, la bulle devient large et basse : les mêmes
     rayons en pourcentage y produiraient une ellipse écrasée. On les aplatit
     donc dans le sens vertical pour retrouver une forme de galet. */
  .bulle {
    padding: var(--espace-m);
    border-radius: 40% 60% 46% 54% / 12% 14% 12% 14%;
  }

  /* Sur mobile, l'inverse du bandeau : plus aucun débordement. L'illustration
     est centrée et ne dépasse jamais la largeur disponible, de sorte que le
     dessin tienne en entier à l'écran. */
  .hero-page__illustration {
    max-width: 100%;
    margin-inline: auto;
  }

  .hero-page__illustration img {
    display: block;
    width: 100%;
    height: auto;
    margin-inline: auto;
  }
}

/* Deux colonnes deviennent ici trop étroites pour des phrases entières : les
   cartes se lisent alors les unes sous les autres. Le seuil est calculé sur
   le contenu, pas repris des points de rupture du site. */
@media (max-width: 720px) {

  .cartes-lieux {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {

  /* Sur un bloc étroit et haut, un rayon en pourcentage donne une forme
     démesurée. La bulle redevient un simple rectangle arrondi. */
  .bulle {
    border-radius: var(--rayon);
  }

  .carte-lieu {
    padding: var(--espace-s);
  }
}