/* Généré par outils/construire.py depuis landing-page-patricia-suzanne.html. Ne pas éditer. */
  @font-face {
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../polices/eb-garamond-italic-latin-ext-a6d60ed0.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../polices/eb-garamond-italic-latin-9f79ebd1.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../polices/eb-garamond-normal-latin-ext-7b420e18.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../polices/eb-garamond-normal-latin-1a4b1370.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../polices/eb-garamond-normal-latin-ext-7b420e18.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../polices/eb-garamond-normal-latin-1a4b1370.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../polices/eb-garamond-normal-latin-ext-7b420e18.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../polices/eb-garamond-normal-latin-1a4b1370.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../polices/mulish-normal-latin-ext-978b6146.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../polices/mulish-normal-latin-ce75879f.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../polices/mulish-normal-latin-ext-978b6146.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../polices/mulish-normal-latin-ce75879f.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../polices/mulish-normal-latin-ext-978b6146.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../polices/mulish-normal-latin-ce75879f.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../polices/mulish-normal-latin-ext-978b6146.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../polices/mulish-normal-latin-ce75879f.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  :root {
    --blanc: #ffffff;
    --lumiere: #fffdfa;
    --aube: #f8f2fd;
    --or-pale: #f7e3ae;
    --or: #e3b34f;
    --or-profond: #a87a24;
    --violet-clair: #f1e9fa;
    --violet: #7a58ad;
    --violet-profond: #4a3273;
    --encre: #33284a;
    --encre-douce: #6f6284;
    /* Retenues le 29 août parmi trois couples comparés dans la page.
       Les replis servent le temps que les polices se chargent, et si elles
       ne se chargent pas du tout. */
    --serif: "EB Garamond", Georgia, "Times New Roman", serif;
    --sans: "Mulish", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--sans);
    background: var(--lumiere);
    color: var(--encre);
    line-height: 1.75;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
  }
  .etroit { max-width: 620px; margin: 0 auto; padding: 0 28px; }


  /* Bascule de comparaison du récit, retirée le 13 septembre : Patricia a
     tranché pour la troisième personne. Style conservé en commentaire, il ne
     resservira que si elle veut comparer de nouveau.
  .bascule-recit {
    display: inline-block;
    margin-top: 40px;
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--violet);
    background: rgba(255, 253, 250, .85);
    border: 1px dashed rgba(122, 88, 173, .4);
    border-radius: 999px;
    padding: 9px 20px;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease;
  }
  .bascule-recit:hover,
  .bascule-recit:focus-visible {
    background: var(--violet-clair);
    border-color: rgba(122, 88, 173, .7);
    outline: none;
  }
  .v-je { display: none; }
  body.recit-je .v-je { display: block; }
  body.recit-je .v-elle { display: none; }
  */

  /* HERO */
  .hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 60px 28px;
    /* Fond redoré le 28 août, d'après la bannière Holistique. Le cœur est
       nettement plus or qu'avant, les bords se dissolvent toujours en violet
       pâle puis en blanc, pour que le raccord avec la suite de la page reste
       invisible. La bannière descendait jusqu'au brun doré sur ses bords :
       repris ici, cela aurait cassé ce raccord et abîmé la lisibilité. */
    background:
      radial-gradient(ellipse 96% 74% at 50% 36%,
        #fffef8 0%, #fff8db 12%, #fdefb6 24%, #f9e296 35%,
        #f5d67e 46%, #f2ce6d 56%, #f3d68d 67%, #f1dcb4 77%,
        #f0e1e0 87%, #f2e8f6 95%, var(--lumiere) 100%);
  }
  /* Sur ce fond doré, deux textes du hero passaient sous le seuil de contraste.
     Ils sont assombris ici, et seulement ici. */
  .hero .nom { color: var(--violet-profond); }
  .hero .sous { color: #5c5170; }
  .soleil {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -54%);
    width: min(118vh, 132vw);
    height: min(118vh, 132vw);
    pointer-events: none;
    opacity: 0;
    animation: lever 2.6s cubic-bezier(.2,.7,.3,1) .15s forwards;
  }
  @keyframes lever { from { opacity: 0; transform: translate(-50%, -50%) scale(.92); } to { opacity: 1; transform: translate(-50%, -54%) scale(1); } }
  .rayons { transform-origin: 300px 300px; animation: tourner 180s linear infinite; }
  @keyframes tourner { to { transform: rotate(360deg); } }

  /* ------------------------------------------------------------------
     COUCHES DE LUMIÈRE, reprises de la bannière Holistique le 28 août.
     Quatre mécanismes empilés, du fond vers l'avant : les nuées dorées,
     le cône de lumière descendant, les orbes flottants, les étincelles.
     Tout est en pourcentages, la bannière d'origine était en pixels fixes
     sur 1920 par 1080. Aucune ressource extérieure, tout est dessiné ici.
     ------------------------------------------------------------------ */
  .lumiere { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

  /* 1. Les nuées. Bandes dorées très floutées qui dérivent sans jamais
     revenir au même endroit en même temps, grâce aux durées décalées. */
  .nuees { position: absolute; inset: -12%; filter: blur(52px); }
  .nuee {
    position: absolute;
    border-radius: 50%;
    animation: deriver 40s ease-in-out infinite;
  }
  @keyframes deriver {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)) scale(1); }
    50%      { transform: translate3d(1.5%, -1.5%, 0) rotate(var(--r, 0deg)) scale(1.08); }
  }

  /* 2. Le cône de lumière qui descend du haut. C'est lui qui apporte
     l'essentiel du « lumineux » : trois voiles blancs superposés, du plus
     large au plus étroit, qui respirent lentement. */
  .faisceau {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    animation: rayonner 11s ease-in-out infinite;
  }
  @keyframes rayonner { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }

  /* 3. Les orbes. Petites bulles dorées qui montent et redescendent. */
  .orbes { position: absolute; inset: -8%; filter: blur(20px); opacity: .9; }
  .orbe {
    position: absolute;
    border-radius: 50%;
    animation: flotter 30s ease-in-out infinite;
  }
  @keyframes flotter {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .8; }
    50%      { transform: translate3d(1.2%, -2%, 0) scale(1.07); opacity: 1; }
  }

  /* 4. Les étincelles à quatre branches. En or plutôt qu'en blanc pur comme
     sur la bannière : sur un fond aussi clair, le blanc ne se voyait pas. */
  .etincelles { position: absolute; inset: 0; }
  .etincelles g { animation: scintiller 8s ease-in-out infinite; }
  @keyframes scintiller { 0%, 100% { opacity: .18; } 50% { opacity: .8; } }

  /* 5. Le raccord. Le hero est maintenant franchement doré, la section
     suivante est en violet très pâle. Ce voile éteint l'or sur les cent
     derniers pixels pour que le passage ne se voie pas. */
  .raccord-bas {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 190px;
    pointer-events: none;
    background: linear-gradient(to top, var(--lumiere) 0%, rgba(255, 253, 250, .72) 38%, rgba(255, 253, 250, .28) 70%, rgba(255, 253, 250, 0) 100%);
  }

  /* Fleur de vie superposée au soleil. Trois réglages : opacity pour la
     discrétion, stroke-width pour la finesse, stroke pour la couleur. */
  .fleur-fond {
    fill: none;
    stroke: #7a58ad;
    stroke-width: .7;
    opacity: .07;
  }

  .contenu-hero { position: relative; z-index: 2; }
  /* Déplacé le 28 août : le portrait n'est plus dans le hero, il ouvre le récit.
     Plus d'animation d'entrée, elle n'a plus de sens à cet endroit de la page. */
  .portrait {
    width: 248px; height: 248px;
    margin: 0 auto 48px;
    /* Cadrage sur la silhouette. Pour l'ajuster : background-size zoome,
       background-position déplace (gauche/droite, puis haut/bas). */
    background-image: url("../images/portrait.jpg");
    background-size: 192% auto;
    background-position: 19% 86.5%;
    background-repeat: no-repeat;
    /* Fondu des bords vers le halo, plutôt qu'un cercle net. Chaque étape du
       dégradé est un palier de transparence : rapprocher les pourcentages
       durcit le bord, les écarter adoucit encore le fondu. */
    border-radius: 50%;
    /* Fondu élargi le 28 août. Sur le halo chaud du hero, les bords se
       perdaient d'eux-mêmes. Sur le blanc de cette section le contraste est
       plus fort, il faut commencer le fondu plus tôt pour la même douceur. */
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 40%, rgba(0,0,0,.9) 57%, rgba(0,0,0,.52) 73%, rgba(0,0,0,.16) 88%, transparent 100%);
    mask-image: radial-gradient(circle at 50% 50%, #000 40%, rgba(0,0,0,.9) 57%, rgba(0,0,0,.52) 73%, rgba(0,0,0,.16) 88%, transparent 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    position: relative;
  }
  /* Repli : voile de la couleur du fond, pour les navigateurs qui n'appliquent
     pas le masque. Là où le masque fonctionne, il efface aussi ce voile.
     Couleur alignée sur le fond de la section du récit, #fffdfa, et non plus
     sur le halo chaud du hero. */
  .portrait::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
      rgba(255, 253, 250, 0) 50%,
      rgba(255, 253, 250, .3) 68%,
      rgba(255, 253, 250, .78) 85%,
      rgba(255, 253, 250, 1) 100%);
  }
  .nom {
    font-family: var(--sans);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: var(--violet);
    margin-bottom: 30px;
    opacity: 0;
    animation: monter 1.4s ease 1s forwards;
  }
  .accroche {
    font-family: var(--serif);
    /* Réduite d'environ un sixième le 29 août, à la demande de Patricia. */
    font-size: clamp(1.78rem, 4.6vw, 2.68rem);
    line-height: 1.3;
    font-weight: normal;
    /* Violet profond plutôt qu'encre : le nom juste au-dessus porte déjà cette
       couleur dans le bandeau, et c'est celle du fil rouge en bas de page.
       L'ouverture et la fermeture de la page se répondent. */
    color: var(--violet-profond);
    /* Élargi le 28 août : la nouvelle accroche est une énumération ternaire,
       15ch la cassait en quatre lignes trop étroites. */
    max-width: 22ch;
    margin: 0 auto 34px;
    opacity: 0;
    animation: monter 1.6s ease 1.25s forwards;
  }
  .accroche em { font-style: italic; color: var(--violet); }
  /* Devenu un h2 le 29 août, pour le référencement : il faut donc neutraliser
     le gras et la taille que le navigateur applique d'office aux titres. */
  .sous {
    font-weight: normal;
    color: var(--encre-douce);
    font-size: 0.94rem;
    letter-spacing: .3px;
    margin-bottom: 46px;
    opacity: 0;
    animation: monter 1.4s ease 1.6s forwards;
  }
  /* Chaque pratique reste d'un bloc : le retour à la ligne tombe sur le « & »,
     jamais au milieu d'un nom de pratique. */
  .sous span { white-space: nowrap; }
  .bouton-hero { opacity: 0; animation: monter 1.4s ease 1.9s forwards; }
  @keyframes monter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  /* Taille harmonisée le 29 août : celle du bouton du bandeau devient la règle
     pour tous. Le bouton de la lettre d'information partage déjà cette
     typographie ; seul son calage vertical diffère, pour rester à la hauteur
     du champ de saisie posé à côté. */
  .bouton {
    display: inline-block;
    text-decoration: none;
    font-size: 0.8rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-weight: 600;
    color: #fffdfa;
    background: var(--violet);
    padding: 13px 34px;
    border-radius: 999px;
    box-shadow: 0 8px 30px rgba(122, 88, 173, .3), 0 0 0 1px rgba(227, 179, 79, .35);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  }
  .bouton:hover {
    background: var(--violet-profond);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(122, 88, 173, .4), 0 0 0 1px rgba(227, 179, 79, .6);
  }
  .mention-bouton {
    margin-top: 16px;
    font-size: 0.8rem;
    color: var(--encre-douce);
    letter-spacing: .4px;
  }

  /* Second appel au rendez-vous, ajouté le 29 août, juste après les deux
     cartes. Depuis le réordonnancement du 28, les propositions se trouvent au
     milieu de la page et le seul bouton restait tout en haut : une visiteuse
     convaincue par une carte devait remonter au sommet. Celui-ci la rattrape
     à l'endroit exact où la décision se prend. */
  .appel-second {
    text-align: center;
    max-width: 800px;
    margin: 54px auto 0;
    padding: 0 28px;
  }
  /* Phrase au-dessus du bouton, retirée de la page le 29 août à la demande de
     Patricia : le bouton reste seul. Style conservé pour pouvoir la remettre,
     à supprimer si la décision se confirme. */
  .appel-texte {
    font-family: var(--serif);
    font-size: 1.06rem;
    color: var(--encre-douce);
    margin-bottom: 26px;
  }

  .descendre {
    position: absolute;
    bottom: 30px; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    opacity: 0;
    animation: monter 1.4s ease 2.4s forwards, respirer 3.4s ease-in-out 3.6s infinite;
  }
  .descendre span {
    display: block;
    width: 1px; height: 40px;
    background: linear-gradient(var(--violet), transparent);
  }
  @keyframes respirer { 0%, 100% { opacity: .85; } 50% { opacity: .3; } }

  /* SECTIONS */
  section { padding: 128px 0; text-align: center; }
  .ligne {
    font-family: var(--serif);
    font-size: clamp(1.28rem, 2.9vw, 1.65rem);
    line-height: 1.62;
    color: var(--encre);
    margin-bottom: 34px;
  }
  .ligne:last-of-type { margin-bottom: 0; }
  .ligne.douce { color: var(--encre-douce); }
  /* Petit lien de renvoi, même langage visuel que « En savoir plus » des cartes. */
  .lien-discret {
    display: inline-block;
    margin-top: 36px;
    font-family: var(--sans);
    font-size: 0.84rem;
    letter-spacing: 1px;
    color: var(--or-profond);
    /* Sans flèche, le soulignement est le seul signal qu'il s'agit d'un lien. */
    text-decoration: underline;
    text-decoration-color: rgba(168, 122, 36, .35);
    text-underline-offset: 5px;
    transition: color .25s ease, text-decoration-color .25s ease;
  }
  .lien-discret:hover,
  .lien-discret:focus-visible {
    color: var(--violet);
    text-decoration-color: rgba(122, 88, 173, .55);
    outline: none;
  }

  .ligne.signature {
    font-style: italic;
    color: var(--violet);
    margin-top: 46px;
  }

  .filet {
    display: block;
    width: 46px;
    height: 23px;
    margin: 0 auto 48px;
  }
  .filet path {
    fill: none;
    stroke: var(--or);
    stroke-width: 1.1;
    stroke-linecap: round;
    opacity: .6;
  }

  .fond-aube {
    background: linear-gradient(180deg, var(--lumiere) 0%, var(--aube) 45%, var(--lumiere) 100%);
  }

  .fil-rouge {
    font-family: var(--serif);
    font-size: clamp(1.6rem, 4.2vw, 2.5rem);
    line-height: 1.42;
    color: var(--violet-profond);
    max-width: 17ch;
    margin: 0 auto;
  }

  /* Style des quatre phrases de la question 22. La section a été retirée de la
     page le 28 août, ce style est conservé pour pouvoir la remettre en un bloc
     si Patricia change d'avis. À supprimer si la décision se confirme. */
  .murmures { list-style: none; }
  .murmures li {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.12rem;
    color: var(--encre-douce);
    padding: 15px 0;
  }
  .murmures li + li { border-top: 1px solid rgba(122, 88, 173, .18); }

  /* LES DEUX PORTES */
  .portes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 28px;
    text-align: left;
  }
  .porte {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(122, 88, 173, .16);
    border-radius: 15px;
    padding: 36px 32px 30px;
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  }
  .porte:hover,
  .porte:focus-visible {
    background: var(--violet-clair);
    border-color: rgba(227, 179, 79, .7);
    transform: translateY(-4px);
    box-shadow: 0 16px 42px rgba(122, 88, 173, .17);
    outline: none;
  }
  /* LES DEUX BULLES, 29 août.
     Elles imagent les propositions sans les illustrer au premier degré : la
     modalité est déjà écrite dans le titre, l'image porte la sensation.
     À distance s'ouvre : arcs non fermés, soleil bas sur un horizon, la
     lumière part vers l'extérieur. En présentiel se referme : cercles
     complets qui convergent vers un coeur lumineux.
     Les fonds se dissolvent en transparence et non en blanc, pour que les
     bulles tiennent aussi sur le violet pâle du survol.
     Décision du 29 août : le dessin est définitif, il n'attend pas de photo.
     Le mécanisme d'accueil d'une image est laissé en place au cas où, et ne
     sert à rien aujourd'hui : ajouter la classe « photo » sur le div masque le
     dessin, puis on remplace le background-image par url("..."). */
  .bulle {
    width: 128px;
    height: 128px;
    flex: 0 0 auto;
    margin: 0 auto 28px;
    border-radius: 50%;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    transition: transform .35s ease;
    /* Fondu des bords, repris du portrait du récit : même traitement, pas
       d'anneau net. Il s'applique aussi au dessin, donc les arcs qui sortent
       du cadre s'éteignent d'eux-mêmes. */
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 54%, rgba(0,0,0,.93) 68%, rgba(0,0,0,.58) 81%, rgba(0,0,0,.18) 92%, transparent 100%);
    mask-image: radial-gradient(circle at 50% 50%, #000 54%, rgba(0,0,0,.93) 68%, rgba(0,0,0,.58) 81%, rgba(0,0,0,.18) 92%, transparent 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .porte:hover .bulle,
  .porte:focus-visible .bulle { transform: scale(1.045); }
  .bulle svg { display: block; width: 100%; height: 100%; }
  .bulle.photo svg { display: none; }
  /* Le fond ne porte que l'atmosphère, jamais la lumière : c'est le dessin qui
     porte la lumière. Un dégradé radial doré ici écrasait le soleil et rendait
     les deux bulles illisibles, essai du 29 août au matin. */
  .bulle-distance {
    background-image: linear-gradient(180deg,
      rgba(244, 237, 252, .9) 0%,
      rgba(255, 253, 248, .95) 44%,
      rgba(253, 243, 216, .95) 68%,
      rgba(245, 224, 165, .95) 100%);
  }
  .bulle-presentiel {
    background-image: radial-gradient(circle at 50% 50%,
      rgba(255, 252, 243, .96) 0%,
      rgba(249, 240, 252, .95) 40%,
      rgba(232, 218, 246, .95) 74%,
      rgba(219, 202, 240, .92) 100%);
  }

  .porte-titre {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--violet);
    margin-bottom: 18px;
    transition: color .3s ease;
  }
  .porte:hover .porte-titre,
  .porte:focus-visible .porte-titre { color: var(--violet-profond); }
  .porte-texte {
    font-family: var(--serif);
    font-size: 1.1rem;
    line-height: 1.62;
    color: var(--encre);
    margin-bottom: 14px;
  }
  /* Description courte, puis « Pour qui » et « Pour quoi ». Ajoutés le 28 août.
     La ligne serif nomme, la description enchaîne sans étiquette, et les deux
     blocs suivants sont séparés par un filet or très pâle. */
  .porte-detail {
    font-size: 0.88rem;
    line-height: 1.72;
    color: var(--encre-douce);
    margin-bottom: 22px;
  }
  .porte-bloc {
    border-top: 1px solid rgba(227, 179, 79, .34);
    padding-top: 15px;
    margin-bottom: 15px;
  }
  .porte-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 2.6px;
    color: var(--or-profond);
    margin-bottom: 7px;
  }
  .porte-bloc p {
    font-size: 0.88rem;
    line-height: 1.72;
    color: var(--encre-douce);
  }
  /* Rappel de cadre, sur la carte qui parle d'hypnose. */
  .porte-mention {
    font-size: 0.78rem;
    line-height: 1.62;
    font-style: italic;
    color: var(--encre-douce);
    margin-top: 9px;
  }
  .porte-lien {
    margin-top: auto;
    padding-top: 10px;
    font-size: 0.83rem;
    letter-spacing: 1.2px;
    color: var(--or-profond);
  }
  .porte-lien .fleche {
    display: inline-block;
    transition: transform .3s ease;
  }
  .porte:hover .porte-lien .fleche,
  .porte:focus-visible .porte-lien .fleche { transform: translateX(7px); }


  /* LETTRE */
  .lettre-titre,
  .titre-section {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 3.6vw, 2.05rem);
    line-height: 1.35;
    font-weight: normal;
    margin-bottom: 16px;
  }
  /* Titre qui chapeaute les deux portes : plus d'air avant les cartes. */
  .titre-section { text-align: center; margin-bottom: 44px; }
  /* Quand un sous-titre suit le titre, l'air passe sous le sous-titre. */
  .titre-section.avec-sous-titre { margin-bottom: 14px; }
  .sous-titre-section {
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.72;
    color: var(--encre-douce);
    max-width: 38ch;
    margin: 0 auto 46px;
    padding: 0 28px;
  }

  /* Texte d'introduction, ajouté le 29 août, entre le bandeau et les
     propositions. C'est le premier contact après l'accroche : trois lignes,
     pas davantage, sur une page qui vit de son dépouillement. */
  /* Titre de la section d'introduction, 29 août. C'est un vrai h2 : il porte
     « coaching holistique » là où un moteur de recherche le lit. */
  .intro-titre {
    font-family: var(--serif);
    font-size: clamp(1.55rem, 3.7vw, 2.15rem);
    line-height: 1.34;
    font-weight: normal;
    /* Aligné le 29 août sur l'accroche du bandeau et le fil rouge : les trois
       grands titres serif de la page portent désormais le même violet. */
    color: var(--violet-profond);
    max-width: 26ch;
    margin: 0 auto;
    text-align: center;
  }
  /* La question, en h3. Formulée telle quelle par Patricia, et c'est une bonne
     intuition : les moteurs privilégient les titres posés en question. */
  .intro-question {
    font-family: var(--serif);
    font-size: clamp(1.02rem, 2.2vw, 1.16rem);
    font-weight: normal;
    line-height: 1.6;
    color: var(--violet);
    margin: 30px auto 16px;
    text-align: center;
  }
  .intro {
    font-family: var(--serif);
    font-size: clamp(1.04rem, 2.2vw, 1.18rem);
    line-height: 1.76;
    color: var(--encre);
    max-width: 52ch;
    margin: 0 auto;
    text-align: center;
  }
  /* LES TROIS SOINS, 13 septembre. Ils développent l'accroche du bandeau,
     « Prendre soin du corps, de l'âme et de l'esprit », qui était annoncée en
     haut de page et reprise nulle part ensuite. En serif : c'est Patricia qui
     décrit sa façon de travailler, ce n'est pas de l'information.
     Empilés et non en trois colonnes : les deux cartes arrivent juste après,
     deux grilles l'une sur l'autre alourdiraient la page. */
  .trois-soins {
    max-width: 580px;
    margin: 58px auto 0;
    padding: 0 28px;
  }
  .soin + .soin { margin-top: 34px; }
  .soin-titre {
    font-family: var(--serif);
    font-size: clamp(1.08rem, 2.3vw, 1.22rem);
    font-weight: normal;
    line-height: 1.5;
    color: var(--violet);
    margin-bottom: 12px;
    text-align: center;
  }
  .soin-texte {
    font-family: var(--serif);
    font-size: clamp(0.99rem, 2.1vw, 1.08rem);
    line-height: 1.78;
    color: var(--encre-douce);
    text-align: center;
  }
  /* Les pratiques nommées sous chaque titre, ajoutées puis retirées par
     Patricia le 13 septembre. Le style est conservé, comme celui du bloc de
     présentation et celui des quatre phrases : il suffit de recréer les trois
     div pour les remettre en un geste.
  .soin-pratiques {
    font-family: var(--sans);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    color: var(--or-profond);
    margin-bottom: 10px;
    text-align: center;
  }
  */

  /* Moins d'air sous l'intro que sous une section ordinaire : elle n'est pas
     un chapitre en soi, elle amène aux propositions. */
  .section-intro { padding: 108px 0 86px; }
  /* Bloc de présentation, ajouté puis retiré de la page le 29 août à la
     demande de Patricia. Le style est conservé pour pouvoir le remettre en un
     bloc : il suffit de recréer le paragraphe. En sans et non en serif, parce
     que sur cette page le serif porte la voix de Patricia et le sans porte
     l'information. À supprimer si la décision se confirme. */
  .intro-faits {
    font-family: var(--sans);
    font-size: 0.95rem;
    line-height: 1.82;
    color: var(--encre-douce);
    max-width: 56ch;
    margin: 38px auto 0;
    padding: 0 4px;
    text-align: center;
  }
  .intro-suite {
    font-family: var(--serif);
    font-size: clamp(1rem, 2.1vw, 1.14rem);
    line-height: 1.78;
    color: var(--encre-douce);
    max-width: 58ch;
    margin: 26px auto 0;
    text-align: center;
  }
  .lettre-texte {
    color: var(--encre-douce);
    max-width: 40ch;
    margin: 0 auto 36px;
  }
  .lettre-forme {
    display: flex;
    gap: 10px;
    max-width: 470px;
    margin: 0 auto;
  }
  .lettre-forme input {
    flex: 1;
    min-width: 0;
    font-family: var(--sans);
    font-size: 0.94rem;
    color: var(--encre);
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(122, 88, 173, .22);
    border-radius: 999px;
    padding: 15px 24px;
    transition: border-color .3s ease, box-shadow .3s ease;
  }
  .lettre-forme input::placeholder { color: var(--encre-douce); }
  .lettre-forme input:focus {
    outline: none;
    border-color: rgba(227, 179, 79, .8);
    box-shadow: 0 0 0 3px rgba(227, 179, 79, .16);
  }
  .lettre-forme button {
    font-family: var(--sans);
    font-size: 0.8rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-weight: 600;
    color: #fffdfa;
    background: var(--violet);
    border: none;
    border-radius: 999px;
    padding: 15px 30px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .lettre-forme button:hover,
  .lettre-forme button:focus-visible {
    background: var(--violet-profond);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(122, 88, 173, .3);
    outline: none;
  }
  .lettre-mention {
    margin-top: 20px;
    font-size: 0.78rem;
    line-height: 1.7;
    color: var(--encre-douce);
  }
  .lettre-mention a { color: var(--violet); }

  /* NAVIGATION DE BAS DE PAGE */
  .nav-bas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px 18px;
    list-style: none;
    max-width: 800px;
    margin: 30px auto 32px;
    padding: 0 28px;
    text-align: center;
  }
  .nav-bas a {
    color: var(--encre-douce);
    text-decoration: none;
    font-size: 0.86rem;
    letter-spacing: .2px;
    transition: color .25s ease;
  }
  .nav-bas a:hover,
  .nav-bas a:focus-visible {
    color: var(--violet);
    text-decoration: underline;
    text-underline-offset: 4px;
    outline: none;
  }

  footer {
    padding: 54px 0 44px;
    text-align: center;
    font-size: 0.79rem;
    color: var(--encre-douce);
    line-height: 1.9;
    border-top: 1px solid rgba(122, 88, 173, .18);
  }
  footer .sceau {
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--encre);
    letter-spacing: 1px;
    margin-bottom: 6px;
  }
  /* Qualité et zones d'exercice. Rétablis le 28 août sous la forme
     « Naturopathe · Selles-sur-Nahon », remplacés le 29 par « Coach holistique
     · Sarthe 72 et Indre 36 ». Volontairement discrets : ils ancrent la page
     sans rien retirer au mystère du haut. Le texte est saisi en casse normale,
     ce sont les capitales du CSS qui font le rendu. */
  footer .qualite {
    font-size: 0.76rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--encre-douce);
    margin-bottom: 8px;
  }
  footer a { color: var(--violet); text-decoration: none; }
  footer a:hover { text-decoration: underline; }

  @media (max-width: 640px) {
    section { padding: 92px 0; }
    .portrait { width: 206px; height: 206px; margin-bottom: 32px; }
    .ligne { font-size: 1.16rem; }
    .portes { grid-template-columns: 1fr; gap: 16px; }
    .porte { padding: 30px 26px 26px; }
    .lettre-forme { flex-direction: column; }
    .lettre-forme button { width: 100%; }
    .nav-bas { grid-template-columns: 1fr; gap: 15px; }
    /* Les couches de lumière restent, mais les floutages sont divisés : sur un
       téléphone, un blur de 80 pixels sur une surface plein écran coûte cher
       pour un résultat qu'on ne distingue pas d'un blur de 40. */
    .nuees { filter: blur(34px); }
    .orbes { filter: blur(14px); }
    .faisceau { filter: blur(40px) !important; }
    .etincelles div { transform: scale(.7); }
  }
  @media (prefers-reduced-motion: reduce) {
    .soleil, .nom, .accroche, .sous, .bouton-hero, .descendre { animation: none; opacity: 1; }
    .soleil { transform: translate(-50%, -54%); }
    .rayons { animation: none; }
    /* Les couches de lumière restent en place, elles cessent seulement de
       bouger : c'est le mouvement qui gêne, pas la lumière elle-même. */
    .nuee, .faisceau, .orbe, .etincelles div { animation: none; }
  }
  .lettre-attente { font-size: .92rem; color: var(--violet-profond); margin: 14px 0 0; }
  .lettre-attente[hidden] { display: none; }