/* général */
@font-face {
  font-family: 'DM Sans';
  src:  url('./assets/fonts/DMSans/dm-sans-latin-300-normal.woff2') format('woff2');
  font-weight: 300 400 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Alegreya';
  src:  url('./assets/fonts/Alegreya/Alegreya-Regular.woff2') format('woff2');
  font-weight: 300 400 500 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --texture-chine: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
  --coton: #F9F7ED;
  --accent: #7A0A9F;
  --nuit: #1A242F;
  --lumière: #FCF489;
  --transition-douce: all 0.5s ease;
}

body::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: 
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.60 0.49' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.12  0 0 0 0 0.09  0 0 0 0 0.06  0 0 0 30 -24.5'/></filter><rect width='300' height='300' filter='url(%23f)' opacity='1.00'/></svg>");
  background-size: 300px 300px;
  background-repeat: repeat;
  opacity: 0.8;
}

body {
  position: relative;
  background-color: var(--coton);
  background-image: var(--texture-chine);
  background-attachment: scroll; 
  margin: 0;
  padding: 0;
  font-family: 'DM Sans', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  border: 2px solid var(--nuit);
}

main, header, footer {
  position: relative;
  z-index: 1;
}

h1, h2, h4 {
  font-family: 'Alegreya', serif;
  line-height: 1.2;
}
h3 {
  font-family: 'DM Sans', sans-serif;
  line-height: 1.2;
}

