/* ==========================================================================
   AU VENT DANS LES BRANCHES — Feuille de style commune
   --------------------------------------------------------------------------
   Ce fichier contient :
     1. le design system (toutes les valeurs de charte.md, en un seul endroit)
     2. les styles de base (titres, textes, liens)
     3. les éléments communs à toutes les pages : header, boutons, footer

   RÈGLE : aucune couleur, police ou graisse ne doit être écrite « en dur »
   ailleurs dans le projet. On utilise toujours les variables de :root.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN SYSTEM
   --------------------------------------------------------------------------
   « :root » désigne la racine du document. Les variables déclarées ici sont
   disponibles dans TOUT le CSS du site, y compris dans les autres fichiers.
   Pour changer une couleur partout, il suffit de la modifier ici.
   ========================================================================== */

:root {

  /* --- Couleurs (charte.md) --- */
  --fond:          #FFF8DE;  /* fond principal du site                */
  --jaune-deco:    #FFDE59;  /* jaune secondaire, éléments décoratifs */
  --cta:           #FAB009;  /* boutons et accents                    */
  --texte:         #2B2B2B;  /* texte principal                       */
  --texte-sur-cta: #2B2B2B;  /* texte posé sur un bouton --cta        */
  /* Blanc pur. Ce n'est pas une couleur d'identité ajoutée à la charte :
     c'est le fond de certaines zones de contenu (les cartes de la page
     Cours) et des formes organiques posées derrière les textes. */
  --blanc:         #FFFFFF;

  /* --- Typographies (charte.md) --- */
  --titres: "Quicksand", sans-serif;
  --corps:  "Nunito Sans", sans-serif;

  /* --- Graisses autorisées : 400 / 500 / 600 / 700 uniquement --- */
  --normal:   400;
  --moyen:    500;
  --semigras: 600;
  --gras:     700;

  /* --- Rythme et espacements ---
     Utiliser ces valeurs plutôt que des pixels au hasard : c'est ce qui
     donne au site une respiration régulière d'une page à l'autre. */
  --espace-xs: 0.5rem;   /*  8px */
  --espace-s:  1rem;     /* 16px */
  --espace-m:  2rem;     /* 32px */
  --espace-l:  4rem;     /* 64px */
  --espace-xl: 6rem;     /* 96px */

  /* --- Formes --- */
  --largeur-max: 1200px; /* largeur maximale du contenu */
  --rayon:       12px;   /* arrondi standard            */
  --rayon-image: 20px;   /* arrondi des grandes images  */
}


/* ==========================================================================
   2. BASES
   ========================================================================== */

/* « border-box » fait que les paddings et bordures sont comptés DANS la
   largeur d'un élément. Sans ça, une boîte de 100% + du padding déborde. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Empêche tout défilement horizontal, même quand un élément décoratif déborde
   volontairement sur les côtés (comme la forme organique de l'accueil).
   La règle est posée sur html SEUL, et surtout pas sur body : sur body, elle
   transforme celui-ci en conteneur de défilement, ce qui neutralise
   silencieusement le « position: sticky » de l'en-tête. Sur html, le
   navigateur applique le rognage au niveau de la fenêtre et sticky
   fonctionne normalement. */
html {
  overflow-x: hidden;

  /* L'en-tête est collé en haut et occupe une centaine de pixels. Sans ce
     retrait, une ancre amènerait sa cible à zéro, c'est-à-dire DERRIÈRE
     l'en-tête. « scroll-padding-top » décale toutes les arrivées par ancre
     d'un coup, celles d'aujourd'hui comme celles à venir. */
  scroll-padding-top: 7rem;

  /* La page glisse jusqu'à l'ancre au lieu d'y sauter. */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--fond);
  color: var(--texte);
  font-family: var(--corps);
  font-weight: var(--normal);
  font-size: 1rem;
  line-height: 1.7;
}

