/* ==========================================================================
   ACCUEIL — styles propres à index.html
   --------------------------------------------------------------------------
   Chargé APRÈS style.css, qui fournit les variables, l'en-tête, les boutons,
   le bandeau contact et le pied de page.

   La page enchaîne cinq blocs, dans l'ordre du site d'origine :
     1. Hero              — illustration à gauche, texte à droite
     2. Yogathérapie      — texte à gauche, illustration à droite
     3. Les cours         — bandeau gris, trois cartes blanches
     4. Yoga Adapté Santé — bandeau crème
     5. Mon parcours      — bulle blanche + portrait

   Les blocs 4 et 5 partagent le même fond crème : ils sont enveloppés
   ensemble dans .zone-creme.
   ========================================================================== */


/* ==========================================================================
   1. LE BLOC EN DEUX COLONNES — utilisé trois fois sur la page
   --------------------------------------------------------------------------
   Hero, Yogathérapie et Yoga Adapté Santé partagent la même ossature : une
   illustration d'un côté, du texte de l'autre. Un seul jeu de règles, et une
   variante « --inverse » qui échange les deux côtés.
   ========================================================================== */

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--espace-m);
  padding-block: var(--espace-m);
}

/* Par défaut l'illustration est à gauche. « --inverse » la renvoie à droite
   SANS toucher à l'ordre du HTML : le texte reste écrit avant l'image dans
   le fichier, donc lu avant elle par un lecteur d'écran. */
.duo--inverse .duo__illustration {
  order: 2;
}

.duo__texte > :last-child {
  margin-bottom: 0;
}

/* Titre de bloc : 45 px sur le site d'origine. clamp() le fait rétrécir tout
   seul sur les petits écrans, sans point de rupture supplémentaire. */
.duo__titre {
  margin-bottom: var(--espace-s);
  font-size: clamp(2rem, 4vw, 45px);
}

/* Accroche sous le titre : 20 px, un cran au-dessus du corps de texte. */
.duo__accroche {
  margin-bottom: var(--espace-m);
  font-size: 20px;
  line-height: 1.67;
}

/* Yoga Adapté Santé a son texte centré, contrairement aux deux autres. */
.duo__texte--centre {
  text-align: center;
}


/* --- Le trait jaune et sa feuille ----------------------------------------
   Sur le site d'origine, les blocs de texte du hero et de la yogathérapie
   sont accompagnés d'un trait vertical jaune surmonté de deux feuilles.

   Le trait est dessiné en CSS plutôt qu'importé en image : il épouse ainsi
   la hauteur du texte, quelle que soit la longueur de celui-ci et quelle que
   soit la largeur de l'écran. Seules les feuilles sont un fichier. -------- */

.trait-feuille {
  /* Une seule valeur à changer pour redimensionner l'ensemble : le trait se
     recale tout seul, parce que sa position est calculée à partir d'elle. */
  --feuille: 40px;

  position: relative;
  padding-left: 3rem;
}

.trait-feuille__feuille {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--feuille);
}

/* Le trait prolonge la tige des feuilles : il doit partir exactement de sa
   pointe, sinon il court à côté d'elle.

   Dans le fichier, la tige se termine à 60,7 % de la largeur et touche le bord
   inférieur (l'image fait 160 × 138, soit un rapport de 0,8625). Ces deux
   proportions sont écrites ici en clair plutôt que traduites en pixels : le
   raccord reste juste quelle que soit la taille de la feuille.

   Les deux retraits d'un pixel centrent le trait sur la tige et le font
   remonter très légèrement sous la pointe, pour qu'aucun blanc ne s'intercale. */
.trait-feuille::before {
  content: "";
  position: absolute;
  left: calc(var(--feuille) * 0.607 - 1px);
  top: calc(var(--feuille) * 0.8625 - 2px);
  bottom: 0;
  width: 2px;
  background-color: var(--jaune);
}


/* --- Les formes organiques -------------------------------------------------
   Sur le site d'origine, les grandes illustrations ne sont pas des
   rectangles : elles sont découpées dans une forme organique.

   La découpe se fait avec « clip-path », qui pointe vers un tracé défini en
   SVG dans le HTML de la page. Deux raisons de préférer ça à « mask-image » :
   le tracé est écrit en coordonnées relatives (0 à 1), donc il s'étire tout
   seul quelle que soit la taille de l'image ; et il fonctionne en ouvrant le
   fichier par double-clic, ce que les masques pointant vers un fichier
   externe ne font pas.

   C'est aussi ce qui règle le fond blanc de yoga-therapie.png : découpé en
   forme organique, il ne fait plus un rectangle blanc sur la page. --------- */

