“Le plus simple reste l'option d'intégrer les bordure dans le background non avec seulement le titre de cliquable.
Je peux te faire un header à la bonne largeur si tu veux.”

Ok, on va partir là-dessus alors. J'ai déjà des pistes sérieuses en pur CSS.
Je pense que je vais essayer d'abord avec le header que tu as mis, si ma piste fonctionne bien on aura pas besoin de faire plus de deux versions.

“La galerie lié au forum n'a pas l'air d'accepter les .svg, on ne voit que les ficheirs images après upload.”

Il fait pas les prévisualisations mais les images y sont.

Quelques pistes pour l'intégration :

https://stackoverflow.com/questions/12609110/responsive-css-background-images

%
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
%

https://www.webfx.com/blog/web-design/responsive-background-image/

https://stackoverflow.com/questions/20009361/css-responsive-background-image-map

Il semblerait que le meilleur lien soit celui-ci :

https://css-tricks.com/perfect-full-page-background-image/

J'ai commencé à intégrer l'image comme suit et ça fonctionne très bien :

%html

<?php include __DIR__.'/header.php'; ?>

    <div class="content">
        <div class="menu">
            <ul>
            <li>Accueil</li>
            <li>Bio'</li>
            <li>Réalisations</li>
            <li>Contact</li>
            </ul>        
        </div>

        <img class="koko-center" src="http://localhost/pluxml/themes/defaut/img/Koko2.png">

    </div>
%

%CSS
html {
  background-color:black;  
  background-image:url('http://localhost/pluxml/themes/defaut/img/fond.jpg');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat:no-repeat;
}

.content{
    margin-top:30em;
}

.menu {
    border:3px solid white;
    color:white;
    background:black;
    font-size:3em;
    width:50%;
    margin:auto;
    text-align:center;
}

.menu li{
    display:inline-block;
    width:300px;
}

.koko-center {
    width:800px;
    height:auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
%

Bien sûr c'est un peu du bricolage,on peut faire mieux avec flexbox niveau propreté du code mais c'est une piste de début. J'uploade l'image de fond.

:: @Flo added on 01 Jul ’20 · 20:58

A noter le fichier header.php doit être vidé de ses références à la feuile de style plucss.css.
Je travaille sur le template home.php.

ok le design de lapage d'accueil est presque terminé je dirais. Les éléments sont intégrés correctement pour les écrans d'ordinateur :

:: @Flo added on 01 Jul ’20 · 21:45

%CSS
html {
  background-color:black;  
  background-image:url('http://localhost/pluxml/themes/defaut/img/fond.jpg');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat:no-repeat;
}

.content{
    margin-top:30em;
}

.menu {
    color:white;
    font-size:3em;
    width:53%;
    height:330px;
    margin:auto;
    text-align:center;
    background-image: url("http://localhost/pluxml/themes/defaut/img/borders.png");
    background-repeat:no-repeat;
    background-size: cover;
    overflow:hidden;
}

.menu li{
    display:inline-block;
    width: 300px;
    padding: 100px 0;
    vertical-align:middle;
}

.vl {
    height:200px;
    width:60px;
    background-image:url("http://localhost/pluxml/themes/defaut/img/vl.png");
    background-repeat:no-repeat;
    display:inline-block;
    background-size: cover;
    margin-top: -.235ex;
    vertical-align: middle;
}

.koko-center {
    width:800px;
    height:auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
%

%HTML
<?php include __DIR__.'/header.php'; ?>

    <div class="content">
        <div class="menu">
            <ul>
            <li>Accueil</li>
            <div class="vl"></div>
            <li>Bio'</li>
            <div class="vl"></div>
            <li>Réalisations</li>
            <div class="vl"></div>
            <li>Contact</li>
            </ul>        
        </div>

        <img class="koko-center" src="http://localhost/pluxml/themes/defaut/img/Koko2.png">

    </div>
%

Le résultat ducode ci-dessus sur mon écran avec firefox

https://vmjin.tetaneutral.net/galerie/#example1.png

Version remaniée avec CSS map sur le menu :

https://vmjin.tetaneutral.net/galerie/#example2.png

Le code pour le menu (à remanier en sortant le CSS inline) :

%
<div style="position:relative; left:30%; height:257px; width:1300px; background:url(http://localhost/pluxml/themes/defaut/img/menu.png) 0 0 no-repeat;"><a style="position:absolute; top:63px; left:39px; width:223px; height:138px;" title="sandymango.fr" alt="sandymango.fr" href="http://sandymango.fr" target="_self"></a><a style="position:absolute; top:74px; left:322px; width:274px; height:121px;" title="bio" alt="bio" href="http://sandymango.fr/bio" target="_self"></a><a style="position:absolute; top:63px; left:648px; width:282px; height:136px;" title="realisations" alt="realisations" href="http://sandymango.fr/realisations" target="_self"></a><a style="position:absolute; top:67px; left:987px; width:282px; height:140px;" title="contact" alt="contact" href="http://sandymango.fr/contact" target="_self"></a></div>
%

J'ai fini l'intégration au site web. La landing page est désormais une copie conforme du template amélioré par Guillaume. Il faudra rapidement faire une règle média pour les smartphone qui devront avoir leur propres image et menu.

L'intérieur du site est toujours dans les tons ocre. J'envisage de changer les couleurs en attendant qu'on élargisse le design au reste du site. J'aurais sûrement le temps pour ça dans les jours qui viennent. Tant qu'on n'a pas réfléchi au reste, il vaut mieux garder le thème blablaoo qui est bien responsive et garantit l'accessibilité des informations.

La partie Réalisations point actuellement vers la partie musique. J'ai ajouté le flux RSS des articles à la page Contact.