/* ========================= */
/*         VARIABLES         */
/* ========================= */

:root{
  --bg:#f5f7fa;

  --text:#111827;
  --text-light:#555;
  --text-muted:#888;

  --primary:#FF0000;  /*#2f6fed;*/

  --card-manual:#e3e8ef;
  --card-app:#2f6fed;
  --card-save:#90EE90;

  --white:#ffffff;

  --shadow:
    0 10px 25px rgba(0,0,0,0.10);

  --radius:12px;

  --transition:.2s ease;
}

/* ========================= */
/*           RESET           */
/* ========================= */

*{
  box-sizing:border-box;
}

/* ========================= */
/*         BODY              */
/* ========================= */

body{
  margin:0;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:var(--bg);
  color:var(--text);

  min-height:100vh;

  padding:30px 20px;

  display:flex;
  justify-content:center;
  align-items:flex-start;
}

/* ========================= */
/*      CONTAINER BLANC      */
/* ========================= */

.container{
  width:100%;
  max-width:1200px;

  background:var(--white);

  border:1px solid #d1d5db;
  border-radius:16px;

  box-shadow:var(--shadow);

  padding:40px 30px;

  text-align:center;
}

/* ========================= */
/*         HEADER            */
/* ========================= */

.header{
  margin-bottom:20px;
}

.header img{
  height:160px;
  opacity:0.85;
}

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

h1{
  position:relative;

  margin-bottom:10px;

  font-size:28px;
}

h1::after{
  content:"";
  display:block;
  width:60px;
  height:4px;
  margin:10px auto 0;
  background:#d1d5db;
}

 /* background:
    linear-gradient(
      to right,
      blue,
      white,
      red
    );

}*/

h2{
  margin-bottom:5px;

  font-size:18px;
  font-weight:bold;
}

/* ========================= */
/*         PARAGRAPHES       */
/* ========================= */

p{
  margin-bottom:40px;
  color:var(--text-light);
}

/* ========================= */
/*           INTRO           */
/* ========================= */

.intro{
  max-width:700px;

  margin:
    0 auto 5px;

  text-align:center;
  color:#444;
}

.separator{
  margin-bottom:15px;

  color:var(--text-muted);
  font-size:14px;
}

.lead{
  margin-bottom:15px;

  font-size:16px;
  font-weight:500;
}

.highlight{
  margin-top:10px;

  color:var(--primary);
  font-style:italic;
  font-weight:bold;
}

/* ========================= */
/*        DISCLAIMER         */
/* ========================= */

.disclaimer{
  list-style:none;

  padding:0;
  margin-top:15px;

  font-size:14px;
}

.disclaimer li{
  margin:5px 0;
}

.disclaimer li::before{
  content:"➡ ";

  color:var(--primary);
  font-weight:bold;
}

/* ========================= */
/*          CHOICES          */
/* ========================= */

.choices{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:40px;
}

/* ========================= */
/*            CARD           */
/* ========================= */

.card{
  width:230px;
  height:180px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  border-radius:var(--radius);

  text-decoration:none;
  text-align:center;

  cursor:pointer;

  color:#000;

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    opacity var(--transition);
}

.card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow);
}

.card:focus{
  outline:3px solid var(--primary);
  outline-offset:3px;
}

/* ========================= */
/*        CARD TYPES         */
/* ========================= */

.manual{
  background:var(--card-manual);
}

.app{
  background:var(--card-app);
  color:var(--white);
}
.save{
  background:var(--card-save);
}

/* ========================= */
/*           ICON            */
/* ========================= */

.icon{
  margin-bottom:10px;

  font-size:40px;
}
.notice{
    position: relative;
    top: 05px;
}

/* ========================= */
/*           TITLE           */
/* ========================= */

.title{
  margin-bottom:5px;

  font-size:18px;
  font-weight:bold;
}

/* ========================= */
/*            DESC           */
/* ========================= */

.desc{
  padding:0 15px;

  text-align:center;
  font-size:14px;
}

/* ========================= */
/*           FOOTER          */
/* ========================= */

footer{
  margin-top:40px;

  color:var(--text-muted);
  font-size:12px;
}

/* ========================= */
/*       FOOTER LOGO         */
/* ========================= */

#footerLogo{
  display:flex !important;
  justify-content:center;
  align-items:center;
  gap:12px;

  margin-top:10mm;
}

#footerLogo img{
  width:50px;
  height:50px;
}

#footerLogo .text-center{
  line-height:1.2;
}

/* ========================= */
/*         RESPONSIVE        */
/* ========================= */

@media (max-width:768px){

  body{
    align-items:flex-start;
  }

  .container{
    padding-top:20px;
  }

  h1{
    font-size:24px;
  }

  .choices{
    gap:20px;
  }

  .card{
    width:100%;
    max-width:320px;
  }

  .header img{
    height:120px;
  }

  .lead{
    font-size:15px;
  }

  .desc{
    font-size:13px;
  }
}