.duo__illustration img {
  width: 100%;
}

/* Les deux fichiers sont presque carrés et comportent une large marge crème.
   Affichés tels quels, le dessin se retrouve minuscule au centre d'une
   grande forme vide. On leur impose donc le cadrage du site d'origine —
   « aspect-ratio » fixe la proportion de la boîte, « cover » recadre l'image
   dedans — ce qui ramène le dessin à sa taille juste. */
.forme-hero img {
  clip-path: url(#forme-hero);
  aspect-ratio: 495 / 560;
  object-fit: cover;
}

.forme-bloc img {
  clip-path: url(#forme-bloc);
  aspect-ratio: 599 / 505;
  object-fit: cover;
}


/* --- Le hero ------------------------------------------------------------ */

.hero {
  padding-top: var(--espace-s);
}

.hero__citation {
  margin-bottom: var(--espace-m);
}


/* ==========================================================================
   2. LES COURS — bandeau gris et trois cartes blanches
   ========================================================================== */

/* « position: relative » sert d'ancrage aux deux vagues, et « overflow:
   hidden » les empêche de dépasser sur les côtés.
   Les retraits verticaux sont plus grands que la hauteur des vagues (119 px
   en haut, 50 px en bas) : sans ça, le contenu passerait dessous. */
.cours {
  position: relative;
  overflow: hidden;
  padding-block: calc(119px + var(--espace-m)) calc(50px + var(--espace-m));
  background-color: var(--gris-bloc);
  text-align: center;
}

/* --- Les vagues de transition -------------------------------------------
   Le passage d'une section à l'autre ne se fait pas sur une ligne droite
   mais sur une courbe très étirée.

   Le principe : une forme de la couleur de la section VOISINE vient mordre
   sur celle-ci. En haut, une forme blanche mange le gris ; en bas, une forme
   crème fait la même chose. C'est donc la section grise qui porte les deux,
   et la jointure est forcément parfaite — il n'y a jamais deux bords à faire
   coïncider.

   « preserveAspectRatio="none" » autorise la forme à s'étirer en largeur
   sans grandir en hauteur : la courbe garde la même épaisseur sur un
   téléphone et sur un grand écran. --- */

.cours__vague {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
}

.cours__vague--haut {
  top: 0;
  height: 119px;
  fill: var(--fond);
  /* Le tracé d'origine est orienté vers le bas ; on le retourne. */
  transform: scaleY(-1);
}

.cours__vague--bas {
  bottom: 0;
  height: 50px;
  fill: var(--creme);
  transform: scaleX(-1);
}

.cours__lotus {
  width: 46px;
  margin: 0 auto var(--espace-xs);
}

.cours__titre {
  font-size: clamp(1.5rem, 3vw, 28px);
}

/* Le petit trait sous le titre. Il est court et centré : c'est une ponctuation,
   pas une séparation. */
.cours__trait {
  display: block;
  width: 130px;
  height: 1px;
  margin: var(--espace-xs) auto var(--espace-l);
  background-color: var(--trait);
}

/* « auto-fit » + « minmax » : les cartes se répartissent d'elles-mêmes sur
   trois, deux ou une colonne selon la place disponible. Pas besoin d'un
   point de rupture pour chaque cas. */
.cours__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--espace-m);
}

/* La carte est blanche et son retrait intérieur crée la marge claire qu'on
   voit autour de l'illustration.

   Au survol, c'est la carte ENTIÈRE qui grandit, jamais l'illustration seule :
   les trois dessins se raccordent d'une carte à l'autre pour reformer l'arbre,
   et agrandir l'image à l'intérieur de son cadre romprait ce raccord. */
.carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 14px var(--espace-m);
  background-color: var(--fond);
  border-radius: 8px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.carte:hover,
.carte:focus-within {
  transform: scale(1.08);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14);
  /* La carte agrandie passe au-dessus de ses voisines plutôt que dessous. */
  position: relative;
  z-index: 1;
}

/* Le cadre arrondit les angles de l'illustration. */
.carte__cadre {
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
}

/* « aspect-ratio » plutôt qu'une hauteur en pixels : la boîte garde la
   proportion du site d'origine quelle que soit la largeur de la colonne. */
.carte__image {
  width: 100%;
  aspect-ratio: 286 / 335;
  object-fit: cover;
}

.carte__titre {
  margin-block: var(--espace-m) var(--espace-s);
  font-size: 20px;
}

