/* ===================================================================
   UDF.CSS
   Override léger du template HTML5UP
   Charge APRÈS assets/css/main.css
   =================================================================== */


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

:root{
  --udf-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --udf-text: #1b1f23;
  --udf-muted: #5b6672;

  --udf-link: #0b5fff;
  --udf-link-hover: #0847bf;

  --udf-border: rgba(27,31,35,.14);
  --udf-border-strong: rgba(27,31,35,.22);

  --udf-bg-soft: #f6f8fb;
  --udf-bg-note: #f4f6f8;
  --udf-white: #ffffff;

  --udf-radius: 12px;
  --udf-radius-sm: 8px;
  --udf-radius-pill: 999px;

  --udf-shadow: 0 4px 16px rgba(0,0,0,.06);
  --udf-shadow-hover: 0 8px 22px rgba(0,0,0,.08);

  --udf-space-1: .35rem;
  --udf-space-2: .6rem;
  --udf-space-3: .9rem;
  --udf-space-4: 1.25rem;
  --udf-space-5: 1.8rem;
  --udf-space-6: 2.4rem;

  --udf-btn-bg: #e9efff;
  --udf-btn-bg-hover: #dbe5ff;
  --udf-btn-border: #b7c6ff;
  --udf-btn-border-hover: #92a9ff;
  --udf-btn-text: #1f3f95;

  --udf-focus: rgba(11,95,255,.22);
}


/* ===============================
   RESET / BASE SÛRE
   =============================== */

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

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

body{
  font-family:var(--udf-font);
  color:var(--udf-text);
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}

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

iframe{
  max-width:100%;
  border:0;
}

figure{
  margin:0;
}


/* ===============================
   LIENS
   =============================== */

a{
  color:var(--udf-link);
  text-decoration:none;
  text-underline-offset:2px;
  transition:color .2s ease, text-decoration-color .2s ease, opacity .2s ease;
}

a:hover{
  color:var(--udf-link-hover);
  text-decoration:underline;
}

a:focus-visible{
  outline:3px solid var(--udf-focus);
  outline-offset:2px;
  border-radius:4px;
}


/* ===============================
   TYPOGRAPHIE
   =============================== */

p{
  line-height:1.7;
  margin:0 0 var(--udf-space-3);
}

.small{
  font-size:.95rem;
  color:var(--udf-muted);
}

.x-small{
  font-size:.85rem;
  color:var(--udf-muted);
}

h1,h2,h3,h4{
  line-height:1.3;
  margin:0 0 var(--udf-space-3);
  color:var(--udf-text);
}

h1{
  font-size:2rem;
}

h2{
  font-size:1.5rem;
  margin-top:var(--udf-space-5);
}

h3{
  font-size:1.2rem;
}

h4{
  font-size:1.05rem;
}


/* ===============================
   HR
   =============================== */

hr.major{
  border:0;
  border-top:1px solid var(--udf-border);
  margin:var(--udf-space-5) 0;
}


/* ===============================
   HELPERS
   =============================== */

.center{
  text-align:center;
}

.italic{
  font-style:italic;
}

.muted{
  color:var(--udf-muted);
}


/* ===============================
   BLOCS CONTENU
   =============================== */

.box{
  border:1px solid var(--udf-border);
  border-radius:var(--udf-radius);
  padding:var(--udf-space-4);
  margin:var(--udf-space-4) 0;
  background:var(--udf-white);
  box-shadow:var(--udf-shadow);
  overflow:hidden;
}

.box > *:last-child{
  margin-bottom:0;
}

.box-note{
  border-left:4px solid #1a3c8e;
  background:var(--udf-bg-note);
  padding:15px 20px;
  margin:25px 0;
  border-radius:6px;
}

.box-note > *:last-child{
  margin-bottom:0;
}


/* ===============================
   BOUTONS
   =============================== */

.button,
a.button,
button.button,
input[type="submit"].button,
input[type="button"].button,
input[type="reset"].button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;

  max-width:100%;
  min-height:44px;
  padding:.72rem 1rem;

  border:1px solid var(--udf-btn-border);
  border-radius:var(--udf-radius-pill);
  background:var(--udf-btn-bg);
  color:var(--udf-btn-text);

  font:inherit;
  font-size:.95rem;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  vertical-align:middle;
  white-space:normal;

  box-shadow:none;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    transform .15s ease;
}

.button:hover,
a.button:hover,
button.button:hover,
input[type="submit"].button:hover,
input[type="button"].button:hover,
input[type="reset"].button:hover{
  background:var(--udf-btn-bg-hover);
  border-color:var(--udf-btn-border-hover);
  color:var(--udf-btn-text);
  text-decoration:none;
}

.button:active,
a.button:active,
button.button:active,
input[type="submit"].button:active,
input[type="button"].button:active,
input[type="reset"].button:active{
  transform:translateY(1px);
}

.button:focus-visible,
a.button:focus-visible,
button.button:focus-visible,
input[type="submit"].button:focus-visible,
input[type="button"].button:focus-visible,
input[type="reset"].button:focus-visible{
  outline:3px solid var(--udf-focus);
  outline-offset:2px;
}

.button[disabled],
button.button[disabled],
input[type="submit"].button[disabled],
input[type="button"].button[disabled],
input[type="reset"].button[disabled]{
  opacity:.6;
  cursor:not-allowed;
  pointer-events:none;
}

/* Boutons dans cartes ou zones étroites */
.box .button,
.concours .button,
.uniform-card .button,
.video-card .button,
.mini-posts .button{
  margin-top:.35rem;
}

/* Si plusieurs boutons à suivre */
.button + .button{
  margin-left:.5rem;
}


/* ===============================
   ACTIONS RAPIDES HUB
   =============================== */

.quick-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:20px 0;
}

