/* ==========================================================================
   AU VENT DANS LES BRANCHES — Pages généralistes
   --------------------------------------------------------------------------
   Bloc titre avec sa vague, grille de cartes et sous-titres.
   Utilisé par : Cours, Santé & bien-être et Planning.
   ========================================================================== */


/* ==========================================================================
   TITRE DE PAGE
   ========================================================================== */

/* La zone du titre reste sur le fond crème de la page ; la zone des cartes,
   en dessous, passe en blanc. « relative » sert de repère à la vague.
   Le bloc est aligné à gauche, dans les marges habituelles du conteneur. */
.titre-page {
  position: relative;
  /* Le retrait du haut sépare le titre du logo : sans lui, les deux se
     touchent presque, le header n'ayant que 16 px de marge basse. */
  padding-block: var(--espace-m);
}

/* --- Vague de séparation ---
   La vague est un aplat crème posé PAR-DESSUS le haut de la zone blanche.
   C'est son bord inférieur ondulé qui dessine la frontière entre les deux
   zones. Son bord supérieur est droit, et invisible puisqu'il se confond
   avec le crème de la page.
   Le fichier a été recadré sur la bande seule : il remplit donc exactement
   l'élément, sans calcul compliqué. */
.titre-page__forme {
  position: absolute;
  /* La vague déborde de chaque côté pour que ses extrémités arrondies
     sortent de l'écran et qu'elle paraisse pleine largeur. */
  left: -6%;
  right: -6%;
  /* Valeur négative : la vague plonge dans la zone blanche, sans atteindre
     les cartes (protégées par le padding de .cours). */
  bottom: -24px;
  /* La hauteur suit celle de la section, plus une réserve : le bord haut
     DROIT de la bande sort ainsi au-dessus de la page. Sinon il dessine une
     fine couture horizontale, la bande n'étant pas tout à fait du même crème
     que le fond. Seule la vague du bas doit se voir. */
  height: calc(100% + 200px);
  background: url("../images/forme-titre.png") no-repeat center / 100% 100%;
  z-index: 0;
  pointer-events: none;
}

/* Le texte repasse au-dessus de la vague. */
.titre-page__contenu {
  position: relative;
  z-index: 1;
}

/* Petit filet net sous le titre, identique à celui du hero de l'accueil
   (voir .hero__trait dans accueil.css). Il a remplacé le coup de pinceau.
   C'est lui qui porte l'espace entre le titre et le texte : le h1 n'a pas de
   marge (voir style.css). */
.titre-page__filet {
  display: block;
  width: 58px;
  height: 3px;
  margin-block: var(--espace-s);
  /* Léger retrait à droite : le filet n'est pas aligné au cordeau sur le
     titre, ce qui l'empêche de se lire comme un soulignement. Valeur en dur,
     plus fine que le plus petit pas du rythme (8 px). */
  margin-left: 4px;
  background-color: var(--cta);
  border-radius: 2px;
}

/* Accroche volontairement discrète : assez petite pour tenir sur une seule
   ligne sur ordinateur, juste sous le titre. */
.titre-page__accroche {
  margin-bottom: var(--espace-xs);
  font-family: var(--titres);
  font-weight: var(--semigras);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
}

/* Pas de largeur bridée : le texte suit la largeur du conteneur, comme les
   paragraphes des sections. */
.titre-page__intro {
  max-width: none;
  margin: 0;
}

/* --- Plante décorative, en bas à droite du bloc titre ---
   Posée au cas par cas dans le HTML : seules les pages Cours, Santé &
   bien-être et Planning la portent aujourd'hui.
   Le repère est .titre-page__contenu, qui est le conteneur centré du site :
   la plante reste ainsi alignée sur le bord droit du texte à toutes les
   largeurs, plutôt que collée au bord de l'écran.
   Ce conteneur porte déjà z-index: 1, la plante passe donc devant la vague. */
.titre-page__plante {
  position: absolute;
  right: var(--espace-m);
  bottom: var(--espace-xs);
  width: 94px;
  /* 35 % de transparence : le décor reste en retrait du texte. */
  opacity: 0.65;
  pointer-events: none;
}




/* ==========================================================================
   GRILLE DES COURS
   ========================================================================== */

/* La zone des cartes est en blanc, celle du titre reste sur le crème de la
   charte. C'est ce contraste qui détache le haut de la page. */
.cours {
  background-color: var(--blanc);
  /* Le retrait du haut doit rester supérieur au plongeon de la vague (24 px)
     pour qu'elle ne vienne pas mordre sur les cartes. */
  padding-block: var(--espace-l) var(--espace-l);
}

/* Section qui en suit une autre de même fond : pas de retrait en haut,
   celui de la section précédente suffit. */
.cours--suite {
  padding-top: 0;
}

/* La grille est une liste : c'est plus juste pour un lecteur d'écran, qui
   annonce alors « liste de 3 éléments ». On retire simplement les puces. */
.cours__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espace-m);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Variante à deux colonnes : les cartes sont alors plus larges, ce qui
   convient quand la section n'en compte que deux. */