h1, h2, h3 {
  font-family: var(--titres);
  color: var(--texte);
  margin: 0;
  line-height: 1.15;
}

/* clamp(mini, souhaité, maxi) : la taille s'adapte toute seule à la largeur
   de l'écran, sans avoir besoin d'un point de rupture pour chaque taille. */
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: var(--normal); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: var(--moyen); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: var(--semigras); }

p { margin: 0 0 var(--espace-s); }

a { color: inherit; }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Ouverture des panneaux dépliants ---
   Un panneau masqué l'est par « display: none », une propriété qui ne se
   transitionne pas. On ne peut donc pas animer sa hauteur simplement — mais
   une animation posée sur l'élément au moment où il s'affiche, elle, se joue.
   Le contenu se révèle donc en glissant, ce qui montre d'où il vient.
   Même mouvement pour les trois accordéons du site et pour le menu mobile. */
@keyframes deplier {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Conteneur central réutilisé par toutes les sections du site. */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--espace-m);
}

/* Masque un élément à l'écran tout en le laissant lisible par les lecteurs
   d'écran (utile pour les libellés de boutons purement graphiques). */
.lecteur-ecran-seulement {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ==========================================================================
   3. HEADER — commun aux 14 pages
   ========================================================================== */

/* Le header est placé sur sa propre couche, au-dessus de tout le reste.
   Sans cela, une forme décorative posée en haut d'une page (comme la bande
   ondulée de la page Cours) passerait PAR-DESSUS le menu et en délaverait
   la couleur. Le menu doit rester strictement identique sur les 14 pages :
   c'est cette règle qui le garantit, quelle que soit la page. */
/* L'en-tête reste collé en haut pendant le défilement.
   Trois conditions pour que ça fonctionne :
   — « sticky » et non « fixed » : l'en-tête garde sa place dans le flux, donc
     le contenu ne remonte pas dessous au chargement ;
   — un fond opaque est indispensable : sans lui, le texte de la page
     défilerait par transparence derrière le logo et le menu ;
   — « relative » est remplacé, mais un élément « sticky » reste un bloc de
     référence pour ses enfants positionnés : le menu mobile, posé en absolu
     sous l'en-tête, continue donc de s'ancrer au bon endroit. */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--fond);
  /* Plus d'air au-dessus qu'en dessous : le logo se retrouvait collé au
     bord haut de la page. */
  padding-block: var(--espace-m) var(--espace-s);
}

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-m);
}

/* « flex-shrink: 0 » est indispensable : sans lui, le lien du logo se
   comprime quand le menu manque de place, et l'image — dont la hauteur est
   fixe — se retrouve écrasée horizontalement. */
.entete__logo {
  flex-shrink: 0;
}

.entete__logo img {
  /* 51 px : 20 % de moins que les 64 px d'origine. */
  height: 51px;
  width: auto;
}

/* --- Navigation --- */

.nav__liste {
  display: flex;
  align-items: center;
  gap: clamp(var(--espace-s), 2vw, var(--espace-m));
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__lien {
  position: relative;
  display: inline-block;
  padding-block: var(--espace-xs);
  font-weight: var(--semigras);
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}

/* Le soulignement jaune est dessiné avec ::after plutôt qu'avec
   text-decoration : cela permet de le décoller un peu du texte. */
.nav__lien::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--cta);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.nav__lien:hover::after,
.nav__lien:focus-visible::after,
.nav__lien[aria-current="page"]::after {
  transform: scaleX(1);
}

