/* La Chouette 205 - style "autocollant BD" : sable granuleux, contours noirs épais, anneau blanc, couleurs de la voiture */
:root {
  --nuit: #0a1a3a;          /* bleu très foncé (contours, textes) */
  --sable: #f0bf70;         /* sable du logo */
  --sable-clair: #fbe7b8;
  --creme: #fff8e6;
  --jaune: #f4c320;         /* jaune de la 205 */
  --rouge: #d6322a;
  --bleu-fonce: #14234b;
  --bleu-france: #0055a4;
  --orange: #e8892b;
  --texte: #14213d;
  --gris: #4f5870;
  /* Couleur de fond des pages (mettre #ffffff pour du blanc pur) */
  --fond-page: #FFFBE5;
  --contour: 4px solid var(--nuit);
  --sticker: 0 0 0 5px #fff, 6px 9px 0 5px rgba(10, 26, 58, .28);
  --rayon: 18px;
  /* Police de titres : large et très lisible */
  --police-titre: "Arial Black", "Segoe UI Black", "Gill Sans Heavy", Verdana, "DejaVu Sans", "Helvetica Neue", Arial, sans-serif;
  --police-texte: "Trebuchet MS", "Segoe UI", Verdana, "DejaVu Sans", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fond-page); color: var(--texte); font-family: var(--police-texte); font-size: 1.05rem; line-height: 1.65; letter-spacing: .01em; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--nuit); font-weight: 700; }
a:hover { color: var(--rouge); }
p { margin: 0 0 .9rem; }

