/* Guardia Explorer - Styles communs a toutes les pages */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
	--fond: #fef9f0;
	--fond-clair: #f8f3ea;
	--carte: #ffffff;
	--fond-gris: #f2ede4;
	--rouge: #d92b27;
	--rouge-fonce: #b50711;
	--noir: #1d1c16;
	--charbon: #242423;
	--gris: #5c403c;
	--bleu: #007c96;
	--ligne: #e7e2d9;
	--titre: 'Anton', Impact, sans-serif;
	--texte: 'Space Grotesk', Arial, sans-serif;
	--technique: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fond); color: var(--noir); font: 15px/1.6 var(--texte); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { line-height: 1.09; }
h1, h2, h3, .grand-titre { font-family: var(--titre); text-transform: uppercase; font-weight: 400; }
h1 { font-size: clamp(48px, 7.5vw, 100px); }
h2 { font-size: clamp(30px, 4.2vw, 52px); }
h3 { font-size: 26px; }
small { font-size: 12px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }
[hidden] { display: none !important; }
.conteneur { width: min(1200px, calc(100% - 64px)); margin: auto; }
.section { padding: 78px 0; }
.section-fond { background: var(--fond-clair); }
.surtitre { font: 700 11px/1.4 var(--technique); text-transform: uppercase; letter-spacing: 1.3px; color: var(--rouge); }
.surtitre-bleu { color: #65d6f2; }
.chapeau { max-width: 620px; color: var(--gris); margin-top: 14px; }
.mono { font-family: var(--technique); }
.muted { color: var(--gris); }
.rouge { color: var(--rouge); }
.ligne-titre { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.ligne-titre p { max-width: 400px; color: var(--gris); }

/* Entete commun */
.entete { position: sticky; top: 0; z-index: 100; background: rgba(254,249,240,.96); border-bottom: 1px solid var(--ligne); backdrop-filter: blur(12px); }
.entete-interieur { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo img { height: 62px; width: 70px; object-fit: contain; }
.navigation { display: flex; align-items: center; gap: 18px; }
.navigation a { font-size: 12px; font-weight: 700; text-transform: uppercase; padding: 8px 9px; transition: color .2s; }
.navigation a:hover, .navigation a.actif { color: var(--rouge); }
.navigation a.actif { background: var(--fond-gris); }
.navigation a.lien-dashboard { color: var(--rouge); border: 1px solid var(--rouge); border-radius: 3px; }
.navigation a.lien-dashboard.actif, .navigation a.lien-dashboard:hover { background: var(--rouge); color: white; }
.actions-entete { display: flex; align-items: center; gap: 12px; }
.compte-lien { border-radius: 50%; background: var(--rouge); color: white; height: 34px; width: 34px; display: grid; place-items: center; font-weight: 700; }
.menu-bouton { display: none; background: none; border: 0; font-size: 26px; }

/* Elements graphiques reutilisables */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 20px; border: 2px solid transparent; background: var(--rouge); color: white; font: 400 17px/1 var(--titre); text-transform: uppercase; border-radius: 3px; transition: transform .15s, background .15s; }
.bouton:hover { background: var(--rouge-fonce); transform: translateY(-2px); }
.bouton-noir { background: var(--noir); }
.bouton-noir:hover { background: #444; }
.bouton-clair { background: white; color: var(--noir); border-color: var(--ligne); }
.bouton-clair:hover { background: var(--fond-gris); }
.bouton-danger { background: #a51616; }
.bouton-petit { min-height: 36px; padding: 8px 15px; font-size: 14px; }
.bouton:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.lien-texte { font-weight: 700; text-transform: uppercase; border-bottom: 2px solid var(--rouge); font-size: 12px; }
.carte { padding: 24px; background: var(--carte); border: 1px solid var(--ligne); border-radius: 6px; }
.grille { display: grid; gap: 20px; }
.grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.etiquette { display: inline-block; padding: 5px 9px; color: var(--rouge); background: #ffefeb; text-transform: uppercase; letter-spacing: .4px; font: 700 10px var(--technique); border-radius: 2px; }
.etiquette-bleue { background: #e0f4f7; color: var(--bleu); }
.etiquette-noire { background: var(--noir); color: white; }
.image-carte { width: 100%; height: 190px; object-fit: cover; border-radius: 3px; }
.prix { font: 28px var(--titre); }
.separateur { border: 0; border-top: 1px solid var(--ligne); margin: 22px 0; }
.intro-page { padding: 66px 0 48px; background: var(--fond-clair); border-bottom: 1px solid var(--ligne); }
.intro-page h1 { font-size: clamp(44px, 6vw, 76px); margin: 8px 0; }
.intro-page p:last-child { max-width: 770px; color: var(--gris); }
.boite-sombre { background: var(--charbon); color: white; }
.stat { padding: 18px; background: rgba(255,255,255,.08); }
.stat strong { font: 25px var(--titre); display: block; }
.stat small { font: 10px var(--technique); text-transform: uppercase; }

/* Formulaires */
.formulaire { display: grid; gap: 16px; }
.champ { display: grid; gap: 7px; }
.champ label { font-weight: 700; font-size: 13px; }
.champ input, .champ select, .champ textarea { width: 100%; padding: 12px 13px; border: 1px solid #cfc7be; border-radius: 3px; background: #fff; color: var(--noir); }
.champ textarea { resize: vertical; min-height: 90px; }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.case-a-cocher { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.case-a-cocher input { margin-top: 5px; accent-color: var(--rouge); }
.erreur { color: #ae1818; font-weight: 700; }
.succes { color: #11685c; font-weight: 700; }
.message { padding: 12px 15px; background: var(--fond-gris); border-left: 4px solid var(--rouge); border-radius: 2px; }
.formulaire-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Pied de page commun */
.pied-page { background: var(--charbon); color: #ded9d1; padding: 52px 0 18px; }
.pied-colonnes { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; gap: 34px; }
.pied-page h3 { font-size: 20px; color: white; margin-bottom: 12px; }
.pied-page h4 { font: 700 10px var(--technique); color: white; letter-spacing: 1px; margin-bottom: 12px; }
.pied-page p, .pied-page a, .pied-page li { color: #aaa79f; font: 11px/1.8 var(--technique); }
.pied-page a:hover { color: white; }
.pied-page ul { list-style: none; margin: 0; padding: 0; }
.partenaire { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.partenaire span { border: 1px solid #474743; padding: 8px 5px; text-align: center; font: 9px var(--technique); }
.newsletter { display: flex; margin-top: 12px; }
.newsletter input { min-width: 0; width: 100%; border: 0; padding: 10px; background: #383834; color: white; font: 10px var(--technique); }
.newsletter button { border: 0; padding: 0 13px; background: var(--rouge); color: white; }
.pied-bas { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #42423f; margin-top: 34px; padding-top: 18px; }
.pied-bas p, .pied-bas a { font-size: 9px; }
.pied-bas div { display: flex; flex-wrap: wrap; gap: 14px; }

/* Notifications communes */
.notification { position: fixed; bottom: 22px; right: 22px; background: var(--noir); color: white; padding: 14px 20px; border-left: 4px solid var(--rouge); box-shadow: 0 6px 24px #0004; z-index: 999; max-width: 360px; }

@media (max-width: 1000px) {
	.conteneur { width: min(100% - 36px, 1200px); }
	.pied-colonnes { grid-template-columns: repeat(2, 1fr); }
	.navigation { gap: 3px; }
	.navigation a { font-size: 10px; }
	.grille-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	.entete-interieur { height: 68px; }
	.logo img { height: 52px; }
	.menu-bouton { display: block; }
	.navigation { display: none; position: absolute; top: 68px; left: 0; right: 0; padding: 15px 20px; background: var(--fond); border-bottom: 1px solid var(--ligne); flex-direction: column; align-items: stretch; }
	.navigation.ouverte { display: flex; }
	.actions-entete .bouton { font-size: 13px; padding: 8px 11px; min-height: 34px; }
	.section { padding: 48px 0; }
	.intro-page { padding: 45px 0 32px; }
	.grille-3, .grille-2, .champs-2 { grid-template-columns: 1fr; }
	.ligne-titre { display: block; }
	.ligne-titre p { margin-top: 12px; }
	.pied-colonnes { grid-template-columns: 1fr; gap: 25px; }
	.pied-bas { display: block; }
	.pied-bas div { margin-top: 14px; }
}

/* Connexion et inscription partagent le meme design */
.authentification { min-height: 70vh; }
.auth-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.auth-presentation { padding-top: 28px; }
.auth-presentation h1 { font-size: clamp(45px, 6vw, 75px); margin: 12px 0 20px; }
.auth-presentation > p { color: var(--gris); margin: 15px 0; }
.auth-carte { padding: 36px; }
.auth-carte h2 { margin-bottom: 15px; }
.auth-carte > p { margin: 0 0 20px; }
.auth-carte .formulaire > small { color: var(--gris); }
@media (max-width: 850px) { .auth-grille { grid-template-columns: 1fr; gap: 25px; } .auth-carte { padding: 24px; } }