/* Layout : barre info, header, méga-menu, tiroir mobile, fil d'Ariane, newsletter, footer. Spec : architecture/navigation-header.md et footer.md */

.hd { background: var(--sg-papier); border-bottom: 1px solid var(--sg-ecume); position: sticky; top: 0; z-index: 20; }
.hd > .wrap { display: flex; align-items: center; gap: var(--sg-6); height: 72px; }
.logo { font: 600 24px/1 var(--sg-logo); letter-spacing: .5px; white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }
.nav { display: flex; gap: 28px; font-weight: 500; font-size: 15px; height: 100%; }
.nav > li { display: flex; align-items: center; }
.nav > li > a { padding-block: 6px; border-bottom: 2px solid transparent; }
.nav > li > a:hover, .nav > li > a[aria-current] { border-color: var(--sg-sceau); }
.outils { margin-left: auto; display: flex; gap: var(--sg-5); font-size: 15px; align-items: center; white-space: nowrap; }
.loupe { width: 17px; height: 17px; border: 1.5px solid currentColor; border-radius: 50%; display: inline-block; vertical-align: -3px; margin-right: 6px; position: relative; }
.loupe::after { content: ""; position: absolute; width: 7px; height: 1.5px; background: currentColor; right: -6px; bottom: -2px; transform: rotate(45deg); }

.a-mega { position: static; }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--sg-blanc); border-bottom: 1px solid var(--sg-ecume); display: none; }
.a-mega:hover .mega, .a-mega:focus-within .mega { display: block; }
.mega .motifs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sg-5); padding-top: var(--sg-5); }
.mega img { aspect-ratio: 1; object-fit: cover; border: 1px solid var(--sg-ecume); width: 100%; }
.mega h3 { font-size: 17px; margin-top: var(--sg-2); }
.mega .bas { display: flex; justify-content: space-between; margin-top: var(--sg-5); padding-block: 18px 22px; border-top: 1px solid var(--sg-ecume); font-size: 15px; }
.mega .bas span { display: flex; gap: var(--sg-5); color: var(--sg-gris); }

.burger { display: none; }
@media (max-width: 1023px) {
  .hd > .wrap { height: 56px; gap: var(--sg-3); }
  .nav, .outils .txt { display: none; }
  .burger { display: block; }
  .logo { font-size: 20px; margin-inline: auto; }
  .outils { margin-left: 0; gap: var(--sg-4); }
}
.burger summary { list-style: none; cursor: pointer; font-size: 22px; line-height: 1; padding: 8px 4px; }
.burger summary::-webkit-details-marker { display: none; }
.tiroir { position: absolute; left: 0; right: 0; top: 56px; background: var(--sg-papier); border-bottom: 1px solid var(--sg-ecume); padding: 4px var(--sg-gouttiere) var(--sg-5); max-height: calc(100vh - 56px); overflow: auto; }
.tiroir a, .tiroir .titre { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--sg-ecume); font-weight: 500; min-height: 48px; }
.tiroir .vignettes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px 0; border: 0; }
.tiroir .vignettes img { aspect-ratio: 1; object-fit: cover; border: 1px solid var(--sg-ecume); }
.tiroir .second { color: var(--sg-gris); font-weight: 400; }

.ariane { font-size: var(--sg-t-legende); color: var(--sg-gris); padding-block: 14px; }
.ariane a { color: var(--sg-lien); }
@media (max-width: 767px) { .ariane .complet { display: none; } }
.ariane .court { display: none; }
@media (max-width: 767px) { .ariane .court { display: inline; } }

.news { background: var(--sg-ecume); }
.news .wrap { display: flex; align-items: center; gap: var(--sg-7); padding-block: var(--sg-7); }
.news p { font-size: var(--sg-t-legende); color: var(--sg-gris); margin-top: 6px; }
.news form { display: flex; gap: 10px; margin-left: auto; }
.news input { width: 280px; }

