/* Surcouche du thème « métiers » (config/sites.php, clé surcouche) : l'accueil en classeur. Les autres thèmes ne chargent pas ce fichier. Une reliure à anneaux à gauche, chaque bloc est un intercalaire dont l'onglet (texte de data-onglet) dépasse en haut.
   Tout est limité à la page d'accueil (data-page="arrivage"). Pour retirer le classeur : supprimer la clé surcouche du site dans config/sites.php. */
body{--cl:#002D62;--cl-papier:#fff;--cl-ligne:#E8EEF6;--rel1:#00234f;--rel2:#002D62;--rel3:#0a3a78}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body{--cl:#7FA6E0;--cl-papier:var(--surface);--cl-ligne:rgba(127,166,224,.08);--rel1:#1d4f91;--rel2:#2a62ad;--rel3:#3a74c0}}
:root[data-theme="dark"] body{--cl:#7FA6E0;--cl-papier:var(--surface);--cl-ligne:rgba(127,166,224,.08);--rel1:#1d4f91;--rel2:#2a62ad;--rel3:#3a74c0}

/* La reliure */
.zone>.page{position:relative;gap:18px;padding-left:60px;padding-right:18px;padding-top:24px}
.zone>.page::before{content:"";position:absolute;left:0;top:14px;bottom:0;width:38px;border-radius:6px 0 0 6px;pointer-events:none;
  background-color:var(--rel2);background-image:radial-gradient(circle at 19px 120px,var(--papier) 0 7px,rgba(0,0,0,.5) 8px,transparent 9px),linear-gradient(90deg,var(--rel1),var(--rel2) 60%,var(--rel3));background-size:38px 260px,100% 100%;background-repeat:repeat-y,no-repeat}
@media (max-width:640px){.zone>.page{padding-left:36px;padding-right:12px}.zone>.page::before{width:20px;background-image:radial-gradient(circle at 10px 110px,var(--papier) 0 5px,rgba(0,0,0,.5) 6px,transparent 7px),linear-gradient(90deg,var(--rel1),var(--rel2) 60%,var(--rel3));background-size:20px 240px,100% 100%}}

/* Les intercalaires */
.zone .duo{gap:18px 22px}
.zone [data-onglet]{position:relative;margin-top:46px;overflow:visible;padding:20px 18px 18px;
  background:repeating-linear-gradient(transparent 0 25px,var(--cl-ligne) 25px 26px),var(--cl-papier);
  border:2px solid var(--cl);border-radius:0 12px 12px 12px;box-shadow:3px 4px 0 -1px color-mix(in srgb,var(--cl) 20%,transparent)}
.zone [data-onglet]::before{content:attr(data-onglet);position:absolute;left:var(--tab-x,-2px);top:-31px;max-width:calc(100% - var(--tab-x,0px) - 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:6px 15px 5px;background:var(--tab,var(--cl));color:#fff;font:700 14px/1.2 var(--titre);border:2px solid var(--tab,var(--cl));border-bottom:0;border-radius:10px 10px 0 0}
:root:not([data-theme="light"]) .zone [data-onglet]::before{color:#fff}
[data-page="arrivage"] .action-une{--tab:var(--orange-fort);--tab-x:-2px}
[data-page="arrivage"] .progres{--tab-x:110px}
[data-page="arrivage"] .hero--arrivage{--tab-x:-2px}
[data-page="arrivage"] .hero--jour{--tab-x:-2px;--tab:var(--r4)}
[data-page="arrivage"] .nouveautes{--tab-x:190px;--tab:var(--r2)}
[data-page="arrivage"] .boutique-section{--tab-x:60px;--tab:var(--c-debut,#D9762B)}
@media (max-width:520px){[data-page="arrivage"] .progres{--tab-x:70px}[data-page="arrivage"] .nouveautes{--tab-x:100px}[data-page="arrivage"] .boutique-section{--tab-x:40px}}

/* Détails propres à chaque feuille */
.zone .progres[data-onglet] .progres__tete h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}   /* le titre est l'onglet ; il reste lisible par les lecteurs d'écran */
[data-page="arrivage"] .hero--arrivage .hero__ruban{display:none}
[data-page="arrivage"] .hero__ruban{margin:0 0 4px;min-height:0;padding:0;background:none;color:var(--doux);font-size:12px;letter-spacing:.1em}
[data-page="arrivage"] .hero__ruban--date{background:none;color:var(--orange-texte)}
[data-page="arrivage"] .hero__ruban--date strong{font-size:24px}
[data-page="arrivage"] .action-une--limite{--tab:var(--doux)}
[data-page="arrivage"] .nouveautes,[data-page="arrivage"] .boutique-section{padding-top:22px}
[data-page="arrivage"] .progres__tete{justify-content:flex-end}

/* Les 5 cartes de la semaine : de l'air autour des cartes (elles ne touchent plus le bord de la feuille) */
[data-page="arrivage"] .nouveautes{padding:26px 28px 24px}
[data-page="arrivage"] .nouveautes__liste{gap:20px 18px;padding:10px 6px 14px}
@media (max-width:520px){[data-page="arrivage"] .nouveautes{padding:24px 18px 20px}[data-page="arrivage"] .nouveautes__liste{gap:18px 14px;padding:8px 4px 10px}}

/* Pas de bloc dans un bloc : dans la feuille « Boutique », la bande des pochettes à ouvrir perd son cadre */
/* (la bande des pochettes à ouvrir est maintenant dans le bloc « Pochettes » : voir pages.css) */

/* ===== Toutes les pages : onglets et titres ===== */
/* Le titre d'un bloc est repris par son onglet : il reste lisible par les lecteurs d'écran seulement */
.zone [data-onglet-titre]>h2:first-child,.zone [data-onglet-titre]>header>h2:first-child,.zone [data-onglet-titre] .section-album__tete h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.zone .section-album__tete h2::before{display:none}
.zone .section-album[data-onglet]{--tab:var(--cat)}
.zone .section-album__tete{border-bottom:0;padding-bottom:0;justify-content:flex-end}
/* Décalage et couleur des onglets, par ordre d'apparition (poids nul : une règle propre à un bloc l'emporte toujours) */
:where(.zone>.page>[data-onglet]:nth-child(3n+2)){--tab-x:96px}
:where(.zone>.page>[data-onglet]:nth-child(3n+3)){--tab-x:190px}
:where(.zone>.page>[data-onglet]:nth-child(4n+2)){--tab:var(--orange-fort)}
:where(.zone>.page>[data-onglet]:nth-child(4n+3)){--tab:var(--r2)}
:where(.zone>.page>[data-onglet]:nth-child(4n+4)){--tab:var(--r4)}
.zone .progres[data-onglet]{--tab-x:110px}
.zone .alertes[data-onglet],.zone .classement[data-onglet],.zone form[data-onglet],.zone p.vide[data-onglet]{margin-left:0;margin-right:0}
.zone ul.alertes[data-onglet],.zone ol.classement[data-onglet]{list-style:none}

/* Marché : les onglets du marché sont de vrais intercalaires, le panneau actif est la feuille */
.zone .onglets{border-bottom:0;margin-top:46px;gap:4px;position:relative;z-index:1;align-items:flex-end}
.zone .onglet{border:2px solid var(--cl);border-bottom:0;border-radius:10px 10px 0 0;background:color-mix(in srgb,var(--cl) 9%,var(--cl-papier));color:var(--doux);margin-bottom:-2px;padding:9px 14px 7px}
.zone .onglet[aria-selected="true"]{background:var(--cl-papier);color:var(--cl);border-bottom:2px solid var(--cl-papier);position:relative;z-index:2}
.zone .onglet[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--cl-papier)}
.zone [role="tabpanel"]{background:repeating-linear-gradient(transparent 0 25px,var(--cl-ligne) 25px 26px),var(--cl-papier);border:2px solid var(--cl);border-radius:0 12px 12px 12px;padding:18px;box-shadow:3px 4px 0 -1px color-mix(in srgb,var(--cl) 20%,transparent)}
@media (max-width:520px){.zone .onglets{gap:2px}.zone .onglet{padding:8px 2px 8px}}

.zone [role="tabpanel"] .vide{display:grid;justify-items:center;gap:10px;text-align:center}
:where(.profil__col>[data-onglet]:nth-child(3n+2)){--tab-x:96px}
:where(.profil__col>[data-onglet]:nth-child(3n+3)){--tab-x:150px}
:where(.profil__col>[data-onglet]:nth-child(4n+2)){--tab:var(--orange-fort)}
:where(.profil__col>[data-onglet]:nth-child(4n+3)){--tab:var(--r2)}
:where(.profil__col>[data-onglet]:nth-child(4n+4)){--tab:var(--r4)}

/* La barre de recherche de l'album (collante, pleine largeur) suit les marges de la page à reliure */
.zone>.page>.outils{margin-left:-60px;margin-right:-18px;padding-left:60px;padding-right:18px}
@media (max-width:640px){.zone>.page>.outils{margin-left:-36px;margin-right:-12px;padding-left:36px;padding-right:12px}}

/* La reliure passe devant la barre de recherche collante de l'album (le fond de la barre ne la recouvre plus) */
.zone>.page::before{z-index:16}

/* De l'air autour des cartes, sur toutes les pages : feuilles plus larges et cartes plus espacées */
.zone [data-onglet]:has(.cartes-grille){padding:26px 28px 24px}
.zone .cartes-grille{gap:22px 18px;padding:8px 6px 12px}
@media (max-width:520px){.zone [data-onglet]:has(.cartes-grille){padding:22px 16px 18px}.zone .cartes-grille{gap:18px 12px;padding:6px 2px 10px}}
.zone [role="tabpanel"]{padding:24px 26px}
.zone .souhaits,.zone .encheres{gap:20px 18px}
@media (max-width:520px){.zone [role="tabpanel"]{padding:20px 16px}}
/* Le compte de cartes est dans l'onglet : le texte de l'en-tête reste pour les lecteurs d'écran seulement */
.zone .section-album__compte{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* Les onglets du marché touchent la feuille (le gap de la page les en séparait) */
.zone .onglets{margin-bottom:-20px}

/* Onglets du marché : les onglets inactifs reposent sur le trait du cadre (sans le recouvrir), seul l'onglet actif l'interrompt ; moins d'espace au-dessus */
.zone .onglets{margin-top:14px;margin-bottom:-18px}
.zone .onglet{margin-bottom:0}
.zone .onglet[aria-selected="true"]{margin-bottom:-2px}

/* Feuille « Pochettes » : de l'air autour des piles (les pochettes ne touchent plus les bords de la feuille) */
.zone .action-une{padding:26px 28px 26px}
@media (max-width:520px){.zone .action-une{padding:22px 18px 22px}}

/* Pied de page : le dos du classeur (marine plein, onglets colorés pour les titres de colonnes, anneaux en filigrane) */
.pied-site{background:#002D62;border-top:0;color:#fff;position:relative}
.pied-site::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--orange) 0 25%,var(--r2) 25% 50%,var(--r4) 50% 75%,#2F8F9D 75%)}
.pied-site .marque,.pied-site .pied__marque{color:#fff}
.pied-site .marque__theme{color:#FF9A57}
.pied__bloc--marque p{color:rgba(255,255,255,.8)}
.pied__titre{display:inline-block;padding:5px 13px 4px;border-radius:9px 9px 0 0;background:var(--orange-fort);color:#fff;letter-spacing:.04em;text-transform:none;font-size:14px;margin-bottom:12px}
.pied__bloc:nth-of-type(2) .pied__titre{background:var(--r2)}
.pied__bloc:nth-of-type(3) .pied__titre{background:var(--r4)}
.pied-site a[aria-current]{color:#fff;text-decoration:underline;text-underline-offset:3px}
.pied__theme .marque__theme{color:#FF9A57}
.pied__bas{border-top-color:rgba(255,255,255,.2)}
.pied__bas p{color:rgba(255,255,255,.75)}
.pied-site a:focus-visible{outline-color:#FF9A57}