/* CSS corrigé */
* {
    box-sizing: border-box;
}

:root {
    --color1: #D89584;
    --color2: #F4F4F4;
}

body {
    margin: 0;
    font-family: Arial;
    line-height: 1.5;
}

div.cover {
    background: url(cover_overlay.png) no-repeat center/100% 100%, url(cover.png) no-repeat center/cover; background-color: transparent;
    height: 360px;
    position: relative;
}

img.cover-profile {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    border: 4px solid white;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    display: block;
    margin: 20px auto 10px auto;
}

h1 {
    color: white;
    text-align: center;
    font-size: 42px;
    margin-top: 10px;
    margin-bottom: 0px;
}


div.cover p {
    color: lightgray;
    text-align: center;
    margin-top: 8px;
    font-size: 14px;
}


div.cover-contact {
    position: absolute;
    top: 20px;
    left: 10px;
    border-left: 4px solid var(--color1);
    padding-left: 8px;
    width: fit-content;
    background-color: rgba(0,0,0,0.2);
}

div.cover-contact p {
    text-align: left;
    margin-top: 0px;
    margin-bottom: 0px;
}

div.cover-contact p:first-child {
    margin-bottom: 14px;
}

div.cover-contact * {
    color: white;
    font-size: 14px;
}


a.contact-button {
    color: var(--color1);
    border: 3px solid var(--color1);
    padding: 8px 20px;
    text-decoration: none;
    background-color: #00000040;
    display: block;
    margin: 18px auto 0 auto;
    font-size: 14px;
    text-align: center;
    width: fit-content;
}


a.contact-button:hover {
    color: white;
    border: 3px solid white;
}

/* Reste du CSS conservé tel quel */
.section {
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 30px;
    padding-bottom: 30px;
    overflow: auto;
}

div.section-grise1 {
    background: url(triangle2white.svg) no-repeat center bottom/100%;
    background-color: var(--color2);
    padding-top: 40px;       /* ✅ AJOUTE CETTE LIGNE */
    padding-bottom: 60px;
}


div.section-grise2 {
    background: url(triangle1white.svg) no-repeat center top/100%;
    background-color: var(--color2);
    padding-top: 82px;
}

h2 {
    text-align: center;
    font-size: 34px;
    margin-top: 0px;
}

div.separateur {
    background-color: #979797;
    height: 1px;
    width: 150px;
    position: relative;
    left: 50%;
    margin-left: -75px;
}

div.section-grise1 p {
    font-size: 22px;
    color: #656565;
    text-align: center;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}

.col40 {
    width: 40%;
}

.col60 {
    width: 60%;
}

.float-right {
    float: right;
}

div.texte-avec-ligne-verticale {
    border-left: 4px solid var(--color1);
    padding-left: 8px;
    height: 50px;
    display: inline-block;
}

div.texte-avec-ligne-verticale p {
    margin-top: 0;
}

div.barre-verticale {
    height: 50px;
    width: 4px;
    background-color: var(--color1);
    margin-right: 8px;
}

.col-portfolio {
    width: 47%;
}

div.frame {
    margin: 30px 50px;
    padding: 20px 30px;
    background-color: white;
    box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.1);
}

p.frame-title {
    font-size: 30px;
    margin-top: 5px;
    margin-bottom: 20px;
    text-align: center;
}

div.cover-center {
    padding-top: 15px;
}


/* Remonte spécifiquement la section En savoir plus */
#en-savoir-plus {
    margin-top: -25px;   /* essaie -30px, -40px, -60px selon ton goût */
    padding-top: 20px;   /* garde un peu d’air avant le titre */
}
.thumb {
  width: 100%;
  height: 360px;       /* ajuste ici (ex: 140px, 180px…) */
  object-fit: cover;   /* évite la déformation, recadre proprement */
  display: block;
  border-radius: 6px;  /* optionnel */
}

/* Ne réduit que project2small.jpg */
img.thumb[src$="project2small.jpg"] {
  max-width: 85%;
  margin: 0 auto;    /* centre la vignette dans sa cellule */
  display: block;    /* déjà présent, on sécurise */
}

/* ===== Certifications (4 par ligne) ===== */
#certifications .cert-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* 4 colonnes */
  gap: 16px !important;
  align-items: stretch;
}

