/* ============================================
RESET & VARIABLES
============================================ */

:root {
--main-color: #2f4e62;
--accent: #C60030;
--border: #d8d8d8;
--bg-light: #f6f6f6;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

html, body {
height: 100%;
font-family: Helvetica, Arial, sans-serif;
color: #666;
background: #fff;
}

body {
display: flex;
flex-direction: column;
font-size: 1.05rem;
}

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

.bloc-90 {
max-width: 1100px;
width: 95%;
margin: auto;
padding: 20px 10px;
flex: 1;
}

header {
display: flex;
justify-content: space-between;
align-items: center;
}

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

.comic {
font-family: "Comic Neue", serif;
}

h1 {
font-size: 1.6rem;
text-align: center;
margin-bottom: 30px;
border-bottom: 1px solid #dfd3ac;
padding-bottom: 10px;
color: #000;
}

h2 {
font-size: 1.3rem;
color: #6698a8;
margin: 10px 0;
}

h3 {
font-size: 1.1rem;
color: #39536d;
margin: 15px 0;
}

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

a {
color: var(--main-color);
text-decoration: none;
}

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

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

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

img.centre,
img.centre-2 {
display: block;
margin: 10px auto;
border-radius: 5px;
object-fit: contain;
}

img.gauche {
display: block;
margin: 10px auto;
border-radius: 5px;
}

/* ============================================
COMPOSANTS (cards)
============================================ */

.card {
width: 100%;
padding: 20px;
text-align: center;
border: 1px solid var(--border);
border-radius: 4px;
background: #fff;
margin: 10px 0;
}

.card--light {
background: linear-gradient(to bottom, #fff, var(--bg-light));
}

.card--promo {
background: linear-gradient(to bottom, #f5c8c8, #f98383);
}

/* variantes desktop */
.card--2,
.card--3,
.card--4,
.card--5 {
width: 100%;
}

/* ============================================
FLEX / STRUCTURE
============================================ */

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

.box {
display: flex;
flex-direction: column;
}

.bloc-droite {
text-align: center;
margin: auto;
padding-top: 20px;
}

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

.video-container {
position: relative;
width: 100%;
max-width: 800px;
margin: auto;
padding-bottom: 56.25%;
height: 0;
}

.video-container iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

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

ul {
padding-left: 20px;
margin: 10px 0;
}

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

footer {
margin-top: 40px;
}

.barre-grise {
background: #f5f5f5;
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
}

.bottom1,
.bottom2,
.bottom3 {
background: #fbfcfc;
padding: 15px;
border: 1px solid var(--border);
}

/* ============================================
POPUP
============================================ */

.overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
z-index: 99;
justify-content: center;
align-items: center;
}

.overlay.show {
display: flex;
}

.popup {
background: white;
padding: 30px;
border-radius: 10px;
text-align: center;
box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}

/* ============================================
TABLETTE
============================================ */

@media (min-width: 768px) {

```
.card--2 {
    width: 48%;
}

.card--4 {
    width: calc(33.33% - 10px);
}

.row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
```

}

/* ============================================
DESKTOP
============================================ */

@media (min-width: 1024px) {

```
.card--2 {
    width: 45%;
}

.card--4 {
    width: calc(25% - 10px);
}

.card--5 {
    width: 19%;
}

.box {
    flex-direction: row;
}

.barre-grise {
    flex-direction: row;
}

.bottom1,
.bottom2,
.bottom3 {
    flex: 1;
    min-width: 200px;
}
```

}
/* ---- Fil d'Ariane ---- */
.fil-ariane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  list-style: none;
  font-size: 1rem;
  color: var(--texte-leger);
  margin-bottom: 1.5rem;
  font-family: var(--font-corps);
}

.fil-ariane li + li::before {
  content: '›';
  color: var(--vert-clair);
  margin-right: .4rem;
}

.fil-ariane a { color: var(--texte-leger); }
.fil-ariane a:hover { color: var(--vert-moyen); text-decoration: none; }
.fil-ariane [aria-current="page"] { color: var(--vert-moyen); font-weight: 600; }


.overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}
.overlay.show { display: flex; }
.popup {
    background: #fff;
    border-radius: 8px;
    padding: 28px 32px;
    max-width: 340px;
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}
.popup p { margin: 0 0 20px; font-size: 1.05em; line-height: 1.5; }
.popup-boutons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.popup-boutons .btn-panier,
.popup-boutons button {
    display: block;
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    font-size: 0.95em;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}
.popup-boutons .btn-panier {
    background: #333;
    color: #fff;
    border: none;
}
.popup-boutons .btn-panier:hover { background: #555; }
.popup-boutons button {
    background: #fff;
    color: #333;
    border: 1px solid #aaa;
}
.popup-boutons button:hover { background: #f0f0f0; }