/* --- Bouton burger : visible uniquement sur mobile (voir plus bas) --- */

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.nav__burger span {
  display: block;
  height: 2px;
  width: 26px;
  background-color: var(--texte);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Les trois barres se transforment en croix quand le menu est ouvert. */
.nav__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ==========================================================================
   4. BOUTONS — communs à tout le site
   --------------------------------------------------------------------------
   Deux variantes seulement :
     .bouton--principal  → fond plein, pour l'action mise en avant
     .bouton--secondaire → contour, pour l'action complémentaire
   ========================================================================== */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-s);
  min-height: 64px;
  padding: var(--espace-s) var(--espace-m);
  border: 2px solid var(--cta);
  border-radius: var(--rayon);
  font-family: var(--corps);
  font-weight: var(--gras);
  font-size: 1rem;
  line-height: 1.3;
  text-align: left;
  /* Répartit le texte équitablement sur les lignes plutôt que de couper un
     mot en fin de ligne (évite « santé et bien- / être »). */
  text-wrap: balance;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.bouton:hover,
.bouton:focus-visible {
  transform: translateY(-2px);
}

.bouton--principal {
  background-color: var(--cta);
  color: var(--texte-sur-cta);
}

.bouton--secondaire {
  background-color: transparent;
  color: var(--texte);
}

.bouton--secondaire:hover,
.bouton--secondaire:focus-visible {
  background-color: var(--jaune-deco);
}

/* Version compacte, pour les boutons placés à l'intérieur d'une carte.
   Ce n'est pas un nouveau style de bouton : c'est le même, en plus petit.
   Se combine avec --principal ou --secondaire. */
.bouton--petit {
  min-height: 44px;
  gap: var(--espace-xs);
  padding: var(--espace-xs) var(--espace-s);
  border-width: 1px;
  font-size: 0.9rem;
}

/* Petite flèche qui avance légèrement au survol. */
.bouton__fleche {
  transition: transform 0.2s ease;
}

.bouton:hover .bouton__fleche,
.bouton:focus-visible .bouton__fleche {
  transform: translateX(3px);
}

/* Petite feuille placée à gauche du libellé, comme sur la maquette.
   Comme le logo, feuille.png comporte une marge transparente importante :
   la taille réellement visible est environ la moitié de cette valeur. */
.bouton__icone {
  width: 48px;
  flex-shrink: 0;
}

/* Le fichier feuille.png est jaune. Sur le bouton --cta (jaune lui aussi),
   la feuille deviendrait invisible. On la recolore donc en --texte-sur-cta :
   brightness(0) rend l'image entièrement noire, puis invert(17%) l'éclaircit
   jusqu'à #2B2B2B, la couleur exacte imposée par la charte. */
.bouton--principal .bouton__icone {
  filter: brightness(0) invert(17%);
}


/* ==========================================================================
   5. ENCART « PREMIER COURS D'ESSAI » — commun à plusieurs pages
   --------------------------------------------------------------------------
   Utilisé par les pages de pratique, les sous-pages Santé & bien-être et la
   page Cours. Il vivait dans page-cours.css ; il est remonté ici le jour où
   la page Cours en a eu besoin, celle-ci ne chargeant pas ce fichier.
   ========================================================================== */

/* L'encart revient au crème pour se détacher de la zone blanche. */
.encart {
  position: relative;
  /* Largeur bridée puis centrée : l'encart ne court plus d'un bord à l'autre
     du conteneur, il se lit comme un bloc posé au milieu de la page. */
  max-width: 860px;
  margin-inline: auto;
  /* Retrait du haut réduit : le lotus porte déjà une marge transparente
     importante, qui s'ajoutait aux 32 px et creusait un vide sous la
     bordure. Le bas garde son retrait complet. */
  padding: var(--espace-s) var(--espace-l) var(--espace-m);
  border: 2px solid var(--jaune-deco);
  border-radius: var(--rayon);
  background-color: var(--fond);
  text-align: center;
}

/* Comme les autres fichiers du graphiste, ces images comportent une marge
   transparente : la taille visible fait environ la moitié de la valeur. */
.encart__lotus {
  width: 84px;
  margin: 0 auto var(--espace-xs);
}

.encart__question {
  font-size: 0.95rem;
}

.encart__titre {
  margin-bottom: var(--espace-s);
  font-family: var(--titres);
  font-weight: var(--semigras);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
}

