/* ==========================
   LAYOUT GLOBAL
========================== */

.contentC {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;                

    width: 100%;
    max-width: 100%;

    padding: 0 20px;              
    margin: 0 auto;
}




/* Bloc gauche — Configureur */
.ConfigBlock,
.ProductPreview{
    width: 80%;
    margin: 30px 30px;       
    padding: 30px;

    background: rgba(255, 255, 255, 0.45);
    border-radius: 16px;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255,255,255,0.35);
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.ProductPreview{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.PlanPreview{
  flex:1;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.PlanPreview embed{
  flex:1;
  width:100%;
  border:none;
  border-radius:12px;
  min-height: 600px;
}

/* ===== PLAN / STEP LINKS ===== */

.PlanPreview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.PlanPreview a {
    width: 100%;
    text-decoration: none;
}

.planCard {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 10px;
    padding: 3px 10px;
    margin-bottom: 5px;
    font-weight: 500;
    color: #03406b;
    cursor: pointer;
    transition: 0.2s;
    line-height: 1;
}
.planCard .dlIcon{
  width:22px;
  height:22px;    
  display:block;     
  flex:0 0 auto;
}

.planCard img{
  width:22px;
  height:22px;
  display:block;
  margin: 1px;
  flex:0 0 auto;
}

.planCard span {
    font-size: 0.95rem;
}

.planCard:hover {
    background: rgba(255,255,255,0.85);
}

.ProductPreview img {
    max-width: 80%;
    height: auto;
}

.ProductName {
    font-size: 1.4rem;
    font-weight: 600;
    color: #03406b;
    margin-bottom: 20px;
}

/* ==========================
   TITRES
========================== */

.MainTitle {
    font-size: 1.8rem;
    font-weight: 700;
    color: #03406b;
    margin-bottom: 5px;
}

.SubTitle {
    font-size: 1rem;
    font-weight: 400;
    color: #1B1E21;
    margin-bottom: 20px;
}

.optiontitle {
    font-size: 1.1rem;
    font-weight: 600;
    color: #0A3C5F;
    margin-top: 15px;
}

/* ==========================
   BOUTONS D'OPTIONS
========================== */

.buttonoption,
.buttonoptionAorI {
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.buttonoptionAorI {
  display: flex;
  flex-direction: column;   /* empile les groupes */
  gap: 2px;
}

/* Chaque "type" (ASME, ISO, SMS, DIN) sur une ligne */
.buttonoptionAorI .titleASMEorISO {
  font-weight: 600;
  color: #1B1E21;
  margin-top: 2px;
}

.buttonoptionAorI .ASMEorISO {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-left: 0;          /* optionnel */
}


.ASMEorISO {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.typebuttonoption {
    background: #E8F1F5;
    border: 1px solid #C2D6DF;

    color: #03406b;
    font-size: .9rem;
    font-weight: 500;

    padding: 8px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.25s;
}

.typebuttonoption:hover {
    background: #DBEDF3;
    border-radius: 14px;

}

.typebuttonoption.active {
    background: #7DC0C7;
}

/* ==========================
   BOUTON "DEMAMDER UN DEVIS"
========================== */

.QuotationButton {
    background: #03406b;
    color: white;

    padding: 14px 22px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;

    cursor: pointer;
    border: none;

    transition: 0.3s;
}

.QuotationButton:hover {
    background: #155A88;
}
/* ==========================
   REFERENCE FIXE — CONFIGURATOR
   ========================== */

.FixedRef {
    position: fixed;
    top: 75px;              /* hauteur du header */
    right: 0px;
    min-width: 300px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-left-radius: 10px;
    padding: 5px 10px;

    font-size: 0.95rem;
    font-weight: 600;
    color: #03406b;

    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.6);

    z-index: 1500; /* au-dessus du contenu */
}

/* Mobile : on la remet dans le flux */
@media (max-width: 1100px) {
    .FixedRef {
        position: static;
        margin-bottom: 15px;
        box-shadow: none;
    }
}

.Info {
    display: flex;
    flex-direction: row;     
    justify-content: center;
    gap: 20px;                
    margin-bottom: 1px;
}

.Info div {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Ligne 3 : Copyright */
.Copyright {
    font-size: 0.8rem;
}
.Mail  {
    height: 15px;
    font-size: 15px;
}
.Tel  {
    height: 15px;
    font-size: 15px;
}

.FLogo {
    height: 30px;
    padding-top: 5px;
}
/* ==========================
   RESPONSIVE
========================== */

@media (max-width: 1100px) {
    .contentC {
        grid-template-columns: 1fr;
    }

    .ProductPreview {
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    .typebuttonoption {
        width: 100%;
        text-align: center;
    }
}


/* ==========================
   CONFIGURATOR — SCREEN BLOCKER
========================== */
.config-screen-blocker{
  min-height: calc(100vh - 60px);
  display: grid;
  place-items: center;
  padding: 30px 16px;
}

.config-screen-blocker .blocker-card{
  max-width: 520px;
  width: 100%;
  background: rgba(255,255,255,0.92);
  border-radius: 16px;
  padding: 22px 20px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
  text-align: center;
}

.config-screen-blocker h2{
  margin: 0 0 10px;
  color: #03406b;
}

.config-screen-blocker p{
  margin: 0 0 16px;
  color: #1B1E21;
  line-height: 1.45;
}

.config-screen-blocker .blocker-btn{
  display: inline-block;
  background: #03406b;
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
}
.config-screen-blocker .blocker-btn:hover{
  background: #155A88;
}