/* ------------------------------------------------------------------
   4U Consultant — Expert Power BI
   Reconstruction statique du site d'origine (WordPress/Elementor)
   Palette et typographies reprises du site archivé.
------------------------------------------------------------------ */

:root{
  --navy:#2C3E50;
  --or:#C9800E;
  --or-clair:#E9B51C;
  --or-pale:#F6D958;
  --creme:#FDEFDC;
  --encre:#161132;
  --texte:#111111;
  --gris:#7A7A7A;
  --gris-fond:#F6F6F6;
  --bordure:#E3E3E3;
  --largeur:1140px;
}

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

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  font-family:"Roboto",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.7;
  color:var(--texte);
  background:#fff;
}

img{max-width:100%;height:auto;display:block;}

a{color:var(--or);}
a:hover{color:var(--or-clair);}

.container{
  width:100%;
  max-width:var(--largeur);
  margin:0 auto;
  padding-inline:20px;
}

/* ---------------- En-tête ---------------- */

.site-header{background:var(--navy);}

.header-top{
  display:flex;
  align-items:center;
  gap:28px;
  padding-block:22px;
}

.header-logo img{width:150px;}

.header-titles{min-width:0;}

.site-title{
  margin:0;
  font-family:"Fjalla One","Roboto",sans-serif;
  font-size:clamp(28px,5vw,50px);
  font-weight:800;
  letter-spacing:4px;
  line-height:1.15;
  text-transform:uppercase;
  color:var(--or);
}
.site-title a{color:inherit;text-decoration:none;}

.site-tagline{
  margin:10px 0 0;
  padding-left:14px;
  border-left:2px solid var(--or-clair);
  font-family:"Fjalla One","Roboto",sans-serif;
  font-size:clamp(14px,2.2vw,20px);
  font-weight:400;
  line-height:1.4;
  color:var(--or-clair);
}

/* ---------------- Navigation ---------------- */

.nav-toggle{display:none;}

.nav-button{
  display:none;
  margin:0 0 18px auto;
  padding:9px 16px;
  border:1px solid var(--or);
  border-radius:3px;
  background:transparent;
  color:var(--or);
  font:600 15px/1 "Roboto",sans-serif;
  cursor:pointer;
}

.site-nav{padding-bottom:26px;}

.menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 38px;
}

.menu > li{position:relative;}

.menu a{
  display:block;
  padding:6px 0;
  font-size:20px;
  font-weight:600;
  color:var(--or);
  text-decoration:none;
  transition:color .15s;
}
.menu a:hover,
.menu .actif > a{color:var(--or-clair);}

.sous-menu{
  list-style:none;
  margin:0;
  padding:8px 0;
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  min-width:270px;
  background:var(--navy);
  border:1px solid rgba(201,128,14,.45);
  border-radius:3px;
  opacity:0;
  visibility:hidden;
  transition:opacity .15s;
  z-index:20;
}
.menu > li:hover > .sous-menu,
.menu > li:focus-within > .sous-menu{opacity:1;visibility:visible;}

.sous-menu a{padding:8px 20px;font-size:17px;white-space:nowrap;}

/* ---------------- Contenu ---------------- */

main{padding-block:56px 64px;}

section + section{margin-top:56px;}

h1.page-titre{
  margin:0 0 34px;
  font-size:clamp(26px,4vw,34px);
  font-weight:600;
  line-height:1.25;
  color:var(--or-clair);
}

h2{
  margin:0 0 20px;
  font-size:26px;
  font-weight:600;
  line-height:1.3;
  color:var(--or-clair);
}

h3{
  margin:0 0 14px;
  font-size:20px;
  font-weight:600;
  color:var(--navy);
}

p{margin:0 0 16px;}

.intro p{font-size:17px;}

ul.liste{margin:0 0 16px;padding-left:22px;}
ul.liste li{margin-bottom:6px;}

strong{font-weight:700;}

.duo{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:44px;
  align-items:start;
}

.trio{
  display:grid;
  grid-template-columns:320px minmax(0,1fr) 320px;
  gap:40px;
  align-items:start;
}

/* ---------------- Cartes ---------------- */

.carte{
  border:1px solid var(--or);
  background:var(--gris-fond);
  overflow:hidden;
}