.cours__grille--duo {
  grid-template-columns: repeat(2, 1fr);
}

/* Les cartes étant plus larges, leur illustration l'est aussi. On lui fixe
   une hauteur : les deux illustrations n'ayant pas le même format, sans cela
   les titres ne seraient pas alignés d'une carte à l'autre. */
.cours__grille--duo .carte__illustration {
  height: 265px;
}

.cours__grille--duo .carte__illustration img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
}

/* --- Sous-titre de section, précédé d'une petite fleur --- */
.sous-titre {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  margin-bottom: var(--espace-s);
}

.sous-titre__fleur {
  width: 34px;
  flex-shrink: 0;
}

/* Espace entre deux groupes de cartes. */
.groupe-pratiques + .groupe-pratiques {
  margin-top: var(--espace-l);
}

/* Chaque élément de liste s'étire, pour que les cartes aient toutes la même
   hauteur quelle que soit la longueur du texte. */
.cours__grille > li {
  display: flex;
}


/* ==========================================================================
   CARTE
   ========================================================================== */

.carte {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--espace-s) var(--espace-m);
  /* Le fond est l'image fournie par le graphiste : ses bords sont dessinés à
     la main, légèrement irréguliers. « 100% 100% » l'étire aux dimensions de
     la carte ; comme toutes les cartes ont la même taille, l'étirement est
     identique de l'une à l'autre. */
  background: url("../images/fond-carte.png") no-repeat center / 100% 100%;
}

/* Hauteur fixe : les illustrations n'ont pas toutes le même format, et sans
   cela les titres ne seraient pas alignés d'une carte à l'autre. C'est aussi
   ce qui rend l'ensemble insensible à un changement d'illustration.
   La valeur reste contenue : c'est elle qui pilote la hauteur de la carte,
   et donc la position du bouton « Découvrir », qu'on veut visible sans
   défiler sur un écran d'ordinateur. */
.carte__illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 240px;
  margin-bottom: var(--espace-s);
  /* Indispensable pour le survol ci-dessous : sans lui, l'illustration
     agrandie déborderait sur le titre juste en dessous. */
  overflow: hidden;
}

/* --- Survol de la carte ---
   L'illustration grossit de 4 %, le cadre ne bouge pas. C'est déjà le geste
   des portraits sur les pages de cours : même valeur, même durée.
   On n'agrandit surtout pas la carte entière — son fond est un dessin aux
   bords irréguliers, déjà étiré par « background-size: 100% 100% », et le
   bouton qu'elle contient a son propre survol : deux mouvements se
   déclencheraient au même endroit.
   « hover: hover » vise les appareils réellement dotés d'un pointeur : un
   petit portable est concerné, une grande tablette non. */
@media (hover: hover) {
  .carte__illustration img {
    transition: transform 0.2s ease;
  }

  .carte:hover .carte__illustration img {
    transform: scale(1.04);
  }
}

.carte__illustration img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
}

/* Taille réduite par rapport à un H2 de section : dans une carte, le titre
   doit rester proportionné au texte qui suit. La famille et la graisse,
   elles, restent celles de la charte pour un H2. */
.carte__titre {
  margin-bottom: var(--espace-xs);
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
}

.carte__texte {
  /* « auto » pousse le bouton en bas de la carte : les boutons des trois
     cartes restent alignés même si les textes n'ont pas la même longueur. */
  margin-bottom: auto;
}

.carte .bouton {
  margin-top: var(--espace-s);
  align-self: flex-start;
}

/* Variante où le bouton est centré dans la carte. Posée au cas par cas dans
   le HTML : les cartes de la page Santé & bien-être gardent le leur à
   gauche. */
.cours__grille--boutons-centres .carte .bouton {
  align-self: center;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --- Tablette : deux cartes par ligne --- */
@media (max-width: 900px) {

  .titre-page {
    padding-block: var(--espace-m) var(--espace-s);
  }

  /* Purement décorative : sous cette largeur, le texte du bloc titre occupe
     toute la place et la plante viendrait par-dessus. */
  .titre-page__plante {
    display: none;
  }

  .cours__grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Mobile : une carte par ligne --- */
@media (max-width: 600px) {

  /* Vague plus fine et plongeant moins, à l'échelle de l'écran. */
  .titre-page__forme {
    bottom: -20px;
    height: calc(100% + 160px);
  }

  .cours__grille {
    grid-template-columns: 1fr;
    gap: var(--espace-s);
  }

  /* Marge intérieure latérale élargie : à 1 rem, le contenu tombait trop
     près du bord dessiné de la carte. Le haut et le bas restent inchangés. */
  .carte {
    padding: var(--espace-s) 1.5rem;
  }

  .carte .bouton {
    /* Sur mobile, .bouton passe en pleine largeur (voir style.css). On le
       laisse reprendre sa largeur naturelle à l'intérieur d'une carte,
       et on le centre. */
    width: auto;
    align-self: center;
  }
}