.gdtitrerubrique {
margin-top: 65px;
}

.gdtitrerubriquegd {
	margin-top: 190px;
	font-family: SimplonNormRegular, Helvetica, Arial, sans-serif;
	font-size: 12pt;
	text-transform: uppercase;
	color: #0000DC;
}

ul {
    margin-bottom: 10px;
    padding: 0;
    float: left;
    list-style: none;
    width: 750px;
}
ul li {
   float: left;
   margin: 0;
   padding: 0;
   overflow: hidden;
   margin-right: 10px;
}
ul li a {
   display: block;
}

ul li a:hover {
   opacity:0.5;
   text-decoration:none;
}

ul li a.active {
   text-decoration:underline;
}

    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Georgia, serif;
      font-size: 14px;
      line-height: 1.6;
      color: #111;
      background: #fff;
    }

    .page {
      width: 100%;
      max-width: 1000px;
      margin: 0 auto;
      padding: 2% 2%;
    }

    /* Table qui sert de ligne de mise en page */
    table.row-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 5%;
    }

    table.row-table:last-child {
      margin-bottom: 0;
    }

    table.row-table td {
      vertical-align: top;
      padding: 0;
    }

    td.spacer {
      width: 5%;
      font-size: 0;
      line-height: 0;
    }

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* ─── LIGNE 1 ──────────────────────────────────────────────
       Gauche : 570px / 1000px = 57%
       Colonne droite : 380px / 1000px = 38%  (espace = 5%)
       La colonne droite contient deux images égales empilées avec un espace interne de 5%
    ──────────────────────────────────────────────────────── */
    td.cell-large {
      width: 57%;
    }

    .img-large {
      /* hauteur proportionnelle : 810/570 ≈ 142% de sa propre largeur */
      aspect-ratio: 570 / 810;
    }

    td.cell-right {
      width: 38%;
    }

    .col-right .img-small {
      width: 100%;
      aspect-ratio: 380 / 380;
    }

    .col-right .img-small:first-child {
      margin-bottom: 13%;
    }

    /* ─── LIGNE 2 ──────────────────────────────────────────────
       Gauche : 380px / 1000px = 38%
       Droite : 570px / 1000px = 57%  (espace = 5%)
       Les deux ont la même hauteur : 712px, proportionnelle à chaque largeur
    ──────────────────────────────────────────────────────── */
    td.cell-left2 {
      width: 38%;
    }

    .img-left {
      aspect-ratio: 380 / 712;
    }

    td.cell-right2 {
      width: 57%;
    }

    .img-right {
      aspect-ratio: 570 / 712;
    }

    /* ─── LIGNE 3 ──────────────────────────────────────────────
       Colonne gauche (38%) : deux images empilées
       Colonne droite (57%) : texte sur toute la hauteur
    ──────────────────────────────────────────────────────── */
    td.cell-left3 {
      width: 38%;
    }

    .col-left .img-stacked {
      width: 100%;
      aspect-ratio: 1 / 1;
    }

    .col-left .img-stacked:first-child {
      margin-bottom: 13%;
    }

    td.cell-text {
      width: 57%;
    }

    .text-block h2 {
      font-size: 1em;
      font-weight: bold;
      margin-bottom: 0.75em;
    }

    .text-block p {
      margin-bottom: 0.75em;
    }

    /* ─── MOBILE (≤650px) ─────────────────────────────────────
       Chaque table de ligne passe en affichage bloc : les cellules
       se replient et s'empilent les unes après les autres dans
       l'ordre du document, le bloc de texte en dernier.
    ──────────────────────────────────────────────────────── */
    @media (max-width: 650px) {
      table.row-table,
      table.row-table tbody,
      table.row-table tr,
      table.row-table td {
        display: block;
        width: 100% !important;
      }

      td.spacer {
        display: none;
      }

      td.cell-large,
      td.cell-left2,
      td.cell-left3 {
        margin-bottom: 8%;
      }

      table.row-table {
        margin-bottom: 8%;
      }

      .col-right .img-small:first-child,
      .col-left .img-stacked:first-child {
        margin-bottom: 8%;
      }
    }