.ft { background: var(--sg-encre); color: var(--sg-papier); }
.ft .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sg-6); padding-block: 56px 40px; }
.ft h3, .ft summary { font: 600 15px var(--sg-sans); margin-bottom: 12px; }
.ft li { font-size: 15px; line-height: 2.1; color: var(--sg-ecume); }
.ft li a:hover { color: var(--sg-papier); text-decoration: underline; }
.ft .promesse { color: var(--sg-ecume); margin: 14px 0; max-width: 30ch; }
.ft .res { display: flex; gap: 14px; font-size: 14px; color: var(--sg-lien-sombre); }
.ft details summary { list-style: none; pointer-events: none; }
.ft details summary::-webkit-details-marker { display: none; }
.legal { display: flex; flex-wrap: wrap; gap: var(--sg-5); align-items: center; border-top: 1px solid #2E4566; padding-block: 20px; font-size: var(--sg-t-legende); color: var(--sg-ecume); }
.legal .paiement { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.legal .paiement span { border: 1px solid #2E4566; padding: 3px 8px; }
@media (max-width: 767px) {
  .news .wrap { flex-direction: column; align-items: stretch; gap: var(--sg-4); padding-block: var(--sg-6); }
  .news form { margin: 0; flex-direction: column; } .news input { width: 100%; }
  .ft .cols { grid-template-columns: 1fr; gap: 0; padding-block: var(--sg-6) var(--sg-2); }
  .ft .cols > div:first-child { padding-bottom: var(--sg-4); }
  .ft details { border-top: 1px solid #2E4566; }
  .ft details summary { pointer-events: auto; cursor: pointer; padding: 14px 0; margin: 0; display: flex; justify-content: space-between; }
  .ft details summary::after { content: "+"; }
  .ft details[open] summary::after { content: "–"; }
  .ft details ul { padding-bottom: var(--sg-3); }
  .legal { gap: 12px 20px; } .legal .paiement { margin: 0; }
}

/* Recherche du header : bouton qui ouvre un champ */
.rech { position: relative; }
.rech summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; }
.rech summary::-webkit-details-marker { display: none; }
.rech form { position: absolute; right: 0; top: 100%; margin-top: 8px; display: flex; gap: 8px; background: var(--sg-blanc); border: 1px solid var(--sg-ecume); padding: var(--sg-3); width: min(380px, calc(100vw - 2 * var(--sg-gouttiere))); z-index: 40; }
.rech input[type="search"] { flex: 1; min-width: 0; height: 44px; border: 1px solid var(--sg-champ); border-radius: var(--sg-rayon); padding: 0 12px; background: var(--sg-blanc); }
.rech .btn { min-height: 44px; padding: 0 16px; }
/* Mobile et tablette : le panneau s'accroche au bas du header (sticky), quelle que soit la barre d'information */
@media (max-width: 1023px) { .rech { position: static; } .rech form { left: var(--sg-gouttiere); right: var(--sg-gouttiere); top: 100%; width: auto; margin-top: 0; } }

/* Newsletter : consentement et message sur leur propre ligne ; champ piège hors écran */
.news form { flex-wrap: wrap; align-items: center; max-width: 560px; }
.news form .case, .news form .aide { flex-basis: 100%; margin: 0; }
.news .piege { position: absolute; left: -9999px; }
.news form input[type="email"] { flex: 1; min-width: 200px; }
@media (max-width: 767px) { .news form { max-width: none; } }
.lien-bouton { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.lien-bouton:hover { text-decoration: underline; }

/* Newsletter : en colonne dès la tablette, le formulaire (avec sa case de consentement) est trop large pour partager la ligne */
@media (max-width: 1023px) {
  .news .wrap { flex-direction: column; align-items: stretch; gap: var(--sg-4); }
  .news form { margin: 0; max-width: none; }
}

/* En-tête : le sceau élargit le logo, resserrer entre 1024 et 1199 px et sous 390 px */
@media (min-width: 1024px) and (max-width: 1199px) { .hd > .wrap { gap: var(--sg-4); } .nav { gap: 18px; } .outils { gap: var(--sg-4); } }
@media (max-width: 389px) { .logo { font-size: 16px; gap: 6px; } .logo .sceau { width: 22px; height: 22px; font-size: 13px; } .hd > .wrap { gap: var(--sg-2); } .outils { gap: var(--sg-3); } }
@media (max-width: 339px) { .burger summary { padding-inline: 0; } .outils { gap: var(--sg-2); font-size: 14px; } }