.encart__precision {
  margin-bottom: 0;
  font-size: 0.9rem;
}

/* Le texte reste au centre et ne s'étale pas jusqu'aux angles : sinon il
   vient buter contre les fleurs décoratives sur les écrans moyens. */
.encart p {
  max-width: 56ch;
  margin-inline: auto;
}

/* Petites fleurs décoratives dans les angles. */
.encart__fleur {
  position: absolute;
  bottom: var(--espace-xs);
  width: 76px;
}

.encart__fleur--gauche { left: var(--espace-m); }
.encart__fleur--droite { right: var(--espace-m); }

/* Bouton facultatif sous le texte de l'encart. */
.encart__boutons {
  display: flex;
  justify-content: center;
  margin-top: var(--espace-m);
}


/* ==========================================================================
   6. FOOTER — commun aux 14 pages
   --------------------------------------------------------------------------
   Structure en place, contenu à compléter. Les mentions [À COMPLÉTER]
   signalent les informations qui n'ont pas encore été fournies.
   ========================================================================== */

/* Aucun retrait au-dessus : sinon le fond crème du body apparaît entre le
   contenu et le trait du footer, comme une bande qui dépasse — très visible
   sur les pages dont le contenu se termine en blanc. */
.pied {
  padding-block: var(--espace-l) var(--espace-m);
  border-top: 2px solid var(--jaune-deco);
}

.pied__colonnes {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--espace-l);
}

.pied__titre {
  margin-bottom: var(--espace-s);
  font-family: var(--titres);
  font-weight: var(--semigras);
  font-size: 1.1rem;
}

/* La première colonne est centrée : logo, séparateur puis texte. */
.pied__logo {
  text-align: center;
}

/* « > » cible uniquement l'image directe de la colonne, c'est-à-dire le
   logo. Sans lui, la règle s'appliquerait aussi au séparateur et lui
   imposerait la même hauteur. */
.pied__logo > img {
  height: 165px;
  width: auto;
  margin: 0 auto var(--espace-s);
}

/* --- Séparateur décoratif entre le logo et le texte ---
   Seule la feuille est une image ; les deux traits sont dessinés en CSS.
   « flex: 1 » leur fait occuper à parts égales la place restante : ils
   gardent donc la même longueur quelle que soit la largeur du footer. */
.pied__separateur {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
  width: 320px;
  margin: 0 auto var(--espace-s);
}

/* Les traits reprennent le jaune décoratif de la charte, qui correspond à
   la teinte de la feuille (relevée à #FFD85B, soit un écart invisible). */
.pied__separateur::before,
.pied__separateur::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background-color: var(--jaune-deco);
}

.pied__separateur img {
  width: 21px;
  flex-shrink: 0;
}

/* --- Réseaux sociaux --- */

.pied__reseaux {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
  margin: 0;
  list-style: none;
  padding: 0;
}

.pied__reseaux img {
  width: 28px;
  height: 28px;
}

/* --- Coordonnées --- */

.pied__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
}

.pied__contact li + li {
  margin-top: var(--espace-xs);
}

.pied__contact a {
  text-decoration: none;
}

.pied__contact a:hover,
.pied__contact a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--cta);
  text-underline-offset: 4px;
}

.pied__texte {
  font-size: 0.95rem;
  margin: 0;
}

/* Crédit de l'illustrateur, sous la description du lieu. En italique et un
   cran plus petit que le texte du footer : c'est une mention, pas du contenu.
   Le <br> du HTML fait passer l'adresse à la ligne. */
.pied__credit {
  margin: var(--espace-s) 0 0;
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.6;
}

.pied__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
}

.pied__liste li + li {
  margin-top: var(--espace-xs);
}

.pied__liste a {
  text-decoration: none;
}

.pied__liste a:hover,
.pied__liste a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--cta);
  text-underline-offset: 4px;
}

