/* ===================================================================
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 24px rgba(0,0,0,.10);

--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
=============================== */

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

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

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


/* ===============================
IMAGES / MEDIA
=============================== */

/* comportement général */

img{
display:block;
max-width:100%;
height:auto;
border-radius:var(--udf-radius-sm);
}

/* images dans le contenu */

.inner section img,
.content img,
article img{
max-width:600px;
width:100%;
height:auto;
margin:1.5rem auto;
display:block;
}

/* images pleine largeur (si nécessaire) */

.image-full{
max-width:100% !important;
}

/* images petites */

.image-small{
max-width:350px;
margin:auto;
}

/* images moyennes (recommandé pour UDF) */

.image-medium{
max-width:500px;
margin:auto;
}

/* images grandes */

.image-large{
max-width:700px;
margin:auto;
}

/* figure */

figure{
margin:1.5rem auto;
text-align:center;
}

figcaption{
font-size:.9rem;
color:var(--udf-muted);
margin-top:.5rem;
}

/* vidéos */

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

/* embed responsive */

.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%;
}

/* amélioration CLS images */

.content img,
section img,
article img{
max-width:100%;
height:auto;
margin:auto;
}


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

a{
color:var(--udf-link);
text-decoration:none;
text-underline-offset:2px;
transition: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{
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.25;
margin:0 0 var(--udf-space-3);
}

h1{
font-size:2rem;
font-weight:700;
}

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);
}


/* ===============================
BOX 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);
transition:box-shadow .2s ease;
}

.box:hover{
box-shadow:var(--udf-shadow-hover);
}

.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;
}


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

.button,
a.button,
button.button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.45rem;

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-size:.95rem;
font-weight:600;

cursor:pointer;
transition:all .2s ease;
}

.button:hover{
background:var(--udf-btn-bg-hover);
border-color:var(--udf-btn-border-hover);
transform:translateY(-1px);
}

.button:active{
transform:translateY(1px);
}


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

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

.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);
}

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


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

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

li{
margin:6px 0;
}


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

.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);
}

.uniform-card:hover{
box-shadow:var(--udf-shadow-hover);
}

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


/* ===============================
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);
}


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

.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);
}


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

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

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

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


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

@media (max-width:980px){

h1{font-size:1.8rem;}
h2{font-size:1.35rem;}

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

}

@media (max-width:780px){

.button{
width:100%;
}

table{
display:block;
overflow-x:auto;
}

}

@media (max-width:480px){

h1{font-size:1.55rem;}
h2{font-size:1.25rem;}

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

}


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

@media print{

#sidebar{
display:none;
}

.ad,
.button{
display:none !important;
}

}


/* ===============================
ANCHOR OFFSET
=============================== */

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


/* ===============================
SIDEBAR ADS STICKY
=============================== */

.sidebar-ad-wrap{
margin:0 0 2rem 0;
}

.ad-sticky{
position:sticky;
top:1.5rem;
z-index:10;
}

@media screen and (max-width:1280px){
.ad-sticky{
position:static;
}
}