/* ----------- DESKTOP ------------ */
/* @media screen and (min-width: 768px) { */
  h1 {
    font-size: 7rem;
    line-height: 1.25;
    margin: 0px;
    font-style: italic;
    font-weight: 600;
  }
  h2 {
    font-size: 3rem;
  }
  h3, h4 {
    line-height: 1.35;
  }
  h3 {
    font-size: 2rem;
  }
  h4 {
    font-size: 1.5rem;
  }
  h5 {
    font-size: 1.25rem;
  }
  button, .button-primary {
    width: fit-content;
    margin: 1rem;
    padding: 1rem 1.5rem;
    border: 2px solid var(--nuit);
    background-color: var(--nuit);
    font-weight: 500;
    text-decoration: none;
    color: #F9F7ED;
    cursor: pointer;
  }
  button:hover, .button-primary:hover {
    background-color: var(--accent);
    border: 2px solid var(--accent);
  }
  .buttons {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: row;
  }
  .intro-button {
    margin: 2rem 0 0 0;
  }
  html {
    line-height: 1.5;
    font-size: 1rem;
  }
  .title-page {
    text-align: center;
    margin: 0.25em 0 0.75em;
  }
  .end-page {
    text-align: center;
    margin: 0.25em 0 3em;
  }
  .image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%) contrast(1.2); /* N&B contrasté */
    transition: filter 0.5s ease;
    opacity: .85;
  }
  .image:hover {
    filter: grayscale(0%);
    opacity: 1;
  }
  .case {
    border-right: 2px solid var(--nuit);
    border-bottom: 2px solid var(--nuit);
    box-sizing: border-box;
    position: relative;
  }
  .container-section {
    display: grid;
    gap: 0;
    width: 100%; /* Important : la grille prend toute la largeur disponible */
    max-width: 2000px; /* Optionnel : pour ne pas que ce soit trop large sur grands écrans */
    margin: 0; /* Centre la grille si elle a un max-width */
    border-bottom: 2px solid var(--nuit);
    border-right: 0px;
  }
  .case-12c8l {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(8, 6rem);
  }
  .case-12c9l {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(9, 6rem);
  }
  .case-12c10l {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(10, 6rem);
  }
  .container-6C8l-G { /*Image de gauche*/
    grid-column: 1 / 7;
    grid-row: 1 / 9;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-bottom: 0px;
  }
  .container-6C8l-G-Bio { /*colonne image bio*/
    grid-column: 1 / 7;
    grid-row: 1 / 9;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-bottom: 0px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(8, 6rem);
  }
  .container-6c8l-D { /*container principal*/
    grid-column: 7 / 12;
    grid-row: 1 / 9;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(8, 6rem);
    margin: 0;  
  }
  .case-deco-6c1l { /*case vide*/
    grid-column: 1 / 7;
    grid-row: 1 / 2; 
    border-right: 0px;
  }
  .case-6c7l {
    grid-column: 1 / 7;
    grid-row: 2 / 9; 
    border-right: 0px;
  }
  .case-deco-6c10l { /*case vide*/
    grid-column: 1 / 7;
    grid-row: 2 / 11; 
  }
  .container-6c7l { /*container texte */
    grid-column: 1 / 7;
    grid-row: 2 / 9;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(7, 6rem);
    margin: 0;  
  }
  .container-5c2l-H {
    grid-column: 1 / 7;
    grid-row: 1 / 4;
    padding: 2rem;
    display: flex;
    align-items: center; 
    justify-content: flex-start;
  }
  .header-title {
    display: flex;
    flex-direction: column; 
    align-items: flex-start; 
    justify-content: start;
    width: 100%; 
    padding: 1rem 0;
  }
  .logo-big {
    display: block;
    width: 85%; /* Le logo prend toute la largeur disponible du conteneur */
    max-width: 590px;
    height: auto; /* Conserve les proportions du SVG */
  }
  .signature {
    font-family: 'DM Sans', sans-serif;
    color: var(--nuit);
    font-size: 1.2rem;
    margin-top: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    width: 100%; 
    max-width: 590px;
  }
  .container-5c2l-B {
    grid-column: 1 / 7;
    grid-row: 4 / 8;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-content: center;
    border-bottom: 0px;
  }
  .case-deco-1c10l-L {
    grid-column: 1 / 2;
    grid-row: 1 / 10; 
    border-right: 2px solid var(--nuit);
  }
  .case-deco-1c17l-L {
    grid-column: 1 / 2;
    grid-row: 1 / 18; 
    border-right: 2px solid var(--nuit);
    background-color: var(--lumière);
  }
  .container-10c17l {
    grid-column: 2 / 12;
    grid-row: 1 / 18;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-bottom: 0px;
    display: grid;
    grid-template-columns: repeat(10, 1fr);  /* ← était 9 : les enfants vont jusqu'à col 11 */
    grid-template-rows: repeat(17, 6rem);    /* ← était 7 : les rangées implicites n'ont pas de hauteur fixe */
  }
  .container-10c3l {
    grid-column: 1 / 11;
    grid-row: 1 / 4;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(4, 6rem);
    border-right: 0px;
  }
    .container-10c14l {
    grid-column: 1 / 11;
    grid-row: 4 / 18;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(14, 6rem);
  }
  .case-deco-1c17l-R {
    grid-column: 12 / 13;
    grid-row: 1 / 18; 
  }
  .container-9C10l-G {
    grid-column: 2 / 11;
    grid-row: 1 / 10;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-bottom: 0px;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(12, 6rem);
  }
  .case-deco-2c10l {
    grid-column: 11 / 13;
    grid-row: 1 / 11; 
    background-color: var(--lumière);
  }
  .piece-1x3-left {
    grid-column: 2 / 8;
    grid-row: 1 / 4;
  }
  .piece-1x3-left-bas {
    grid-column: 2 / 8;
    grid-row: 7 / 13;
  }
  .piece-1x3-left-bas h5 {
    margin: 1rem 0 0.5rem 0;
  }
  .piece-1x3-right {
    grid-column: 4 / 9 ;
    grid-row: 4 / 9;
  }
  .case-8c4l {
    grid-row: 4 / 10;
    grid-column: 1 / 13;
    display: flex;
    flex-wrap: wrap; 
    /* gap: 2rem;  */
    align-items: stretch;
    justify-content: center;
  }
  .case-12c17l {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(17, 6rem);
  }
  .case-8c3l-left {
    grid-column: 2 / 9;
    grid-row: 1 / 4;
  }
  .case-deco-2c3l-L {
    grid-column: 10 / 11;
    grid-row: 1 / 4;
    border-left: 2px solid var(--nuit);
  }
  .case-deco-6c1l{
    grid-column: 1 / 7;
    grid-row: 1 / 2;
  }
  .border-right {
    border-right: 2px solid var(--nuit);
  }
  .case-6c10l-D {
    grid-column: 7 / 13;
    grid-row: 1 / 9;
    padding: 0 4rem;
  }
  .article-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 18rem; /* Grandit, rétrécit, base 15rem */
    max-width: 24rem; /* Largeur max d'une carte */
    border: 2px solid var(--nuit);
    border-right: 0px;
  }
  .article-card:last-child {
    border-right: 2px solid var(--nuit);
  }
  .article-card header {
    padding: 1rem 1rem 0.5rem 1rem;
    flex-shrink: 0; /* Le header ne s'écrase jamais */
  }
  .article-card_image {
    width: 100%;
    height: 100%;
  }
  .atelier-nom, .intervention-nom {
    font-weight: bold;
    margin: 0;
  }
  .atelier-description, .intervention-description {
    font-style: italic;
    font-size: 0.9rem;
  }
  .article-card_image-container {
    width: 100%;
    height: 250px;
    overflow: hidden;
  }
  .intervention-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .intervention-card_image-container {
    grid-column: 1 / 9;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(7, 6rem);
    gap: 1rem;
  }
  .case-1c2l {
    grid-column: 3 / 4;
    grid-row: 2 / 4;    
  }
  .case-3c3l-HL {
    grid-column: 1 / 6;
    grid-row: 1 / 8;
  }
  .case-3c3l-HR {
    grid-column: 6 / 11;
    grid-row: 1 / 8;
  }
  .case-3c3l-BL {
    grid-column: 1 / 6;
    grid-row: 8 / 15;
    border-bottom: 0px;
  }
  .case-3c3l-BR {
    grid-column: 6 / 11;
    grid-row: 8 / 15;
    border-bottom: 0px;
  }
  .container-1c2l {
    grid-column: 1 / 4;
    grid-row: 1 / 3;
    padding: 2rem 0 2rem 2rem;
  }
  .container-3c2l {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column: 1 / 4;
    grid-row: 3 / 10;
    overflow: hidden;
  }
  .container-4c2l {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column: 1 / 5;
    grid-row: 3 / 10;
    overflow: hidden;
  }
  .container-2c3l {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(7, 6rem);
    grid-column: 1 / 3;
    grid-row: 1 / 4;
  }
  .container-1c3l {
    grid-column: 3 / 4;
    grid-row: 1 / 5;
    padding: 2rem 0 2rem 2rem;
  }
  .intervention-image_1{
    grid-column: 1 / 2;
    grid-row: initial;   
  }
  .intervention-image_2{
    grid-column: 2 / 3;
    grid-row: initial;   
  }
  .intervention-image_3 {
    grid-column: 3 / 4;
     grid-row: initial;   
  }
  .intervention-image_4 {
    grid-column: 1 / 3;
    grid-row: 1 / 5;   
  }
  .intervention-image_5{
    grid-column: 1 / 3;
    grid-row: initial;   
  }
  .intervention-image_6{
    grid-column: 3 / 5;
    grid-row: initial;   
  }
  .article-card_image {
    object-position: center;
  }
  .article-card p {
    padding: 1rem;
    margin-left: 1rem;
    line-height: 1.6;
  }
  .container-4C8l-G-footer {
    grid-column: 1 / 9;
    grid-row: 1 / 8;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(8, 6rem);
  }
  .piece-4c2l-footer{
    grid-column: 1 / 5;
    grid-row: 1 / 3;
  }
  .piece-3c6l-footer {
    grid-column: 2 / 5;
    grid-row: 3 / 8;
  }
  .contact-form {
    height: 100%;
  }
  .contact-form input, .contact-form textarea{
    width: 60%;
    margin-bottom: 1.5rem;
    background-color: var(--coton);
    border-color: var(--nuit);
  }
    .contact-form input:focus, .contact-form textarea:focus {
    border-color: var(--accent);
  }
  .contact-form label h5{
    margin: 0.5rem 0;
  }
  .contact-form button[type="submit"] {
    display: block;             /* Force le bouton sur une nouvelle ligne */
    width: auto;                 /* S'aligne parfaitement avec vos champs input/textarea */
    margin: 1.5rem 0;         /* Crée l'espace de respiration sous le message */
    padding: 1rem 1.5rem;
    cursor: pointer;
    transition: var(--transition-douce);
  }
  .container-4C8l-D-footer {
    grid-column: 9 / 13;
    grid-row: 1 / 8;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(8, 6rem);
  }
  .case-deco-3c1l {
    grid-column: 1 / 5;
    grid-row: 1 / 2;
    border-bottom: 2px solid var(--nuit);
  }
  .case-deco-3c1l-B {
    grid-column: 1 / 5;
    grid-row: 7 / 8;
    background-color: var(--lumière);
    border-bottom: 2px solid var(--nuit);
  }
  .case-3c3l-H {
    grid-column: 1 / 5;
    grid-row: 2 / 4;
    border-bottom: 2px solid var(--nuit);
    padding: 0 2rem;
  }
  .case-3c2l-B {
    grid-column: 1 / 5;
    grid-row: 4 / 7;
    border-bottom: 2px solid var(--nuit);
    padding: 0 2rem;
  }
  .footer-list {
    list-style: none;
  }
  .footer-list-liens {
    list-style: none;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto; 
    gap: 2rem;
  }
  .footer-list-liens li {
    display: grid;
    padding: 0;
    line-height: 1; 
  }
  .ligne-surboom, .ligne-linkedin {
    display: contents !important;
  }
  .footer-list-liens li img {
    display: block; /* Supprime l'espace fantôme des images inline */
    margin: 0;
    padding: 0;
    border: none;
    /* On garde vos tailles mais on s'assure qu'elles s'appliquent */
  }
  .ligne-surboom .icon-hori {
    grid-column: 1 / 3; 
    grid-row: 1 / 2;
    width: 5rem; /* On l'adapte à sa colonne */
    height: auto;
    justify-self: start; /* Aligné à gauche de sa cellule */
    align-self: center; /* Centré verticalement dans sa cellule */
  }
  .ligne-linkedin .icon-verti {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    width: 2rem; /* Plus petit car logo carré */
    height: auto;
    justify-self: start;
    align-self: center;
  }
  .ligne-surboom a {
    grid-column: 3 / 13; 
    grid-row: 1 / 2;
    align-self: center; /* Centré verticalement par rapport à l'image */
    text-decoration: none;
  }
  .ligne-linkedin a {
    grid-column: 3 / 13;
    grid-row: 2 / 3;
    align-self: center; /* Parfaitement aligné avec le texte du dessus */
    text-decoration: none;
  }
  .case-footer-8c1l {
    grid-column: 1 / 13;
    grid-row: 8 / 9; 
    padding: 2rem;
  }
  footer a {
    display: inline-block;
    color: var(--nuit);
    text-decoration: none;
    transition: color 0.2s ease;
  }
  footer a:hover {
    font-weight: 600;
  }
  .footer-lien {
    color: var(--nuit);
    text-decoration: underline;
    transition: color 0.2s ease;
    font-weight: 300;
  }
  .footer-lien:hover {
    color: var(--accent);
  }
  .intro-box {
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .intro-img, .intro-video {
    height: 100%;
    width: 50%;
  }
  /* Index - Intro - Text */
  .intro-text {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.5;
    margin: 0px;
  }
/* } */
@media screen and (max-width: 767px) {  
  body, html {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  h1 {
    font-size: 5rem;
  }
  h2 {
    font-size: 2.5rem;
    margin: 1rem 0;
  }
  h3, h4 {
    line-height: 1.35;
  }
  h3 {
    font-size: 1.75rem;
    margin: 1rem 0;

  }
  h4 {
    font-size: 1.35rem;
  }
  h5 {
    font-size: 1.15rem;
  }
  .button-primary {
    padding: .5rem .75rem;
  }
  .container-section, 
  .case-12c8l, 
  .case-12c9l, 
  .case-12c10l, 
  .case-12c17l {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  .container-6C8l-G, 
  .container-6c8l-D, 
  .container-9C10l-G, 
  .container-10c17l {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .case {
    border-right: 2px solid var(--nuit);
    border-bottom: 2px solid var(--nuit);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }
  /* ************** INTRO - OK **************** */
  .case-12c8l {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(13, 4rem); 
  }
  .container-6C8l-G { /*Image header*/
    height: 20rem;
    border-right: 0px;
    border-bottom: 0px;
  }
  .container-6c8l-D { /*container principal*/
    grid-column: 1 / 7;
    grid-row: 5 / 14;
    grid-template-rows: repeat(8, 4rem);
  }
  .case-deco-6c1l { /*case vide*/
    visibility: hidden;
  }
  .container-6c7l { /*container texte */
    grid-column: 1 / 7;
    grid-row: 1 / 10;
    margin: 0;  
    grid-template-rows: repeat(6, 4rem);
  }
  .container-5c2l-H {
    grid-row: 1 / 3;
    padding: 0rem;
    border-top: 2px solid var(--nuit);
    border-right: 0px;
  }
  .header-title {
    margin: 1rem;
    padding: 0rem;
    align-items: start;
  }
  .logo-big {
    width: 100%;
    max-width: 360px;
  }
  .signature {
    font-size: .7rem;
    margin-top: 1rem;
    max-width: 360px;
    text-align: center;
  }
  .container-5c2l-B {
    grid-column: 2 / 7;
    grid-row: 3 / 8;
    padding: 1rem;
    border-right: 0px;
    border-bottom: 0px;
    border-left: 2px solid var(--nuit);
  }
  .intro-text {
    font-size: 1.6rem;
    margin: 0rem;
  }
  .intro-button {
    margin: 1rem 0 0 0;
  }
  /* ************** CONCEPT - OK **************** */
  .case-12c9l {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(15, 6rem);
  }
  .case-deco-1c10l-L {
    grid-row: 1 / 16;
    visibility: hidden;
  }
  .container-9C10l-G {
    grid-column: 1 / 12;
    grid-row: 1 / 16;
    padding: 0 1rem;
    border-bottom: 0px;
  }
  .case-deco-2c10l {
    grid-column: 12 / 13;
    grid-row: 1 / 16;
    background-color: var(--lumière);
  }
  .piece-1x3-left {
    grid-column: 1 / 12;
  }
  .piece-1x3-right {
    grid-column: 2 / 13;
    grid-row: 4 / 12;
  }
  .piece-1x3-left-bas {
    grid-column: 1 / 13;
    grid-row: 12 / 16;
  }
  /* ************** OFFRES - OK **************** */
  .case-12c10l {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(16, 6rem);
    padding: 0 1rem;
    border-right: 0px;
  }
  .case-8c4l {
    grid-column: 1 / 13;
    grid-row: 4 / 16;
    display: flex;
    flex-wrap: wrap; 
    gap: 2rem;
    align-items: stretch;
    justify-content: center;
  }
  .article-card {
    border-right: 2px solid var(--nuit);
  }
  .article-card:last-child, .article-card:first-child {
    visibility: hidden;
  }
  .article-card p {
    margin: 0px;
  }
  .atelier-description {
    margin: 0px 0px 0px 0px;
  }
  /* ************** PREUVES - OK **************** */
  .case-12c17l {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(17, 5.83rem);
  }
  .container-10c17l {
    grid-column: 2 / 13;
    grid-row: 1 / 18;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(16, 5.5rem);
  }
  .container-10c3l {
    grid-column: 1 / 12;
    grid-row: 1 / 6;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(4, 6rem);
    border-left: 0px;
  }
  .case-8c3l-left {
    grid-column: 1 / 12;
    grid-row: 1 / 6;
    padding: 0 1rem;
    border-right: 0px;
  }
  .case-deco-2c3l-L {
    visibility: hidden;
  }
  .container-10c14l {
    grid-column: 1 / 11;
    grid-row: 6 / 18;
    display: flex;
    flex-direction: column;
  }
   .intervention-card {
    display: flex;
    flex-direction: column;
    padding-bottom: 1rem;
    border-right: 0px;
  }
  .case-3c3l-BL {
    border-bottom: initial;
  }
  .case-3c3l-HR {
    flex-direction: column-reverse !important;
  } 
  .container-1c2l, .container-1c3l {
    padding: 0.5rem 0 0.5rem 0.5rem;
  }
  .intervention-description {
    margin: 0.25rem 0;
  }
  .container-1c3l {
    padding: 0.5rem 0 0.5rem 0.5rem;
  }
  .container-3c2l, .intervention-image_4 {
    height: 16.85rem;
  }
/* ************** A PROPOS - OK **************** */
  .case-12c9l-Bio {
    display: flex;
    flex-direction: column-reverse;
    border: 0px;
  }
  .case-6c10l-D {
    padding: 0 1rem;
  }
  .container-6C8l-G-Bio { /*colonne image bio*/
    display: flex;
    flex-direction: column-reverse;
    height: 24rem;
    border: 0px;
  }
  .container-6C8l-G-Bio .case-deco-6c1l {
    visibility: initial;
    height: 4rem;
  }
  .case-6c7l {
    grid-column: 1 / 7;
    grid-row: 1 / 4;
    border-right: 0px;
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center;     /* Centre verticalement */
    height: 20rem; 
  }

/* ************** FOOTER - en cours **************** */
  .case-12c8l {
    display: flex;
    flex-direction: column;
    padding: 0px;
    border-right: 0px;
  }
  .container-4C8l-G-footer, .container-4C8l-D-footer { 
    display: flex;
    flex-direction: column;
    border-right: 0px;
  }
  .contact-form {
    padding-right: 1rem ;
  }
  .contact-form input, .contact-form textarea {
    width: 100%;
  }
  .container-4C8l-G-footer, .case-3c3l-H, .case-footer-8c1l{
    padding: 0 1rem;
  }
  .case-3c2l-B {
    padding: 0 1rem 1rem;
    border-bottom: 0px;
  }
  .footer-list-liens {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1.5rem;
    padding: 0 1rem;
    padding: 0px;
  }
  .case-deco-3c1l {
    visibility: hidden;
  }
}