main.becoming_with {
    display: flex;
    flex-direction: row;
    height: 100vh; /* pleine hauteur */
}
main.becoming_with h2{
    margin-bottom: 2rem;
    font-weight:normal;
}

main.becoming_with nav {
    font-size:0.8rem;
    padding: 2rem 1rem 1rem 1rem;
    border-right: 2px dashed rgb(189, 189, 189);
    min-width: 11%;
}
main.becoming_with nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
main.becoming_with nav li {
    margin-bottom: 1rem;
}
main.becoming_with nav a {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 0.5rem;
    border-radius: 4px;
}
main.becoming_with nav a:hover {
    background: #e2e2e2;   
}
main.becoming_with nav a.active {
    background: #cecdcd;         /* texte grisé */
    pointer-events: none; /* optionnel : désactive le clic */
}
main.becoming_with section {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
}
main.becoming_with .portfolio {
    font-size: 1.1rem;
    margin-top:5px;
}
main.becoming_with .portfolio a {
    text-decoration:none; 
    color:rgb(70, 70, 70); 
}

main.becoming_with .ma-demarche-bio, 
main.becoming_with .contact, 
main.becoming_with .bw,
main.becoming_with .mrie,
main.becoming_with .formation 
{
    /* padding : 0.5rem 23rem 2rem 16rem; */
    padding-top: 0.5rem;
    padding-bottom: 2rem;
    padding-right: 5rem;
    max-width: 70ch; /* pour éviter une trop grande largeur sur grand écran */
    /* min-width: 50ch; /* pour éviter un texte trop étroit */
    margin-inline: auto; /* ça centre le texte */
    font-size : 1.2rem;
    margin-top:5px;
}

main.becoming_with .ma-demarche-bio, 
main.becoming_with .mrie,
main.becoming_with .formation
{
    text-align: justify;
}

main.becoming_with .contact, 
main.becoming_with .bw 
{
    text-align: left;
}

main.becoming_with .ma-demarche-bio p:first-of-type::first-letter
{
    font-size: 3.5em;     /* adapte la taille pour couvrir environ 2–3 lignes */
    font-weight: bold;
    float: left;
    line-height: 1;       /* garde la lettre compacte verticalement */
    margin-right: 0.2em;  /* petit espace entre la lettrine et le texte */
    margin-top: -2px;   /* ajuste pour l’alignement vertical */
    font-family: "garamond", serif;
} 


main.becoming_with .mrie {
    margin-top:1.2rem;
}

main.becoming_with .mrie .p-normal{
    display: none;
}

main.becoming_with .mrie p:first-of-type
{
  display: flex;
  align-items: center; /* ✅ centre verticalement la lettrine et le texte */
  margin: 0 auto;
}

main.becoming_with .mrie .lettrine {
  font-size: 3.5em;
  font-family: "Garamond", serif;
  font-weight: bold;
  line-height: 1;
  margin-right: 0.55rem;
}

main.becoming_with .formation ul {
    padding: 0;
}

main.becoming_with .formation .item {
  display: flex;
  margin-bottom: 50px;
}

main.becoming_with .formation .date {
  width: 175px;
  font-style: italic;
}

main.becoming_with .formation .details {
  flex: 1;
}

main.becoming_with .formation strong {
  font-weight: bold;
}

main.becoming_with .parcours ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

main.becoming_with .parcours li {
  margin-bottom: 0.6em;
  line-height: 1.4;
}

main.becoming_with .parcours .date {
  display: inline-block;
  width: 6em;
  font-weight: bold;
  color: #444;
}

main.becoming_with .parcours .details {
  display: inline-block;
  max-width: 80%;
  vertical-align: top;
}

main.becoming_with .parcours h3 {
  font-family: "Garamond", serif;
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 0.8em;
  margin-top: 1.4em;
}

@media all and (max-width: 768px) {
    main.becoming_with {
        display:block;
        overflow-y: auto; /* pour retouver le scroll */
    }
    main.becoming_with #content .mrie .p-lettrine{
        display: none;
    }
    main.becoming_with #content .mrie .p-normal{
        display: block;
    }   
    main.becoming_with #content .mrie .p-normal::first-letter
    {
        font-size: 3.5em;     /* adapte la taille pour couvrir environ 2–3 lignes */
        font-weight: bold;
        float: left;
        line-height: 1;       /* garde la lettre compacte verticalement */
        margin-right: 0.2em;  /* petit espace entre la lettrine et le texte */
        margin-top: -2px;   /* ajuste pour l’alignement vertical */
        font-family: "garamond", serif;
    } 

    main.becoming_with .ma-demarche-bio, 
    main.becoming_with .contact, 
    main.becoming_with .bw,
    main.becoming_with .mrie,
    main.becoming_with .formation 
    {
        padding : 1rem;
        font-size: var(--nav-font-size);
        margin-top:5px;
    }
    main.becoming_with nav li {
        margin: 0;
        padding:0;
    }
    main.becoming_with nav a {
        margin: 0;
        padding:0;
    }
    main.becoming_with nav h2 {
        margin: 0;
        padding:0;
    }
    main.becoming_with .bw-portfolio{
        display: none;
    }
    main.becoming_with .version-mobile p { /* géré pour tout le site : dans le main généal */
        margin : 0.9rem;
    }
    main.becoming_with .version-mobile { /* géré pour tout le site : dans le main généal */
        padding : 0.2rem 0rem;
        margin : 2rem;
    }
}