/* Titres : gras, larges, contrastés */
h1, h2, h3 { font-family: var(--police-titre); font-weight: 900; text-transform: uppercase; letter-spacing: .07em; line-height: 1.15; margin: 0 0 .7rem; color: var(--nuit); overflow-wrap: break-word; }
h1 { font-size: clamp(1.8rem, 5vw, 2.9rem); text-shadow: 3px 3px 0 #fff; }
h2 { font-size: clamp(1.45rem, 4vw, 2.1rem); margin-top: 2.8rem; text-shadow: 2px 2px 0 #fff; }
h3 { font-size: 1.25rem; letter-spacing: .06em; }
.sur-nuit h1, .sur-nuit h2, .case.nuit h2, .titre-volet.humanitaire h2 { color: var(--jaune); text-shadow: 2px 2px 0 #000; }

/* Bande aux couleurs de la voiture : rouge, bleu foncé, jaune, bleu France */
.bande-205 { height: 12px; background: linear-gradient(to bottom, var(--rouge) 0 25%, var(--bleu-fonce) 25% 50%, var(--jaune) 50% 75%, var(--bleu-france) 75% 100%); }

/* En-tête */
header.site { background: #fff; border-bottom: 4px solid var(--nuit); position: sticky; top: 0; z-index: 50; }
.barre { max-width: 1180px; margin: 0 auto; padding: .4rem 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--nuit); }
.logo img { width: 50px; height: 50px; }
.logo b { font-family: var(--police-titre); font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1; font-weight: 900; }
.logo b span { color: var(--rouge); }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .3rem; flex-wrap: wrap; }
nav a { display: block; padding: .38rem .8rem; border: 3px solid transparent; border-radius: 999px; text-decoration: none; font-family: var(--police-titre); text-transform: uppercase; letter-spacing: .07em; font-size: .82rem; font-weight: 900; color: var(--nuit); }
nav a:hover { border-color: var(--nuit); background: var(--jaune); color: var(--nuit); }
nav a[aria-current="page"] { background: var(--nuit); color: var(--jaune); }
.burger { display: none; background: var(--jaune); color: var(--nuit); border: 3px solid var(--nuit); border-radius: 10px; font-size: 1.3rem; padding: .1rem .65rem; cursor: pointer; }
@media (max-width: 900px) {
  .logo b { font-size: 1rem; }
  .logo img { width: 44px; height: 44px; }
  .burger { display: block; }
  nav { width: 100%; }
  .barre { flex-wrap: wrap; }
  nav ul { display: none; flex-direction: column; padding: .4rem 0 .6rem; }
  nav ul.ouvert { display: flex; }
  nav a { border-color: var(--nuit); background: var(--creme); }
}

/* Bandeau d'accueil compact : autocollant + titre + compte à rebours */
.bandeau { background: var(--nuit) radial-gradient(rgba(240, 191, 112, .18) 1.6px, transparent 1.8px) 0 0 / 11px 11px; color: #fff; }
.bandeau-in { max-width: 1180px; margin: 0 auto; padding: .6rem 1.1rem; display: flex; align-items: center; gap: .6rem 1.4rem; flex-wrap: wrap; }
.bandeau-logo { width: 92px; height: 92px; flex: none; border-radius: 50%; box-shadow: 0 0 0 4px #fff; margin: .2rem .3rem; }
.bandeau-texte { flex: 1 1 260px; min-width: 0; }
.bandeau h1 { margin: 0; font-size: clamp(1.5rem, 3.6vw, 2.3rem); }
.bandeau p { margin: .2rem 0 0; color: #e6ecfa; font-size: .95rem; }
.compte-bloc { margin-left: auto; }
.compte { display: flex; gap: .45rem; }
.compte div { background: var(--jaune); color: var(--nuit); border: 3px solid #fff; border-radius: 12px; min-width: 66px; padding: .25rem .4rem .2rem; text-align: center; box-shadow: 3px 3px 0 #000; }
.compte strong { display: block; font-family: var(--police-titre); font-weight: 900; font-size: 1.55rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.compte span { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.compte-titre { font-family: var(--police-titre); text-transform: uppercase; letter-spacing: .1em; color: var(--jaune); font-size: .75rem; margin: 0 0 .3rem; font-weight: 900; }
@media (max-width: 700px) { .compte-bloc { margin-left: 0; width: 100%; } .compte div { min-width: 58px; } .bandeau-logo { width: 72px; height: 72px; } }

/* Mise en page */
main { max-width: 1180px; margin: 0 auto; padding: 2rem 1.3rem 3.5rem; }
.case { background: var(--creme); border: var(--contour); border-radius: var(--rayon); box-shadow: var(--sticker); padding: 1.2rem 1.35rem; }
.case.sable { background: var(--sable-clair); }
.case.nuit { background: var(--nuit); color: #fff; }
.case.nuit h3 { color: var(--jaune); }
.etiquette { display: inline-block; background: var(--jaune); color: var(--nuit); border: 3px solid var(--nuit); border-radius: 999px; padding: .1rem .9rem; font-family: var(--police-titre); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; margin-bottom: .8rem; }
.grille { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.bouton { display: inline-block; background: var(--jaune); color: var(--nuit); text-decoration: none; border: 4px solid var(--nuit); border-radius: 999px; padding: .55rem 1.4rem; font-family: var(--police-titre); text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; font-weight: 900; cursor: pointer; box-shadow: 0 0 0 3px #fff, 4px 6px 0 3px rgba(10, 26, 58, .3); transition: transform .12s; }
.bouton:hover { transform: translateY(2px); color: var(--nuit); background: #ffd24a; }
.bouton.sombre { background: var(--nuit); color: var(--jaune); }
.bouton.sombre:hover { color: #fff; background: var(--bleu-fonce); }
.actions { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.8rem; }

/* Accueil : 1/3 programme | 2/3 actualités */
.accueil { display: grid; grid-template-columns: 1fr 2fr; gap: 2.2rem; align-items: start; }
@media (max-width: 900px) { .accueil { grid-template-columns: 1fr; } .accueil .col-actus { order: -1; } }
.accueil h2 { margin-top: 0; font-size: 1.5rem; margin-bottom: 1.1rem; }
.programme ol { list-style: none; margin: 0; padding: 0 0 0 1.5rem; border-left: 5px solid var(--nuit); }
.programme li { position: relative; margin: 0 0 1.05rem; font-size: .96rem; line-height: 1.45; }
.programme li::before { content: ""; position: absolute; left: -2.3rem; top: .15rem; width: 20px; height: 20px; background: var(--jaune); border: 4px solid var(--nuit); border-radius: 50%; }
.programme li:nth-child(4n+1)::before { background: var(--rouge); }
.programme li:nth-child(4n+2)::before { background: var(--bleu-france); }
.programme li:nth-child(4n+3)::before { background: var(--jaune); }
.programme li:nth-child(4n)::before { background: #fff; }
.programme li:last-child { margin-bottom: 0; }
.programme b { display: block; font-family: var(--police-titre); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; font-size: .88rem; color: var(--nuit); margin-bottom: .1rem; }

/* Actualités */
.actus { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.actu { background: var(--creme); border: var(--contour); border-radius: var(--rayon); box-shadow: var(--sticker); overflow: hidden; display: flex; flex-direction: column; }
.actu .photo { position: relative; border-bottom: var(--contour); background: var(--sable-clair); }
.actu img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.actu .date { position: absolute; left: 10px; top: 10px; background: var(--jaune); border: 3px solid var(--nuit); border-radius: 999px; padding: 0 .7rem; font-family: var(--police-titre); font-weight: 900; letter-spacing: .06em; font-size: .72rem; text-transform: uppercase; line-height: 1.7; }
.actu .texte { padding: .8rem 1rem 1.05rem; }
.actu h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.actu p { margin: 0; font-size: .96rem; }
.actu.sans-photo .date { position: static; display: inline-block; margin: .9rem 0 0 1rem; }
.vide { color: var(--gris); font-style: italic; }
.plus { margin-top: 1.6rem; text-align: center; }

/* Équipage */
.photo-duo { margin: 1.6rem 0 2.4rem; border: var(--contour); border-radius: var(--rayon); box-shadow: var(--sticker); overflow: hidden; background: var(--creme); }
.photo-duo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 22%; }
.photo-duo figcaption { padding: .5rem 1rem; border-top: var(--contour); font-weight: 700; font-size: .92rem; background: var(--sable-clair); }
.equipage { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.equipier { text-align: center; padding-top: 1.5rem; }
.equipier .cadre { width: 210px; height: 210px; margin: 0 auto 1rem; border: var(--contour); border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--nuit); background: var(--sable); }
.equipier .cadre img { width: 100%; height: 100%; object-fit: cover; }
.equipier h3 { font-size: 1.5rem; margin: 1.2rem 0 0; }
.equipier p { text-align: left; }
.equipier p.age { text-align: center; color: var(--gris); font-weight: 700; margin: 0 0 .4rem; }
.role { display: inline-block; background: var(--nuit); color: var(--jaune); padding: .15rem 1.1rem; border-radius: 999px; font-family: var(--police-titre); text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; font-weight: 900; margin: .2rem 0 .9rem; }
.histoire { display: grid; grid-template-columns: 1fr 260px; gap: 2rem; align-items: start; }
@media (max-width: 800px) { .histoire { grid-template-columns: 1fr; } }
.histoire .logo-grand { width: 260px; margin: 0 auto; filter: drop-shadow(5px 8px 0 rgba(10, 26, 58, .25)); }
.bulle { position: relative; background: #fff; border: var(--contour); border-radius: 26px; padding: 1rem 1.4rem; box-shadow: var(--sticker); }
.bulle::after { content: ""; position: absolute; left: 40px; bottom: -22px; width: 26px; height: 26px; background: #fff; border-right: var(--contour); border-bottom: var(--contour); transform: skewY(40deg) rotate(10deg); }

/* Projet */
.volets { display: grid; gap: 1.8rem; grid-template-columns: 1fr 1fr; margin-top: 1.6rem; }
@media (max-width: 700px) { .volets { grid-template-columns: 1fr; } }
.volet { display: block; text-decoration: none; padding: 1.3rem 1.4rem; border: var(--contour); border-radius: var(--rayon); box-shadow: var(--sticker); transition: transform .12s; font-weight: 400; }
.volet:hover { transform: translateY(3px); }
.volet .gros { font-family: var(--police-titre); font-size: 1.45rem; line-height: 1.1; letter-spacing: .07em; text-transform: uppercase; font-weight: 900; display: block; margin: .3rem 0 .5rem; }
.volet.sportif { background: var(--jaune); color: var(--nuit); }
.volet.humanitaire { background: var(--nuit); color: #fff; }
.volet.humanitaire .gros { color: var(--jaune); }
.volet .emoji { font-size: 2.3rem; line-height: 1; }
.titre-volet { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin: 3.4rem 0 1.2rem; padding: .6rem 1.2rem; border: var(--contour); border-radius: var(--rayon); box-shadow: var(--sticker); }
.titre-volet h2 { margin: 0; text-shadow: none; }
.titre-volet.sportif { background: var(--jaune); }
.titre-volet.humanitaire { background: var(--nuit); }
.titre-volet .emoji { font-size: 2rem; }
.chiffres { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 1.4rem 0; }
.chiffre { background: var(--creme); border: var(--contour); border-radius: 50% / 42%; text-align: center; padding: .9rem .4rem; box-shadow: 0 0 0 4px #fff; }
.chiffre strong { display: block; font-family: var(--police-titre); font-size: 1.55rem; font-weight: 900; line-height: 1.1; color: var(--nuit); letter-spacing: .04em; }
.chiffre span { font-size: .85rem; font-weight: 700; color: var(--gris); }
.photos { display: grid; gap: 1.8rem; grid-template-columns: 1fr 1fr; margin: 1.8rem 0; }
@media (max-width: 700px) { .photos { grid-template-columns: 1fr; } }
.photos figure, .photo-bd { margin: 0; border: var(--contour); border-radius: var(--rayon); box-shadow: var(--sticker); overflow: hidden; background: var(--creme); }
.photos img, .photo-bd img { width: 100%; height: 100%; object-fit: cover; }
.photos figcaption, .photo-bd figcaption { padding: .4rem .9rem; border-top: var(--contour); font-size: .92rem; font-weight: 700; background: var(--sable-clair); }
.liste-besoins { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin: 1.4rem 0; }
.besoin { background: var(--creme); color: var(--texte); border: 4px solid var(--nuit); border-radius: var(--rayon); padding: .8rem 1rem; box-shadow: 0 0 0 4px #fff; }
.besoin .emoji { font-size: 1.8rem; line-height: 1; }
.besoin b { display: block; font-family: var(--police-titre); letter-spacing: .06em; text-transform: uppercase; font-size: .9rem; margin: .3rem 0; color: var(--nuit); font-weight: 900; }
.besoin p { margin: 0; font-size: .92rem; line-height: 1.45; }
.humanitaire-grid { display: grid; gap: 1.8rem; grid-template-columns: 1fr 280px; align-items: start; }
@media (max-width: 820px) { .humanitaire-grid { grid-template-columns: 1fr; } }

table.budget { width: 100%; border-collapse: separate; border-spacing: 0; border: var(--contour); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--sticker); background: var(--creme); }
table.budget th { background: var(--nuit); color: var(--jaune); text-align: left; padding: .7rem .8rem; font-family: var(--police-titre); letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; font-weight: 900; }
table.budget td { padding: .6rem .8rem; border-top: 2px solid var(--sable); vertical-align: middle; font-size: .96rem; }
table.budget td.poste { font-weight: 700; }
table.budget td.montant { text-align: right; white-space: nowrap; font-weight: 800; font-variant-numeric: tabular-nums; }
table.budget tr:nth-child(even) td { background: var(--sable-clair); }
table.budget tr.total td { background: var(--jaune); border-top: 4px solid var(--nuit); font-family: var(--police-titre); font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 900; }
.barre-part { display: block; height: 9px; margin-top: .35rem; background: var(--rouge); border: 2px solid var(--nuit); border-radius: 6px; }
@media (max-width: 640px) {
  table.budget thead { display: none; }
  table.budget, table.budget tbody, table.budget tr, table.budget td { display: block; width: 100%; }
  table.budget tr { border-top: 3px solid var(--nuit); padding: .4rem 0; }
  table.budget tr:first-child { border-top: 0; }
  table.budget td { border: 0 !important; padding: .15rem .8rem; }
  table.budget td.montant { text-align: left; }
}
.bandeau-dossier { margin-top: 3rem; text-align: center; }
.bandeau-dossier h2 { margin-top: 0; text-shadow: 2px 2px 0 #000; }
.bandeau-dossier p { max-width: 60ch; margin-left: auto; margin-right: auto; }
.liste-flocage { margin: 0; padding-left: 1.2rem; }
.liste-flocage li { margin-bottom: .4rem; }

/* Partenaires : 3 par ligne sur ordinateur, 1 par ligne (portrait) sur smartphone */
.partenaires { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1.8rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .partenaires { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .partenaires { grid-template-columns: 1fr; } }
.partenaire { display: flex; align-items: center; gap: .9rem; background: var(--creme); border: var(--contour); border-radius: var(--rayon); box-shadow: var(--sticker); padding: .7rem .9rem; min-height: 96px; }
.partenaire .logo-p { flex: 0 0 38%; max-width: 38%; display: flex; align-items: center; justify-content: center; }
.partenaire .logo-p img { max-height: 70px; width: auto; max-width: 100%; object-fit: contain; }
.partenaire .nom { font-family: var(--police-titre); letter-spacing: .05em; text-transform: uppercase; font-size: .88rem; line-height: 1.25; color: var(--nuit); font-weight: 900; overflow-wrap: break-word; min-width: 0; }

/* Formulaire */
form.soutien { display: grid; gap: 1rem; }
form.soutien label { font-weight: 800; display: block; margin-bottom: .2rem; }
form.soutien input, form.soutien textarea { width: 100%; padding: .65rem .8rem; font: inherit; border: 3px solid var(--nuit); border-radius: 12px; background: #fff; color: var(--texte); }
form.soutien input:focus, form.soutien textarea:focus { outline: none; background: #fffbe9; box-shadow: 0 0 0 3px var(--jaune); }
form.soutien textarea { min-height: 170px; resize: vertical; }
.duo { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .duo { grid-template-columns: 1fr; } }
.deux-col { display: grid; gap: 2.2rem; grid-template-columns: 1.4fr 1fr; align-items: start; }
@media (max-width: 860px) { .deux-col { grid-template-columns: 1fr; } }
.piege { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.alerte { padding: .8rem 1rem; border: 3px solid #8a1c1c; border-radius: 12px; background: #fde8e8; color: #8a1c1c; font-weight: 700; }
.succes { padding: 1rem 1.2rem; border: 3px solid #1b5e34; border-radius: 12px; background: #e7f6ec; color: #1b5e34; font-weight: 700; }
.note { color: var(--gris); font-size: .9rem; }

/* Pied de page */
footer.site { background: var(--nuit); color: #e6ecfa; text-align: center; padding: 1.6rem 1.1rem; font-size: .95rem; }
footer.site a { color: var(--jaune); }
footer.site p { margin: .25rem 0; }

/* Blocs de texte posés directement sur le sable : fond crème pour une lecture confortable */
main > p, .histoire > div, .humanitaire-grid > div { background: rgba(255, 248, 230, .95); border: 3px solid var(--nuit); border-radius: 14px; padding: .8rem 1.1rem; }
.humanitaire-grid > div > p:last-child, .histoire > div > p:last-child { margin-bottom: 0; }
main > p.note { background: none; border: 0; padding: 0; }