/* Trois zones : le copyright à gauche, les liens légaux exactement au
   centre, les réseaux sociaux à droite. Les deux colonnes latérales font la
   même largeur (1fr), c'est ce qui garantit que le milieu est bien centré
   même si les textes n'ont pas la même longueur. */
.pied__bas {
  margin-top: var(--espace-l);
  padding-top: var(--espace-s);
  border-top: 1px solid rgba(43, 43, 43, 0.15);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--espace-s);
  font-size: 0.85rem;
}

.pied__bas .pied__reseaux {
  justify-self: end;
}

/* Liens légaux, séparés par une petite barre verticale. */
.pied__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espace-s);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pied__legal li + li {
  border-left: 1px solid rgba(43, 43, 43, 0.25);
  padding-left: var(--espace-s);
}

.pied__legal a {
  text-decoration: none;
}

.pied__legal a:hover,
.pied__legal a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--cta);
  text-underline-offset: 4px;
}

/* Marqueur temporaire, à supprimer une fois les informations fournies. */
.a-completer {
  padding: 2px 6px;
  border-radius: 4px;
  background-color: var(--jaune-deco);
  font-weight: var(--semigras);
  font-size: 0.85em;
}


/* ==========================================================================
   7. RESPONSIVE — éléments communs
   ========================================================================== */

/* --- Le menu passe en burger ---
   Le seuil est haut (1100 px) parce que la navigation compte huit entrées :
   en dessous, elle viendrait toucher le logo. --- */
@media (max-width: 1100px) {

  .nav__burger {
    display: flex;
  }

  /* Le menu se déplie sous le header, en pleine largeur. */
  .nav__liste {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 10;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--espace-s) var(--espace-m) var(--espace-m);
    background-color: var(--fond);
    border-bottom: 2px solid var(--jaune-deco);
  }

  .nav__liste.est-ouvert {
    display: flex;
    animation: deplier 0.24s ease both;
  }

  /* Le trait de séparation est porté par l'élément de liste, pas par le lien :
     le lien reste ainsi à la largeur de son texte, et le soulignement jaune
     de la page courante fonctionne exactement comme sur ordinateur. */
  .nav__liste li {
    border-bottom: 1px solid rgba(43, 43, 43, 0.1);
  }

  .nav__liste li:last-child {
    border-bottom: none;
  }

  .nav__lien {
    padding-block: var(--espace-s);
    font-size: 1.05rem;
  }
}

