/* public/cadre.css - S113. Le CADRE du site AGIREDOM (jetons du DNA, bandeau, pied), dans un fichier a part
   pour qu'une page de projet (la page de presentation du Corpus, servie par app/[lang]/proyectos/[id]/route.ts)
   porte le MEME bandeau et le MEME pied que les autres pages. Regles deplacees de app/globals.css a l'identique,
   plus le bloc "page de projet" en fin de fichier. */
:root {
  --dna-chaux: #f5f6f2; --dna-blanc: #ffffff; --dna-encre: #12303a; --dna-encre-2: #3b5560; --dna-brume: #6b7f86;
  --dna-lagune: #17807c; --dna-lagune-clair: #d8ece9; --dna-palme: #2d5a43; --dna-sable: #e3dccd; --dna-filet: #d6dbd6;
  --dna-nuit: #0f2229; --dna-or: #b08a3c; --dna-or-clair: #fbf7ec; --dna-or-texte: #8a6a1f;
  --dna-dispo: #17807c; --dna-reserve: #b7791f; --dna-vendu: #a3aeb3; --dna-bloque: #7c8a90; --dna-alerte: #b3261e;
  --dna-serif: "Marcellus", Georgia, "Times New Roman", serif;
  --dna-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --large: 1180px;
}

.ag-cadre { max-width: var(--large); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .ag-cadre { padding: 0 16px; } }

/* Tete */
.ag-tete { background: var(--dna-nuit); color: #fff; position: sticky; top: 0; z-index: 10; }
.ag-tete .ag-cadre { display: flex; align-items: center; gap: 28px; height: 64px; }
.ag-marque { font: 400 22px var(--dna-serif); letter-spacing: .12em; text-decoration: none; color: #fff; }
.ag-marque small { display: block; font: 600 9px var(--dna-sans); letter-spacing: .22em; color: #8fa6ab; margin-top: -2px; }
.ag-nav { display: flex; gap: 22px; flex: 1; }
.ag-nav a { text-decoration: none; font: 600 13px var(--dna-sans); color: #cfdcdc; }
.ag-nav a:hover, .ag-nav a.actif { color: #fff; }
.ag-langues { display: flex; gap: 4px; }
.ag-langues a { text-decoration: none; font: 700 11px var(--dna-sans); letter-spacing: .08em; color: #8fa6ab; padding: 4px 7px; border-radius: 4px; }
.ag-langues a.actif { color: var(--dna-nuit); background: #fff; }
@media (max-width: 900px) { .ag-nav { display: none; } .ag-tete .ag-cadre { justify-content: space-between; } }
.ag-nav-mobile { display: none; background: var(--dna-nuit); border-top: 1px solid rgba(255,255,255,.08); overflow-x: auto; }
.ag-nav-mobile .ag-cadre { display: flex; gap: 18px; height: 42px; align-items: center; white-space: nowrap; }
.ag-nav-mobile a { text-decoration: none; font: 600 12.5px var(--dna-sans); color: #cfdcdc; }
@media (max-width: 900px) { .ag-nav-mobile { display: block; } }

.ag-pied { background: var(--dna-nuit); color: #a8bbbd; padding: 44px 0 30px; margin-top: 0; font-size: 13.5px; }
.ag-pied .ag-cadre { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
.ag-pied h4 { color: #fff; font: 700 11px var(--dna-sans); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; }
.ag-pied a { color: #cfdcdc; text-decoration: none; display: block; margin-bottom: 6px; }
.ag-pied .bas { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.08); padding-top: 18px; margin-top: 10px; font-size: 12px; }
@media (max-width: 760px) { .ag-pied .ag-cadre { grid-template-columns: 1fr; } }

/* Page de projet (S113) : la page de presentation garde ses propres styles ; le cadre se protege de ses regles
   generales (elle n'a pas la remise a zero du site) et le bandeau du site defile, la barre du projet reste. */
:where(.ag-tete, .ag-nav-mobile, .ag-pied) * { box-sizing: border-box; margin: 0; padding: 0; }   /* :where = sans poids : les classes du cadre gagnent */
.ag-tete, .ag-nav-mobile, .ag-pied { font: 15px/1.55 var(--dna-sans); }
.ag-sur-projet .ag-tete { position: static; }
.ag-sur-projet .ag-pied { margin-top: 0; }
/* La page de presentation occupe toute la largeur : le cadre s'aligne sur ses marges (--marge du gabarit). */
.ag-sur-projet .ag-tete .ag-cadre, .ag-sur-projet .ag-nav-mobile .ag-cadre, .ag-sur-projet .ag-pied .ag-cadre { max-width: none; padding: 0 var(--marge, 22px); }