/* L'EN-TÊTE, LE MENU ET LA BARRE DU POUCE (header() dans scripts/pages.mjs, scripts/footer.mjs, site/app.js).
   Pensé d'abord pour le téléphone, puis deux paliers : la tablette (760 px) et l'ordinateur (1280 px), où le menu
   tient sur une rangée autour du sceau avec les deux boutons. Le sceau reste au milieu de la page à chaque palier
   (demande d'Hakim) : en dessous de 1280 px, la rangée complète ne tiendrait pas sans le pousser. Noir et blanc, filets var(--line). Aucun mot inventé sur un bouton : le menu, sa fermeture et l'appel sont
   des icônes, nommées par leur aria-label. La barre noire et la rangée de l'en-tête partagent leur marge des côtés
   (--marge-entete, redéfinie à chaque palier) : leurs bords tombent l'un sous l'autre. */
:root{--entete-haut:104px;--entete-compacte:64px;--marge-entete:16px}
html{scroll-padding-top:24px}
html.menu-ouvert{overflow:hidden}

/* La barre utilitaire : au téléphone, seulement la phrase. */
.barre-utile{display:flex;align-items:center;justify-content:center;min-height:28px;padding:4px var(--marge-entete);background:#000;color:#fff;font-size:.75rem;line-height:1.4;letter-spacing:.02em;text-align:center}
.barre-utile nav{display:none}
.barre-utile a{color:#ffffffc7;text-decoration:none;transition:color .15s ease}
.barre-utile a:hover,.barre-utile a[aria-current]{color:#fff}
.barre-utile a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* L'en-tête du téléphone : l'appel, le sceau, le menu. Il n'est pas collant : la barre du pouce prend le relais.
   Sa rangée est la navigation principale (.nav-principale) : les liens des groupes n'y paraissent qu'à l'ordinateur. */
.header.entete{position:relative;z-index:20;display:block;width:auto;height:auto;margin:0;padding:0;gap:0;background:#fff;border-bottom:1px solid var(--line)}
.nav-principale{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;grid-template-areas:"gauche centre droite";align-items:center;height:60px;padding-inline:var(--marge-entete)}
.entete .logo{grid-area:centre;justify-self:center;display:block;margin:0;line-height:0}
.entete .logo img{width:44px;height:44px;object-fit:contain;mix-blend-mode:normal}
.entete .entete-appel{grid-area:gauche;justify-self:start;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;color:#000}
.nav-liens,.nav-droite,.entete .entete-creations{display:none}
/* Les boutons du menu : deux traits dans un rond. */
.menu-button,.pouce-menu{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;width:48px;height:48px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;transition:background-color .15s ease,border-color .15s ease}
.menu-button span,.pouce-menu span{display:block;width:20px;height:1px;background:#000}
.menu-button:hover,.pouce-menu:hover,.entete-appel:hover,.pouce-appel:hover,.menu-fermer:hover{background:var(--ivory);border-color:#000}
.entete .menu-button{grid-area:droite;justify-self:end}

/* LE MENU du téléphone et de la tablette, en plein écran. app.js rend la page derrière inerte et immobile. Il passe
   au-dessus de tout, bandeau des témoins compris (complements.css le masque tant que le menu est ouvert). La place de
   la barre de défilement est réservée : rien ne glisse de côté quand un groupe se déplie. */
.menu-panneau{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;background:#fff}
.menu-tete{position:relative;display:flex;align-items:center;justify-content:center;flex:none;height:104px;padding-inline:16px}
.menu-logo{display:block;line-height:0}
.menu-logo img{width:80px;height:80px}
.menu-tete .menu-fermer{position:absolute;right:16px;top:50%;transform:translateY(-50%)}
.menu-fermer{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:#000;transition:background-color .15s ease,border-color .15s ease}
/* Les noms principaux en noir, les occasions et les thèmes en gris, chacun sur sa ligne, entre deux filets fins. */
.menu-occasions{flex:none;margin:4px 24px 0}
.menu-liens{margin:0;padding:0;list-style:none}
.menu-liens>li{border-bottom:1px solid var(--line)}
.menu-liens a{display:flex;align-items:center;justify-content:space-between;min-height:60px;font:400 1.75rem/1.15 var(--serif);color:#000}
/* Gâteaux par occasions et Gâteaux par thèmes : leur nom mène à leur page de découverte, le « + » à droite ouvre leur
   liste (app.js ; sans script, la liste reste ouverte). */
.menu-groupe-tete{display:flex;align-items:center;gap:12px}
.menu-groupe-tete>a{flex:1;min-width:0}
.menu-groupe-bouton{display:flex;flex:none;padding:0;border:0;background:none;color:#000;cursor:pointer}
html.js .menu-groupe:not(.ouvert)>.menu-sous{display:none}
/* Le « + », qui devient « − » quand la liste est ouverte. */
.menu-plus{position:relative;flex:none;width:44px;height:44px;margin-right:-12px}
.menu-plus::before,.menu-plus::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1px;background:#000;transform:translate(-50%,-50%)}
.menu-plus::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .15s ease}
.menu-groupe.ouvert .menu-plus::after{transform:translate(-50%,-50%) rotate(0)}
.menu-sous{margin:0 0 14px;padding:0;list-style:none}
.menu-sous a{display:flex;align-items:center;min-height:44px;font:400 1rem/1.3 var(--sans);color:var(--muted)}
.menu-sous a:hover,.menu-sous a:focus-visible,.menu-sous a[aria-current]{color:#000}
.menu-liens a{justify-content:flex-start}
/* La page en cours : un léger fond ivoire derrière le lien. */
.menu-panneau a[aria-current]{position:relative;isolation:isolate}
.menu-panneau a[aria-current]::after{content:"";position:absolute;inset:6px -12px;z-index:-1;background:var(--ivory)}
/* Les liens utiles, en petit, centrés, l'un sous l'autre. */
.menu-rapides{display:flex;flex-direction:column;align-items:center;flex:none;margin:12px 16px 24px;padding:0;list-style:none}
.menu-rapides a{display:flex;align-items:center;min-height:44px;font-size:.9375rem;line-height:1.3;color:var(--muted)}
.menu-rapides a:hover,.menu-rapides a:focus-visible{color:#000}
/* Les deux boutons, sous les liens, l'un sous l'autre. */
.menu-pied{display:grid;gap:10px;flex:none;margin:24px 24px 0}
.menu-pied .button{width:100%;margin:0}

/* LA BARRE DU POUCE, au téléphone seulement. Elle se retire tant que les boutons du héros sont à l'écran (app.js) ;
   sans script, elle est toujours là. */
.mobile-order{display:none}
@media(max-width:759.98px){
 .mobile-order{position:fixed;left:0;right:0;bottom:0;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:calc(var(--entete-compacte) + env(safe-area-inset-bottom));padding:7px 16px calc(8px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line)}
 .mobile-order>.button{flex:1;min-width:0;min-height:48px;padding:10px 14px;font-size:.9375rem}
 .pouce-appel{display:grid;place-items:center;flex:none;width:48px;height:48px;border:1px solid var(--line);border-radius:50%;color:#000}
 .pouce-menu{flex:none}
 html.js .mobile-order{transition:transform .2s ease,visibility .2s}
 html.js .mobile-order:not(.mobile-order--visible){transform:translateY(100%);visibility:hidden}
 html.menu-ouvert .mobile-order,body.dialog-open .mobile-order{display:none}
 /* La fin de la page n'est jamais cachée sous la barre : la réserve suit sa hauteur, mesurée par app.js (la marge
    du bas de l'iPhone y est déjà comprise) ; avant la mesure, sa hauteur d'une ligne. */
 body:has(>.mobile-order){padding-bottom:var(--mobile-order-height,calc(var(--entete-compacte) + env(safe-area-inset-bottom)))}
 body:not(:has(>.mobile-order)){padding-bottom:0}
 /* Le retour en haut ne vient qu'à partir de la tablette. */
 .back-to-top{display:none}
}
/* Sous 360 px, « Demander une soumission » tient sur une ligne, dans la barre du pouce comme dans la visionneuse. */
@media(max-width:359.98px){
 .mobile-order>.button,#photo-dialog .dialog-actions .button{font-size:.875rem;padding-inline:10px;white-space:nowrap}
}

/* LA TABLETTE (760 px et plus) : la barre utilitaire avec le téléphone et les liens rapides ; un en-tête collant
   de 72 px avec le menu, le sceau et « Demander une soumission » (le téléphone, sur la page du formulaire). */
@media(min-width:760px){
 :root{--marge-entete:max(24px,4vw)}
 html{scroll-padding-top:128px}
 .barre-utile{justify-content:space-between;gap:20px;min-height:36px;padding:0 var(--marge-entete);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
 /* Plus de téléphone dans la barre (demande d'Hakim, 10 oct.) : la phrase à gauche, les liens rapides à droite. */
 .barre-utile p{display:block;margin:0;padding-block:9px}
 .barre-utile nav{display:flex;gap:20px}
 .barre-utile nav a{padding-block:9px}
 .header.entete{position:sticky;top:0}
 .nav-principale{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);height:72px;padding-inline:var(--marge-entete)}
 .entete .entete-appel{display:none}
 .entete .menu-button{grid-area:gauche;justify-self:start}
 .entete .logo img{width:56px;height:56px}
 .nav-droite{display:flex;grid-area:droite;align-items:center;justify-content:flex-end}
 .entete .entete-soumission{max-width:200px;min-height:48px;padding:10px 18px;font-size:.875rem;line-height:1.3;white-space:normal}
 .menu-panneau{padding-inline:max(0px,calc((100% - 640px) / 2))}
}

/* L'ORDINATEUR (1280 px et plus) : une seule rangée, en trois colonnes. À gauche du sceau, et serrés contre lui,
   Mariages, Naissance et Anniversaires ; le sceau au centre ; à sa droite, Réceptions et La maison Adélice, puis le
   bouton noir, au bout de la rangée. À partir de 1280 px, la colonne de droite, la plus chargée, tient dans sa
   moitié : le sceau est au milieu de la page. Le menu plein écran n'y sert plus. */
@media(min-width:1280px){
 :root{--entre-liens:clamp(16px,1.5vw,32px);--autour-du-sceau:clamp(20px,2vw,44px);--marge-entete:clamp(24px,2.5vw,64px)}
 .nav-principale{grid-template-columns:1fr auto 1fr;column-gap:var(--autour-du-sceau);height:var(--entete-haut);padding-inline:var(--marge-entete)}
 .entete .menu-button{display:none}
 /* La colonne du sceau garde sa largeur quand l'en-tête se compacte : seule l'image rétrécit, les liens ne bougent pas. */
 .entete .logo{display:flex;justify-content:center;width:84px}
 .entete .logo img{width:84px;height:84px}
 .nav-liens{display:flex;gap:var(--entre-liens);margin:0;padding:0;list-style:none}
 .nav-gauche{grid-area:gauche;justify-self:end}
 /* Les liens occupent toute la hauteur de la rangée. */
 .nav-gauche,.nav-droite,.nav-droite .nav-liens{align-self:stretch}
 /* La colonne de droite : ses liens contre le sceau, les boutons poussés au bout de la rangée. */
 .nav-droite{justify-content:flex-start;gap:10px}
 .nav-droite .nav-liens{margin-right:auto;padding-right:var(--entre-liens)}
 .entete .entete-soumission{max-width:none;padding:10px 20px;white-space:nowrap}
 .menu-panneau{display:none!important}

 .nav-liens>li{display:flex;align-items:center}
 .nav-liens>li>a{position:relative;display:flex;align-items:center;min-height:44px;font:500 .8125rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:#000}
 /* La page et le groupe en cours : un léger fond ivoire derrière le lien ; au survol, il paraît à peine. */
 .nav-liens>li>a,.nav-deroulant{isolation:isolate}
 .nav-liens>li>a::after,.nav-deroulant::before{content:"";position:absolute;inset:6px -8px;z-index:-1;background:var(--ivory);opacity:0;transition:opacity .2s ease}
 .nav-liens>li>a.nav-deroulant-lien::after{content:none}
 .nav-liens>li>a:hover::after,.nav-liens>li>a:focus-visible::after,.nav-deroulant:hover::before{opacity:.6}
 .nav-liens>li>a[aria-current]::after,.nav-deroulant.nav-actif::before{opacity:1}
 /* Gâteaux par occasions et Gâteaux par thèmes : leur nom, un lien comme les autres de la rangée, mène à leur page de
    découverte (demande d'Hakim, 11 oct.) ; la petite flèche à côté, un bouton, ouvre leur liste, qui s'ouvre aussi au
    survol et au focus, texte seulement, et se ferme par Échap (app.js). Le fond ivoire couvre le nom et la flèche. */
 .nav-deroulant{position:relative;align-self:center}
 .nav-deroulant-bouton{position:relative;display:flex;align-items:center;justify-content:center;width:24px;min-height:44px;padding:0;border:0;background:none;color:#000;cursor:pointer}
 .nav-deroulant-bouton::after{content:"";width:6px;height:6px;margin-top:-4px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);transition:transform .15s ease}
 .nav-deroulant-bouton[aria-expanded=true]::after{transform:translateY(3px) rotate(225deg)}
 .nav-liste{display:none;position:absolute;left:-20px;top:calc(100% + 6px);z-index:30;min-width:260px;margin:0;padding:10px 0;list-style:none;background:#fff;border:1px solid var(--line);box-shadow:0 12px 24px #0000000f}
 .nav-deroulant:hover>.nav-liste,.nav-deroulant:focus-within>.nav-liste,.nav-deroulant.ouvert>.nav-liste{display:block}
 .nav-deroulant.ferme>.nav-liste{display:none}
 .nav-liste::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:8px}
 .nav-liste a{display:block;padding:9px 20px;font-size:.9375rem;line-height:1.4;white-space:nowrap;color:#000}
 .nav-liste a:hover,.nav-liste a:focus-visible,.nav-liste a[aria-current]{background:var(--ivory)}

 /* L'en-tête compact : la même rangée, ramenée à 64 px, avec le petit sceau. Le repère grandit d'autant : la page
    ne saute pas. */
 .entete--compacte .nav-principale{height:var(--entete-compacte)}
 .entete--compacte .logo img{width:44px;height:44px}
 .entete--compacte .nav-droite>.button{min-height:44px;padding-block:8px}
 .entete--compacte+.entete-repere{height:calc(var(--entete-haut) - var(--entete-compacte))}
}
/* « DÉCOUVRIR NOS CRÉATIONS » rejoint le bouton noir à partir de 1280 px (demande d'Hakim). De 1280 à 1365 px, les deux
   boutons se serrent un peu : la colonne de droite tient dans sa moitié et le sceau reste au milieu de la page. */
@media(min-width:1280px){
 .entete .entete-creations{display:inline-flex;min-height:48px;padding:10px 16px;font-size:.875rem;white-space:nowrap}
 /* Sur la galerie, « Découvrir nos créations » est la page en cours : le bouton prend un fond ivoire, sans soulignement. */
 .entete .entete-creations[aria-current]{border-color:#000;background:var(--ivory)}
}
@media(min-width:1280px) and (max-width:1365.98px){
 .entete .entete-creations,.entete .entete-soumission{padding-inline:12px}
 .nav-droite{gap:8px}
}
@media(prefers-reduced-motion:reduce){
 .menu-button,.pouce-menu,.menu-fermer,.nav-liens>li>a::after,.nav-deroulant::before,.nav-deroulant-bouton::after,.menu-plus::after,html.js .mobile-order{transition:none}
}
/* LA BARRE DU HAUT SUR TABLETTE (11 oct.) : entre 760 et 900 px, la phrase et les trois liens ne tiennent pas sur une
   ligne (la page débordait) ; la phrase s'efface, les liens restent, centrés. La phrase est aussi dans le bandeau des
   secteurs, en bas de chaque page. */
@media(min-width:760px) and (max-width:899.98px){.barre-utile{justify-content:center}.barre-utile p{display:none}}