.carte-tete{
  background:var(--or-clair);
  padding:18px 20px;
  text-align:center;
  color:#fff;
}
.carte-tete h3{margin:0;font-size:22px;font-weight:600;color:#fff;}
.carte-tete p{margin:4px 0 0;font-size:17px;color:#fff;}

.carte-corps{padding:22px 20px 26px;text-align:center;}

.carte-corps .ligne{
  margin:0;
  padding:12px 0;
  border-bottom:1px solid var(--bordure);
  font-size:15px;
  color:var(--gris);
}
.carte-corps .ligne:last-of-type{border-bottom:0;}

.prix{
  margin:6px 0 2px;
  font-family:"Fjalla One","Roboto",sans-serif;
  font-size:52px;
  line-height:1;
  color:var(--navy);
}
.prix span{font-size:26px;vertical-align:super;}

.bouton{
  display:inline-block;
  margin-top:18px;
  padding:13px 26px;
  background:var(--or-clair);
  color:var(--encre);
  font-weight:500;
  text-decoration:none;
  border:0;
  border-radius:3px;
  cursor:pointer;
  transition:background .15s;
}
.bouton:hover{background:var(--or);color:#fff;}

/* ---------------- Galerie ---------------- */

.galerie{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;
  margin-top:8px;
}
.galerie img{
  width:100%;
  border:1px solid var(--bordure);
}

.media{margin:26px 0;}
.media video{width:100%;background:#000;}

.figure-portrait{max-width:300px;}
.figure-portrait img{border-radius:4px;}

/* ---------------- Programme (formations) ---------------- */

.jour{
  margin-bottom:26px;
  padding:22px 24px;
  background:var(--creme);
  border-left:4px solid var(--or-clair);
}
.jour h3{margin:0 0 12px;color:var(--or);}
.jour ul{margin:0;padding-left:20px;}
.jour li{margin-bottom:7px;}

/* ---------------- Témoignages ---------------- */

.avis{
  max-width:760px;
  margin:0 auto;
  padding:32px 34px;
  background:var(--gris-fond);
  border:1px solid var(--bordure);
  text-align:center;
}
.etoiles{color:var(--or-clair);font-size:24px;letter-spacing:3px;}
.note{font-weight:600;color:var(--navy);}
.avis blockquote{margin:18px 0;font-size:17px;font-style:italic;}
.avis .signature{margin:0;font-weight:600;color:var(--navy);}
.avis .fonction{margin:2px 0 0;font-size:15px;color:var(--gris);}

/* ---------------- Formulaires ---------------- */

.formulaire{
  max-width:640px;
  margin-top:10px;
  padding:30px 32px;
  background:var(--gris-fond);
  border:1px solid var(--bordure);
}

.champ{margin-bottom:18px;}
.champ label{display:block;margin-bottom:6px;font-weight:500;font-size:15px;}

.champ input[type=text],
.champ input[type=email],
.champ input[type=tel],
.champ select,
.champ textarea{
  width:100%;
  padding:11px 13px;
  border:1px solid #CFCFCF;
  border-radius:3px;
  font:inherit;
  font-size:15px;
  background:#fff;
}
.champ textarea{min-height:130px;resize:vertical;}

.champ input:focus,
.champ select:focus,
.champ textarea:focus{
  outline:2px solid var(--or-clair);
  outline-offset:1px;
  border-color:var(--or-clair);
}

.radios{display:flex;flex-wrap:wrap;gap:18px;}
.radios label{display:flex;align-items:center;gap:7px;font-weight:400;}

.mention-contact{
  margin-top:18px;
  font-size:15px;
  color:var(--gris);
}

/* ---------------- Pied de page ---------------- */

.site-footer{
  background:var(--navy);
  color:#fff;
  padding-block:44px;
}

.footer-grille{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:40px;
  align-items:start;
}

.footer-logo img{width:200px;}

.footer-infos{list-style:none;margin:0;padding:0;}
.footer-infos li{margin-bottom:14px;font-size:16px;}
.footer-infos a{color:#fff;text-decoration:none;}
.footer-infos a:hover{color:var(--or-clair);text-decoration:underline;}

/* ---------------- Responsive ---------------- */

@media (max-width:900px){
  .duo,.trio{grid-template-columns:minmax(0,1fr);gap:32px;}
  .footer-grille{grid-template-columns:minmax(0,1fr);gap:26px;}
}

@media (max-width:780px){
  .header-top{flex-direction:column;align-items:flex-start;gap:16px;padding-block:20px;}
  .header-logo img{width:110px;}

  .nav-button{display:block;}

  .site-nav{padding-bottom:18px;}
  .menu{display:none;flex-direction:column;gap:0;}
  .nav-toggle:checked ~ .site-nav .menu{display:flex;}

  .menu > li{border-top:1px solid rgba(201,128,14,.3);}
  .menu a{padding:12px 0;font-size:18px;}

  .sous-menu{
    position:static;
    transform:none;
    opacity:1;
    visibility:visible;
    min-width:0;
    background:transparent;
    border:0;
    padding:0 0 6px 18px;
  }
  .sous-menu a{padding:8px 0;font-size:16px;white-space:normal;}

  main{padding-block:40px 48px;}
  .formulaire{padding:24px 20px;}
  .avis{padding:26px 22px;}
}