/* Pousse le bouton en bas de la carte : les trois boutons restent alignés
   même si un titre passe sur deux lignes. */
.carte .bouton {
  margin-top: auto;
}


/* ==========================================================================
   3. LA ZONE CRÈME — Yoga Adapté Santé et Mon parcours
   ========================================================================== */

.zone-creme {
  background-color: var(--creme);
  padding-bottom: var(--espace-l);
}


/* --- Mon parcours -------------------------------------------------------- */

.parcours__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--espace-m);
  padding-block: var(--espace-m);
}

/* La bulle blanche reprend la forme organique du bloc Yogathérapie — c'est
   le même tracé sur le site d'origine.

   La forme est une image de fond posée DERRIÈRE le texte, et non un
   découpage du bloc lui-même : découpé, le bloc rognerait les mots qui
   s'approchent trop des bords arrondis. */
.parcours__bulle {
  position: relative;
  padding: var(--espace-l) clamp(var(--espace-m), 6vw, var(--espace-xl));
  text-align: center;
}

.parcours__forme {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--fond);
}

/* Le contenu repasse au-dessus de la forme. */
.parcours__contenu {
  position: relative;
}

/* Ici la feuille est seule : pas de trait vertical, contrairement au hero. */
.parcours__feuille {
  width: 40px;
  margin-bottom: var(--espace-xs);
}

.parcours__titre {
  margin-bottom: var(--espace-m);
  font-size: clamp(1.75rem, 3.5vw, 40px);
}

.parcours__texte {
  margin-bottom: var(--espace-m);
}


/* --- Le portrait, à droite ----------------------------------------------- */

.parcours__profil {
  text-align: center;
}

/* Le rond blanc derrière l'illustration. Sans lui, le portrait — dont le fond
   est crème — se fondrait dans le crème de la section.
   « aspect-ratio: 1 » garantit qu'il reste rond à toute largeur. */
.parcours__rond {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  max-width: 268px;
  aspect-ratio: 1;
  margin: 0 auto var(--espace-m);
  border-radius: 50%;
  background-color: var(--fond);
  overflow: hidden;
}

.parcours__rond img {
  width: 60%;
}

.parcours__nom {
  margin: 0;
  font-family: var(--titres);
  font-size: 22px;
}

/* Même trait court que sous le titre des cours. */
.parcours__filet {
  display: block;
  width: 130px;
  height: 1px;
  margin: var(--espace-xs) auto var(--espace-s);
  background-color: var(--trait);
}

.parcours__role {
  margin: 0;
}


/* ==========================================================================
   4. RESPONSIVE
   --------------------------------------------------------------------------
   Vérifié à 1440 / 900 / 600 / 375 px.
   ========================================================================== */

@media (max-width: 900px) {

  /* Les blocs en deux colonnes s'empilent, et l'illustration passe TOUJOURS
     au-dessus du texte — y compris dans la variante inversée, où elle est
     écrite après lui dans le HTML. Sans cette règle, un bloc sur deux
     afficherait son image après son texte et le rythme de la page serait
     cassé. */
  .duo,
  .parcours__grille {
    grid-template-columns: 1fr;
    gap: var(--espace-m);
  }

  .duo__illustration,
  .duo--inverse .duo__illustration {
    order: -1;
  }

  .parcours__profil {
    order: -1;
  }

  /* Les illustrations ne prennent pas toute la largeur : à pleine largeur,
     la forme organique devient énorme et écrase le texte qui suit. */
  .duo__illustration {
    max-width: 420px;
    margin-inline: auto;
  }

  /* Les vagues s'aplatissent : à 119 px sur un téléphone, la courbe mangeait
     la moitié de la section. */
  .cours {
    padding-block: calc(60px + var(--espace-m)) calc(30px + var(--espace-m));
  }

  .cours__vague--haut { height: 60px; }
  .cours__vague--bas  { height: 30px; }

  .cours__trait {
    margin-bottom: var(--espace-m);
  }

  .parcours__bulle {
    padding: var(--espace-l) var(--espace-m);
  }
}


@media (max-width: 600px) {

  .duo__accroche {
    font-size: 18px;
  }

  /* Le trait jaune se resserre : 3 rem de retrait, c'est trop sur un écran
     de 375 px. Seule la taille de la feuille change — le trait suit. */
  .trait-feuille {
    --feuille: 32px;
    padding-left: 2.25rem;
  }

  /* Le bouton passe en pleine largeur (règle de style.css) : dans une carte,
     il reprend sa largeur naturelle pour ne pas écraser la mise en page. */
  .carte .bouton {
    width: auto;
  }
}