/* ------------------------------------------------------------------
   RHONE ALPES SCIAGE — reconstitution de l'ancien site (ex-Wix)
   Feuille de style unique. Aucune dépendance externe.
   ------------------------------------------------------------------ */

:root{
  --bleu:#0D1E8F;        /* titres + fond de pied de page */
  --vert:#029C36;        /* titre "Qui sommes nous ?" */
  --gris-texte:#303030;
  --gris-entete:#717070;
  --gris-page:#BFBFBF;   /* fond accueil / la découpe / réalisations */
  --gris-clair:#EFEFEF;  /* fond qui sommes nous / contact / vidéo */
  --menu-actif:#3588CC;
  --titre:"Museo","Museo Slab",Rockwell,"Roboto Slab",Georgia,serif;
  --texte:"Museo Slab",Rockwell,Georgia,serif;
  --menu:Jura,"Trebuchet MS",Tahoma,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--texte);
  color:var(--gris-texte);
  background:var(--gris-page);
  padding-top:256px;           /* hauteur de l'en-tête fixe + 31px */
}
body.fond-clair{background:var(--gris-clair)}

.conteneur{width:980px;margin:0 auto;position:relative}

/* ---------------- EN-TÊTE ---------------- */
.entete{
  position:fixed;top:0;left:0;right:0;z-index:50;
  min-width:980px;background:var(--gris-entete);
}
.entete-bandeau{
  height:215px;
  background:url("../img/fond-entete.jpg") center center no-repeat;
  background-size:cover;
}
.entete-bandeau .conteneur{height:215px}
.entete .logo{position:absolute;left:4px;top:-4px}
.entete .logo img{width:225px;height:223px;object-fit:contain;display:block}
.entete .accroche{
  position:absolute;left:602px;top:36px;width:378px;
  font-family:var(--titre);color:#fff;font-size:50px;line-height:1.1em;
  text-align:center;text-shadow:#ffffff 0 0 6px;
}
.entete .accroche span{display:block}

/* ---------------- MENU ---------------- */
.menu{height:41px}
.menu ul{
  list-style:none;margin:0;padding:0;display:flex;
  justify-content:center;align-items:center;height:41px;
}
.menu li{margin:0}
.menu a{
  display:block;padding:0 18px;line-height:41px;
  font-family:var(--menu);font-size:20px;color:#fff;text-decoration:none;
  transition:color .4s ease;
}
.menu a:hover,.menu li.actif a{color:var(--menu-actif)}

/* ---------------- CONTENU ---------------- */
main{padding:30px 0 60px}
.rangee{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:40px}
.rangee.inverse{flex-direction:row-reverse}

h1,h2,h3,h4{font-family:var(--titre);font-weight:normal;margin:0 0 12px}
h2.titre{font-size:42px;line-height:1.4em;color:var(--bleu)}
h2.titre.vert{color:var(--vert)}
h2.titre.centre{text-align:center}
h2.sous-titre{font-size:24px;color:var(--bleu)}
h4.legende{font-size:28px;color:var(--bleu);text-align:center;margin:0}
p{font-size:17px;line-height:1.4em;margin:0 0 14px}
p.grand{font-size:25px}
ul.liste{font-size:17px;line-height:1.5em;margin:0 0 14px;padding-left:22px}
.bloc-texte{width:485px}
.filet{width:105px;height:8px;background:var(--bleu);margin:0 0 18px}

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

/* ---------------- DIAPORAMAS ---------------- */
.diaporama{position:relative;background:#303030;overflow:hidden}
.diaporama .vues{position:relative;width:100%;height:100%}
.diaporama figure{
  position:absolute;inset:0;margin:0;opacity:0;transition:opacity .5s ease;
}
.diaporama figure.active{opacity:1}
.diaporama img{width:100%;height:100%;object-fit:cover;display:block}
.diaporama figcaption{
  position:absolute;left:0;right:0;bottom:0;
  background:rgba(48,48,48,.7);color:#fff;
  font-family:var(--texte);font-size:15px;padding:6px 10px;
}
.diaporama .fleche{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.4);color:#fff;border:0;cursor:pointer;
  font-size:26px;line-height:1;padding:8px 12px;
}
.diaporama .fleche:hover{background:rgba(0,0,0,.65)}
.diaporama .prec{left:0}
.diaporama .suiv{right:0}
.diaporama .compteur{
  position:absolute;top:8px;right:10px;color:#fff;font-size:13px;
  background:rgba(0,0,0,.4);padding:2px 7px;
}

/* ---------------- FORMULAIRE ---------------- */
form.contact{width:480px}
form.contact input,form.contact textarea{
  width:480px;font-family:var(--texte);font-size:17px;color:#303030;
  background:#fff;border:0;border-radius:5px;padding:6px 8px;
  box-shadow:0 1px 4px rgba(0,0,0,.6);margin-bottom:5px;display:block;
}
form.contact input{height:33px}
form.contact textarea{height:130px;resize:vertical;margin-bottom:8px}
form.contact button{
  width:76px;height:33px;border:0;border-radius:5px;cursor:pointer;
  font-family:var(--texte);font-size:17px;color:#fff;background:var(--bleu);
  box-shadow:0 1px 4px rgba(0,0,0,.6);
  transition:background-color .4s ease;
}
form.contact button:hover{background:#3588CC}
.message-envoi{font-size:14px;color:rgba(186,218,85,1);margin-top:12px}

/* ---------------- VIDÉO ---------------- */
.lecteur{width:527px;margin:0 auto}
.lecteur video{width:527px;height:361px;background:#000;display:block}

/* ---------------- MENTIONS LÉGALES ---------------- */
.mentions{padding-bottom:40px}
.mentions h2{font-size:20px;color:var(--bleu);margin:26px 0 8px}
.mentions p{font-size:15px;line-height:1.5em}
.mentions a{color:var(--bleu)}

/* ---------------- PIED DE PAGE ---------------- */
.pied{background:var(--bleu);color:#fff;min-width:980px;padding:21px 0 24px}
.pied .conteneur{display:flex;align-items:center;justify-content:space-between}
.pied .coordonnees p{font-size:11px;line-height:1.4em;margin:0;font-family:var(--titre)}
.pied .logo-pied img{width:357px;height:56px;object-fit:contain;display:block}
.pied .liens{text-align:right}
.pied .liens p{font-size:11px;line-height:1.4em;margin:0;font-family:var(--titre)}
.pied .liens a{color:#fff;text-decoration:underline}