.quick-actions .button{
  margin:0;
}


/* ===============================
   SOMMAIRE
   =============================== */

.toc{
  margin:10px 0 25px 20px;
  padding-left:0;
}

.toc li{
  margin:6px 0;
}

.toc a{
  font-weight:700;
}


/* ===============================
   TABLEAUX
   =============================== */

table{
  width:100%;
  border-collapse:collapse;
  margin:25px 0;
  background:var(--udf-white);
}

th, td{
  padding:10px;
  border:1px solid var(--udf-border);
  text-align:left;
  vertical-align:top;
}

th{
  background:var(--udf-bg-soft);
  font-weight:700;
}


/* ===============================
   LISTES
   =============================== */

ul, ol{
  margin:10px 0 16px 1.2rem;
  padding:0;
}

li{
  margin:6px 0;
}

li > ul,
li > ol{
  margin-top:8px;
  margin-bottom:8px;
}


/* ===============================
   CARTES VIDEO
   =============================== */

.video-grid{
  display:grid;
  gap:25px;
  margin:30px 0;
}

.video-card{
  border:1px solid var(--udf-border);
  padding:20px;
  border-radius:var(--udf-radius);
  background:var(--udf-white);
  box-shadow:var(--udf-shadow);
  overflow:hidden;
}

.video-card > *:last-child{
  margin-bottom:0;
}

.embed{
  position:relative;
  width:100%;
  padding-bottom:56.25%;
  height:0;
  overflow:hidden;
  border-radius:var(--udf-radius-sm);
  background:#000;
}

.embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}


/* ===============================
   CARTES UNIFORMES
   =============================== */

.uniform-grid{
  display:grid;
  gap:25px;
  margin:30px 0;
}

.uniform-card{
  border:1px solid var(--udf-border);
  padding:20px;
  border-radius:var(--udf-radius);
  background:var(--udf-white);
  box-shadow:var(--udf-shadow);
  overflow:hidden;
}

.uniform-card > *:last-child{
  margin-bottom:0;
}

.uniform-card .label{
  font-weight:800;
  margin-bottom:10px;
}

.uniform-card figcaption{
  margin-top:10px;
  font-size:.9rem;
  color:var(--udf-muted);
}


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

.embed-map{
  border-radius:var(--udf-radius-sm);
  overflow:hidden;
  border:1px solid var(--udf-border);
  margin-top:10px;
  background:#fff;
}

.embed-map iframe{
  display:block;
  width:100%;
  height:420px;
  border:0;
}


/* ===============================
   CONCOURS
   =============================== */

.concours{
  border:1px solid var(--udf-border);
  border-radius:var(--udf-radius);
  padding:20px;
  margin:20px 0;
  background:var(--udf-white);
  box-shadow:var(--udf-shadow);
  overflow:hidden;
}

.concours > *:last-child{
  margin-bottom:0;
}

.concours h4{
  margin-bottom:10px;
}


/* ===============================
   BADGES
   =============================== */

.blue,
.red,
.orange,
.purple,
.teal{
  display:inline-block;
  padding:3px 7px;
  border-radius:10px;
  font-weight:700;
  line-height:1.35;
}

.blue{
  background:#e6f0ff;
  color:#0847bf;
}

.red{
  background:#ffe6e6;
  color:#b42318;
}

.orange{
  background:#fff0db;
  color:#a15c00;
}

.purple{
  background:#eee6ff;
  color:#5b21b6;
}

.teal{
  background:#e6ffff;
  color:#0b6b6b;
}


/* ===============================
   MINI POSTS SIDEBAR
   =============================== */

.mini-posts{
  display:grid;
  gap:20px;
}

.mini-posts article{
  border:1px solid var(--udf-border);
  padding:15px;
  border-radius:var(--udf-radius);
  background:var(--udf-white);
  overflow:hidden;
}

.mini-posts article > *:last-child{
  margin-bottom:0;
}

.mini-posts img{
  border-radius:var(--udf-radius-sm);
}


/* ===============================
   ADSENSE
   =============================== */

.ad{
  text-align:center;
  margin:30px 0;
  overflow:hidden;
}

.ad-top{
  margin:25px 0;
}

.ad-footer{
  margin:40px 0;
}


/* ===============================
   MEDIA QUERIES
   =============================== */

@media (max-width:980px){

  h1{
    font-size:1.8rem;
  }

  h2{
    font-size:1.38rem;
  }

  .box,
  .video-card,
  .uniform-card,
  .concours{
    padding:18px;
  }
}

@media (max-width:780px){

  .embed-map iframe{
    height:320px;
  }

  .button,
  a.button,
  button.button,
  input[type="submit"].button,
  input[type="button"].button,
  input[type="reset"].button{
    width:100%;
  }

  .button + .button{
    margin-left:0;
    margin-top:.6rem;
  }

  .quick-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .quick-actions .button{
    width:100%;
  }

  table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

@media (max-width:480px){

  h1{
    font-size:1.55rem;
  }

  h2{
    font-size:1.25rem;
  }

  .box,
  .box-note,
  .video-card,
  .uniform-card,
  .concours,
  .mini-posts article{
    padding:16px;
  }
}


/* ===============================
   PRINT
   =============================== */

@media print{

  #sidebar{
    display:none;
  }

  .button{
    display:none !important;
  }

  .ad,
  .ad-top,
  .ad-footer{
    display:none !important;
  }

  .box,
  .video-card,
  .uniform-card,
  .concours,
  .mini-posts article{
    box-shadow:none;
  }
}


/* ===============================
   IMPORTANT
   =============================== */

/*
Ne pas modifier #wrapper
Ne pas modifier #sidebar
Ne pas modifier #main

Sinon on casse le menu mobile HTML5UP
*/

[id]{
  scroll-margin-top:120px;
}