@media (max-width: 820px){
  #certifications .cert-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2 sur mobile */
  }
}

#certifications .cert-item{
  background:#fff;
  border-radius:10px;
  border-left:4px solid var(--color1);
  box-shadow:0 3px 10px rgba(0, 0, 0, 0.295);
  padding:12px 14px;
  text-align:center;
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

#certifications .cert-name{
  margin:0 0 10px 0;
  font-weight:700;
  font-size:16px;
  line-height:1.3;
}

#certifications .cert-logo{
  height:54px;           /* ajuste à 48/64 si besoin */
  width:auto;
  max-width:100%;
  object-fit:contain;
  display:inline-block;
  background:#f7f7f7;    /* doux si logo transparent */
  border-radius:8px;
  padding:6px;
}

#certifications .cert-name a{
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid rgba(0,0,0,0.08);
  padding-bottom: 2px;
}
#certifications .cert-name a:hover{
  color: var(--color1);
  border-color: var(--color1);
}

/* ===== Compétences & Outils (cartes) ===== */
#competences .section-lead{
  text-align:center;
  max-width:800px;
  margin: 6px auto 18px;
  color:#555;
}

#competences .skills-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap:18px;
  max-width:1100px;
  margin: 0 auto;
}

@media (max-width: 980px){
  #competences .skills-cards{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 640px){
  #competences .skills-cards{ grid-template-columns: 1fr; }
}

#competences .skill-card{
  background:#fff;
  border-radius:12px;
  border-top:4px solid var(--color1);
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  padding:16px 18px;
}

#competences .skill-card-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
#competences .skill-ic{ font-size:20px; line-height:1; }
#competences .skill-card h3{ margin:0; font-size:18px; }

#competences .skill-list{
  list-style:none;
  margin:10px 0 0 0;
  padding:0;
  display:grid;
  row-gap:8px;
}
#competences .skill-list li{
  position:relative;
  padding-left:14px;
}
#competences .skill-list li::before{
  content:"";
  width:6px; height:6px;
  background:var(--color1);
  border-radius:50%;
  position:absolute;
  left:0; top:0.6em;
}

/* === Fix couleurs + lisibilité : "Parlons de votre projet" === */
.section .frame .frame-title{
  color:#000 !important;          /* titre bien noir */
  font-weight:700;
}

.section .frame .texte-avec-ligne-verticale{
  height:auto !important;         /* supprime toute hauteur fixe */
  min-height:50px;                /* garde une base confortable */
  opacity:1 !important;           /* au cas où un parent aurait baissé l’opacité */
}

.section .frame .texte-avec-ligne-verticale p{
  color:#333 !important;          /* texte lisible (foncé) */
  margin:0 0 8px 0;
}

.section .frame .texte-avec-ligne-verticale a{
  color:#0a58ca;                  /* garde un bleu propre pour les liens */
  text-decoration: underline;     /* look lien standard (optionnel) */
}

/* ===== Fix section En savoir plus ===== */
#en-savoir-plus .col40 { float: left;  width: 40%; }
#en-savoir-plus .col60 { float: right; width: 60%; }
#en-savoir-plus::after { content:""; display:block; clear: both; } /* clearfix */

/* ne force pas une hauteur trop petite, laisse s'adapter au texte */
#en-savoir-plus .texte-avec-ligne-verticale { height: auto; min-height: 50px; }

/* repasse le texte en couleur lisible dans cette section */
#en-savoir-plus .texte-avec-ligne-verticale p {
  color: #333 !important;   /* #000 si tu veux encore plus contrasté */
  text-align: left;         /* ou center si tu préfères */
}

.photo-block{ display:block; }
.photo-img{ width:100%; display:block; border-radius:8px; }

/* Style du titre au-dessus de l'image */
.titre-photo{
  margin:0 0 8px 0;
  font-weight:600;
  font-size:16px;
  line-height:1.25;
  color:#0b2239;
  display:flex; align-items:center; gap:8px;
}
.titre-photo::before{
  content:""; width:4px; height:18px;
  background:#4f8ee6; border-radius:2px;
}


#en-savoir-plus .texte-avec-ligne-verticale p:first-child{
  font-size:17px;
  line-height:1.8;
}