/* --- Tablette --- */
@media (max-width: 900px) {

  .encart {
    padding-inline: var(--espace-m);
  }

  .encart__fleur {
    width: 58px;
  }

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

/* --- Mobile --- */
@media (max-width: 600px) {

  /* Marge latérale un peu plus large sur mobile : à 1 rem, le texte tombait
     trop près du bord de l'écran et devenait inconfortable à lire. */
  .conteneur {
    padding-inline: 1.5rem;
  }

  .entete__logo img {
    /* 46 px : la même réduction de 20 % qu'en desktop. */
    height: 46px;
  }

  .bouton {
    width: 100%;
  }

  /* Les fleurs de l'encart se rapprochent des bords, plus étroits. */
  .encart {
    padding-inline: var(--espace-s);
  }

  .encart__fleur {
    width: 52px;
    bottom: 0;
  }

  .encart__fleur--gauche { left: -12px; }
  .encart__fleur--droite { right: -12px; }

  /* Le bouton garde sa largeur naturelle et laisse de la place sous lui :
     en pleine largeur, il passerait par-dessus les fleurs des angles. */
  .encart__boutons .bouton {
    width: auto;
  }

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

  .pied__colonnes {
    grid-template-columns: 1fr;
  }

  /* Sur mobile, les trois zones s'empilent et se centrent. */
  .pied__bas {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .pied__bas .pied__reseaux {
    justify-self: center;
  }


  /* ========================================================================
     JUSTIFICATION DU TEXTE COURANT — mobile uniquement
     ------------------------------------------------------------------------
     Les marges latérales sont rigoureusement égales (24 px de chaque côté),
     mais une ligne de texte ne se remplit jamais tout à fait : le mot suivant
     ne rentre pas et passe à la ligne. Sur une colonne étroite, ce vide
     atteint 99 px en fin de ligne, ce qui donne l'impression d'une marge
     droite plus large que la gauche. La justification aligne les deux bords.

     « hyphens: auto » coupe les mots longs en fin de ligne — indispensable
     ici, sinon la justification écarterait démesurément les mots sur des
     lignes comme « yogathérapie » ou « accompagnement ». La césure s'appuie
     sur le lang="fr" de la balise <html> : ne pas le retirer.
     La version préfixée reste nécessaire pour Safari sur iPhone.

     PÉRIMÈTRE VOLONTAIREMENT LIMITÉ au texte courant, c'est-à-dire aux
     paragraphes de plusieurs lignes. Sont exclus : les cartes, le planning,
     les tableaux, les tarifs et tous les libellés courts, où la
     justification créerait de grands trous entre les mots.
     Pour justifier un nouveau bloc, l'ajouter à cette liste — c'est le seul
     endroit du site où cette règle est écrite.
     ======================================================================== */
  .titre-page__intro,
  .hero__texte p,
  /* L'accroche est exclue : sur une seule ligne de trois mots, la
     justification les écartait d'un bout à l'autre de l'écran. */
  .hero-cours__contenu p:not(.hero-cours__accroche),
  .membre__bio p,
  .evenement__description,
  .page-texte p,
  .page-texte li {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
  }


  /* ========================================================================
     RETRAIT DU TEXTE PLEINE LARGEUR — mobile uniquement
     ------------------------------------------------------------------------
     Un texte qui court d'un bord à l'autre a besoin de plus d'air qu'une
     carte, laquelle possède déjà sa propre marge intérieure. On ajoute donc
     16 px au retrait commun de 24 px, mais UNIQUEMENT sur les blocs de texte
     pleine largeur : le texte tombe à 40 px du bord, les cartes, tableaux,
     créneaux et plannings restent à 24 px.

     LA RÈGLE, en une phrase : l'icône ancre le titre.

       • Titre SANS icône (les titres de page et de hero) : il appartient à
         son texte, il se décale avec lui — titre, trait et paragraphes
         gardent le même alignement.
       • Titre AVEC une petite fleur devant (les titres de section) : il
         annonce les cartes qui le suivent, il reste donc aligné sur elles.
         Seuls ses paragraphes se décalent.

     DEUX PIÈGES, tous deux dus au fait que certains de ces blocs portent
     aussi la classe .conteneur — c'est le cas de .titre-page__contenu :

       1. on décale avec une MARGE et non du padding. Un padding-inline
          remplacerait le retrait de 24 px du conteneur au lieu de s'y
          ajouter, et le texte finirait PLUS près du bord qu'avant ;
       2. « width: auto » annule le « width: 100% » du conteneur. Sans lui,
          le bloc garde toute la largeur de l'écran et la marge le pousse
          simplement vers la droite : 40 px à gauche, 8 px à droite, et un
          débordement invisible parce que masqué par l'overflow-x du body.

     Sur les blocs qui ne sont pas des .conteneur, ces deux propriétés sont
     sans effet : la règle reste donc unique.
     ======================================================================== */

  /* Titre sans icône : le bloc entier se décale. */
  .titre-page__contenu,
  .hero-cours__contenu,
  .hero__contenu,
  .page-texte__contenu {
    width: auto;
    margin-inline: var(--espace-s);
  }

  /* Titre à icône : seuls les paragraphes se décalent. Seule la page Tarifs
     présente ce cas aujourd'hui. */
  .tarifs-section__intro {
    margin-inline: var(--espace-s);
  }
}