blink{animation:blinker .6s linear infinite;color:#1c87c9}@keyframes blinker{50%{opacity:0}}.blink-one{animation:blinker-one 20s linear infinite}@keyframes blinker-one{0%{opacity:.82}}@media (prefers-reduced-motion:reduce){.blink-one{animation:none}}.blink-two{animation:blinker-two 1.4s linear infinite}@keyframes blinker-two{100%{opacity:0}}h1{width:100%;grid-column:1/span3}form{display:contents}.debugStyle{line-height:24px;padding:2px;font-size:1.1rem;max-width:100%;white-space:break-spaces;word-break:break-all;overflow-wrap:break-word;min-height:40px;background-color:#e7ffd8;color:#006400}[data-tooltip]{position:relative}[data-tooltip]::after{content:attr(data-tooltip);position:absolute;z-index:999;opacity:0;visibility:hidden;margin-bottom:6px;padding:6px 10px;white-space:wrap;word-break:break-word;max-width:700px;min-width:200px;top:-90px;left:20%;transition:opacity .2s ease-in-out;pointer-events:none;transform:translateX(-50%);transform:translateY(100%);text-align:left;font-size:12px;box-shadow:0 4px 8px rgba(0,0,0,.2);background:#fcfee5;color:#333;border-radius:2px;border:1px solid #d3d3d3}[data-tooltip]:hover::after{opacity:1;visibility:visible;z-index:999;display:block}.tooltip-bottom[data-tooltip]::after{top:100%;left:50%;transform:translateX(-50%);margin-top:8px}.tooltip-top[data-tooltip]::after{bottom:100%;left:20%;transform:translateX(20%);margin-bottom:8px}.tooltip-left[data-tooltip]::after{right:50%;transform:translateX(-50%);margin-bottom:8px}[title]{position:relative;cursor:pointer}[title]::after,[title]::before{opacity:0;visibility:hidden}[title]:hover::after{content:attr(title);position:absolute;background:#fffce6;color:#444;padding:3px 6px;border-radius:2px;font-size:12px;text-align:left;box-shadow:0 4px 8px rgba(0,0,0,.2);white-space:normal;top:110%;left:50%;min-width:150px;max-width:100%;overflow:auto;transform:translateX(-50%);opacity:1;visibility:visible;transition:opacity .2s ease-in-out;z-index:1000;border:1px solid #d3d3d3}.element-selected{border:4px solid orange !important;padding:5px !important}
/* Claude - date:2026.10.11 - explication:accessibilité : .blink-one (pastilles du site de test) ne part plus de l invisible (0 -> 0,82) et s arrête si « réduire les animations » */

/* Claude - date:2026.10.05 - explication:classes des messages de débogage ($debugMsg), sorties des styles en ligne de la boutique */
.dbgClic{cursor:pointer}
.dbgInfo{color:blue}
.dbgInfoGauche{color:blue;text-align:left}
.dbgNoir{color:black}
.dbgOk{color:green}
.dbgPhp{color:purple;font-weight:bold}
/* Claude - date:2026.10.05 - explication:classes de débogage complémentaires (assistant du panier) */
.dbgGras{font-weight:bold}
.dbgInfoGras{color:blue;font-weight:bold}
.dbgKo{color:red;font-weight:bold}
.dbgNoirGras{font-weight:bold;color:black}

/* Claude - date:2026.10.05 - explication:flexToColumn = rangée flex sur grand écran, colonne sous 814 px (plus grand point de rupture du responsive) ; la media query doit suivre la règle de base */
/* Claude - date:2026.10.07 - explication:contenu centré (justify-content) : en flex, le text-align:center des conteneurs ne centrait plus
   leurs éléments (boutons de connexion, panier, mes commandes… collés à gauche) */
.flexToColumn{display:flex;flex-direction:row;justify-content:center}
@media screen and (max-width:814px){.flexToColumn{flex-direction:column}}

/* Claude - date:2026.10.07 - explication:icône image (png, jpg…) des menus : elle garde ses proportions et ne dépasse pas 48 px,
   quelle que soit la taille du fichier choisi (avant : affichée à sa taille réelle, 250 px pour produit1.png). Les icônes
   « police » (fad, far) ne sont pas concernées : elles suivent font-size. */
img.iconesPpauxMenuDeroulant{width:auto;height:auto;max-width:48px;max-height:48px;object-fit:contain}

/* Claude - date:2026.10.07 - explication:détail d'un point relais Mondial Relay (remplace le style en ligne de WSI2_AdressePointRelais.php) */
.pointRelaisDetail{font-size:0.9em}

/* Claude - date:2026.10.07 - explication:grille de connexion (colonnes 40 % + 50 % = 90 %) centrée dans sa largeur au lieu d'être calée à gauche */
#pageConnexion{justify-content:center}


/* Claude - date:2026.10.07 - explication:titre + menu en un seul bandeau (thème Moderne) : en mobile le menu passe en « hamburger », le titre retrouve ses 4 arrondis */
@media screen and (max-width:814px){#header-containerImg{border-radius:16px}}

/* Claude - date:2026.10.07 - explication:Mon compte / inscription / adresses en mobile : libellés au-dessus des champs (une colonne) et barre d'onglets en bloc arrondi au lieu d'une pilule */
@media screen and (max-width:640px){#tableCli{display:flex;flex-direction:column;align-items:stretch;gap:6px}#tableCli .boutons{margin:8px auto 0}#tableCli .libClientsCell,#tableCli .libClients{text-align:left}#ongletBarre{border-radius:14px}}

/* Claude - date:2026.10.07 - explication:boutons à la taille de leur texte partout : dans une grille (Mon compte, inscription, adresses) ils s'étiraient sur toute la largeur ; centrés dans leur case */
.boutons{justify-self:center}

/* Claude - date:2026.10.07 - explication:étapes du panier en mobile : une seule colonne (la règle #tablePages:has(> #blocSynthese) du thème met le récapitulatif à droite en 320px), barre d'étapes en tête, pastilles à la ligne */
@media screen and (max-width:814px){#tablePages:has(> #blocSynthese){display:flex;flex-direction:column;gap:12px}#tablePages:has(> #blocSynthese) > *{width:100%}#tablePages #etapesContainer{order:-1;flex-direction:row;flex-wrap:wrap;padding:8px}#blocSynthese{position:static}.panBoutons{align-items:center}}

/* Claude - date:2026.10.07 - explication:photo des points relais Mondial Relay recadrée au carré (object-fit absent des colonnes de style en base) */
img.mrPhoto{object-fit:cover}

/* Claude - date:2026.10.07 - explication:fiche produit en mobile : une seule colonne (galerie, nom, prix, achat, onglets, caractéristiques) ; !important car certains blocs ont un grid-column en ligne */
@media screen and (max-width:814px){.catPrdBloc:has(> #catalogueImgDiapo.fpGalerie){grid-template-columns:minmax(0,1fr);padding:16px}.catPrdBloc:has(> #catalogueImgDiapo.fpGalerie) > *{grid-column:1 !important;grid-row:auto !important}.catPrdBloc:has(> #catalogueImgDiapo.fpGalerie) > .libCatalogueCell{text-align:left;border-bottom:0;padding-bottom:0}.catPrdBloc:has(> #catalogueImgDiapo.fpGalerie) > .titresPrd{font-size:1.35rem}}

/* Claude - date:2026.10.07 - explication:gondole : image en tête de carte (order absent des colonnes de style en base) */
.gondole-container > .tableCatalogue > div.catalogueImgPrd{order:-1}
/* Claude - date:2026.10.07 - explication:chaque carte reçoit un grid-column:1 / span 2 en ligne (gondole_accueil.tableau.php, prévu pour l ancienne gondole à 2 colonnes) : une carte par case dans la nouvelle grille */
.gondole-container:has(> .tableCatalogue) > .tableCatalogue{grid-column:auto !important}
/* Claude - date:2026.10.12 - explication:gondole avec un seul article : carte centrée (avant : colonne de gauche, vide à droite, auto-fill garde les colonnes vides) */
.gondole-container:has(> .tableCatalogue):not(:has(> .tableCatalogue ~ .tableCatalogue)){grid-template-columns:minmax(240px,400px);justify-content:center}

/* Claude - date:2026.10.07 - explication:infobulles cachées retirées de la mise en page : invisibles mais présentes (largeur mini 200px), elles élargissaient les pages en mobile (défilement horizontal, page décalée : 461px pour 375px) */
[data-tooltip]:not(:hover)::after,[title]:not(:hover)::after{display:none}

/* Claude - date:2026.10.07 - explication:Mes commandes sur téléphone : en-tête de carte et lignes resserrés */
@media screen and (max-width:640px){.mcEntete{display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:12px 14px;gap:6px 12px}.mcNum{grid-column:1;grid-row:1}.mcDate{grid-column:2;grid-row:1}.mcBadge{grid-column:1;grid-row:2;justify-self:start}.mcTotal{grid-column:2;grid-row:2;justify-self:end;margin-left:0}.mcChevron{grid-column:3;grid-row:1 / 3}.mcDetail{padding:4px 14px 14px}.mcLigne{gap:10px}.mcMontant{min-width:0}.mcRecap{justify-content:flex-start;gap:4px 16px}#recapContainer .blocItemPanier{width:100%}}

/* Claude - date:2026.10.07 - explication:Nos rayons : image de famille recadrée sans déformation (object-fit absent des colonnes de style en base) */
img.rayImage{object-fit:cover}

/* Claude - date:2026.10.07 - explication:recherche : critères sur une colonne en mobile (libellé au-dessus du champ) */
@media screen and (max-width:640px){.tableCatalogue.rechForm{grid-template-columns:minmax(0,1fr)}.tableCatalogue.rechForm > .libCatalogueCell,.tableCatalogue.rechForm > .champsCatalogueCell{grid-column:1;text-align:left}}

/* Claude - date:2026.10.07 - explication:menu des familles : vignette recadrée sans déformation (object-fit absent des colonnes de style en base) */
#familles-container img.familles-img{object-fit:cover}

/* Claude - date:2026.10.07 - explication:débordements horizontaux restants sur téléphone : adresses web longues du texte publié des conditions de vente (coupées), et fiche société de « Qui sommes-nous » (valeur sous le libellé) */
.cdvTexte,.cdvTexte *{overflow-wrap:anywhere;max-width:100%}
@media screen and (max-width:640px){.qsnLigne{flex-wrap:wrap}.qsnLigne .libInfos{min-width:0}.qsnLigne .champsInfos{overflow-wrap:anywhere}}

/* Claude - date:2026.10.07 - explication:images du contenu de la page jamais plus larges que l'écran (accueil « image » publié : 640px fixe, débordait sur téléphone) */
#page-container img{max-width:100%}
/* Claude - date:2026.10.08 - explication:carte d'adresse du panier (facturation / livraison) : formulaire sur toute la ligne, bouton Valider dessous, centré, à sa hauteur (il s'étirait à droite sur toute la hauteur du formulaire) */
.tablePanier:has(>#tableCli){flex-direction:column;align-items:center}.tablePanier>.boutons{align-self:center;margin:12px auto 0}
/* Claude - date:2026.10.12 - explication:messages du panier (ok / ko / msgCli) sur toute la largeur de la carte : ils se réduisaient à leur texte (conteneurs flex) */
.tablePanier>.msgOk,.tablePanier>.msgKo,.tablePanier>.msgCli,.msgCli>.msgOk,.msgCli>.msgKo{align-self:stretch;width:100%;max-width:100%;box-sizing:border-box}
/* Claude - date:2026.10.12 - explication:Mon compte : onglets sur toute la largeur de la carte client (avant : centrés, à la taille de leur texte) ; disposition seule, couleurs du thème actif */
#ongletBarre:has(+#tableCli){width:100%;max-width:760px;box-sizing:border-box;flex-direction:row;flex-wrap:nowrap;justify-content:stretch}
#ongletBarre:has(+#tableCli)>li{flex:1 1 0;min-width:0;justify-content:center;margin:0}
#ongletBarre:has(+#tableCli)>li>a{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media screen and (max-width:640px){#ongletBarre:has(+#tableCli){flex-wrap:wrap}#ongletBarre:has(+#tableCli)>li{flex:1 1 100%}}

/* Claude - date:2026.10.08 - explication:titres h1 ajoutés pour le SEO sans changer l'affichage */
/* h1 des pages sans titre (index.php) : lu par les moteurs et les lecteurs d'écran, invisible à l'écran */
.h1Seo{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* nom du produit en h1 sur la fiche (gondole.contenu.php) : même aspect que l'ancienne balise article */
.titresPrd>h1{font:inherit;color:inherit;margin:0;padding:0;width:auto;grid-column:auto}

/* Claude - date:2026.10.08 - explication:page d'accès à l'administration (pages/index/adminConnect.validation.php) : statut + 2 boutons côte à côte, même taille */
.admAcces{grid-column:1/span 4;display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:12px}
.admStatut{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;font-weight:600;font-size:.95rem}
.admBoutons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%}
.admBoutons .btnAdmin,.admBoutons .admBtnTest{flex:1 1 0;min-width:0;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;margin:0;padding:10px 14px;border-radius:10px;font-size:.95rem;font-weight:600;line-height:1.2;text-align:center;white-space:nowrap;text-decoration:none;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.12);transition:filter .15s,box-shadow .15s}
/* Claude - date:2026.10.11 - explication:boutons de la page d accès admin passés du violet à l ardoise (#475569 / #334155), comme le thème Moderne 2026 */
/* texte rétabli : le responsive du thème le remplaçait par un ::after « Administration » */
.admBoutons .btnAdmin #btnAdminText,.admBoutons .btnAdmin #btnAdminIco{color:inherit;white-space:inherit;padding:0;font-size:inherit;text-indent:0;width:auto;max-width:none;position:static}
.admBoutons .btnAdmin #btnAdminText::after{content:none}
/* carte élargie sur cette page pour garder les 2 boutons sur une ligne ; texte sur 2 lignes possible sur mobile */
#pageConnexion:has(.admAcces){max-width:560px}
@media (max-width:480px){.admBoutons .btnAdmin,.admBoutons .admBtnTest{white-space:normal;padding:10px}}
.admBoutons .admBtnTest{background:#fff;border:1px solid #334155;color:#334155}
.admBoutons .btnAdmin:hover,.admBoutons .admBtnTest:hover{filter:brightness(1.06);box-shadow:0 3px 8px rgba(0,0,0,.16)}
/* Claude - date:2026.10.18 - explication:écran de bienvenue client (pages/connect/connect.valid.php) : carte élargie (440 px dans le thème) pour garder
   les boutons de la barre client sur une seule ligne ; ils passent à la ligne seulement si la place manque (jamais coupés) */
#pageConnexion:has(#barreClientContainer){max-width:1080px}
#pageConnexion #barreClientContainer{flex-wrap:wrap;gap:6px}
#pageConnexion #barreClientContainer .boutons{white-space:nowrap;flex:0 0 auto}
/* Claude - date:2026.10.18 - explication:panier, étapes adresse de facturation / livraison (carnet d'adresses, pages/clients/adresses/adresses.form.php) :
   le carnet prend toute la colonne (#tableCli limité à 760 px dans le thème) ; le bouton Continuer n'est jamais coupé */
.tablePanier > #tableCli:has(.adrCarnet){max-width:none;display:block}
.tablePanier:has(> #tableCli .adrCarnet) > .boutons{white-space:nowrap;flex:0 0 auto}
/* Claude - date:2026.10.18 - explication:toutes les étapes du panier (panier, adresses, livraison, paiement, chèque, virement, récapitulatif) mises en forme pareil :
   - sous 1100 px, le récapitulatif passe sous le contenu au lieu de le réduire (tableau du panier écrasé à 1024 px) ;
   - livraison et paiement : libellé au-dessus et choix sur toute la largeur, comme le carnet d'adresses (avant : libellé à gauche / liste étroite) ;
   - boutons Continuer / Valider collés en bas de l'écran tant que la carte est visible (avant : sous la ligne de flottaison
     dès 5 modes de livraison ou de paiement) ; ils reprennent leur place en fin de carte */
@media screen and (max-width:1100px){#tablePages:has(> #blocSynthese){display:grid;grid-template-columns:minmax(0,1fr)}#tablePages:has(> #blocSynthese) > #blocSynthese{grid-column:1;position:static}}
/* Claude - date:2026.10.18 - explication:sticky, fonds, ombres, largeurs et alignements reportés en base (css_moderne2026 : panBoutons, livValider, paieValider, tablePanier > .boutons, tablePanier, livBloc, paieBloc) ;
   reste ici flex-direction:column, que .flexToColumn (ce fichier, chargé après le thème) écraserait en base */
.tablePanier > .livBloc,.tablePanier > .paieBloc{flex-direction:column}
.tablePanier > .livBloc > .msgPanier,.tablePanier > .paieBloc > .msgPanier{font-size:1.15rem;font-weight:700;padding-top:0 !important}
.tablePanier > .livBloc #panierConteneurItem,.tablePanier > .paieBloc #panierConteneurItem{width:100%;max-width:none;align-items:stretch}
.tablePanier > .livBloc #panierConteneurItem > .blocItemPanier,.tablePanier > .paieBloc #panierConteneurItem > .blocItemPanier{width:100%;max-width:none;box-sizing:border-box}
/* verrou de l'espace d'intégration (pages/auth/authConnect.php) : message lisible sur fond clair */
#msgMaint.msgAuthWbadm{color:#374151;text-shadow:none;font-weight:600;margin:6px auto 10px;text-align:center}
/* Claude - date:2026.10.10 - explication:page de maintenance (authConnect.php) : libellés e-Mail / Mot de passe à la couleur de texte du thème (gris foncé sur fond noir chez pizzajeannot) */
.authPage .libConn,.authPage .libConnCell{color:var(--coul-global-texte,#000);fill:var(--coul-global-texte,#000)}
/* Claude - date:2026.10.10 - explication:message boutique hors prod réelle (pages/auth/horsProd.form.php) : même fond jaune que la page de maintenance (texte noir sur fond noir chez pizzajeannot) */
.horsProdMaint #msgMaint{display:block;background-color:rgb(255,214,99);color:#1f2937;fill:#1f2937;padding:10px;border-radius:7px;opacity:1}
/* Claude - date:2026.10.10 - explication:logo image généré (master : logo_master.png ; boutiques créées : logo_boutique*) : le logo d'alpha est un petit texte animé,
   ces images rondes dépassaient de l'entête (100 px) ; taille adaptée à l'entête, au premier plan, ombre légère. Les logos déposés par les boutiques ne sont pas concernés */
#eCol1:has(img#logo[src*="/_logo/logo_master"]),#eCol1:has(img#logo[src*="/_logo/logo_boutique"]){z-index:5}
/* Claude - date:2026.10.10 - explication:logo généré à gauche, centré verticalement sur le bloc titre + menu (le menu, environ 53 px, est sous l'entête :
   centre décalé de la moitié) ; sur petit écran le menu passe en bouton hors du bloc => centré sur l'entête seule */
#header-container:has(>#eCol1 img#logo[src*="/_logo/logo_master"]),#header-container:has(>#eCol1 img#logo[src*="/_logo/logo_boutique"]),#header-containerImg:has(>#eCol1 img#logo[src*="/_logo/logo_master"]),#header-containerImg:has(>#eCol1 img#logo[src*="/_logo/logo_boutique"]){position:relative;overflow:visible;z-index:20}
#header-container>#eCol1:has(img#logo[src*="/_logo/logo_master"]),#header-container>#eCol1:has(img#logo[src*="/_logo/logo_boutique"]),#header-containerImg>#eCol1:has(img#logo[src*="/_logo/logo_master"]),#header-containerImg>#eCol1:has(img#logo[src*="/_logo/logo_boutique"]){position:absolute!important;top:calc(50% + 26px);left:10px;height:auto;margin:0;transform:translateY(-50%)}
#header-container>#eCol1 img#logo[src*="/_logo/logo_master"],#header-container>#eCol1 img#logo[src*="/_logo/logo_boutique"],#header-containerImg>#eCol1 img#logo[src*="/_logo/logo_master"],#header-containerImg>#eCol1 img#logo[src*="/_logo/logo_boutique"]{margin:0}
@media (max-width:900px){#header-container>#eCol1:has(img#logo[src*="/_logo/logo_master"]),#header-container>#eCol1:has(img#logo[src*="/_logo/logo_boutique"]),#header-containerImg>#eCol1:has(img#logo[src*="/_logo/logo_master"]),#header-containerImg>#eCol1:has(img#logo[src*="/_logo/logo_boutique"]){top:50%}}
#eCol1 img#logo[src*="/_logo/logo_master"],#eCol1 img#logo[src*="/_logo/logo_boutique"]{display:block;width:auto;height:auto;max-height:clamp(40px,6vw,58px);max-width:min(260px,32vw);margin:6px 0 0 12px;position:relative;z-index:5;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
/* Claude - date:2026.10.10 - explication:message de maintenance du site public (authConnect.php, nav 25) : dans alpha (donc master et les nouvelles boutiques)
   la ligne languenav 315 n'a ni style ni icône, et le thème écrit #msgMaint en blanc => texte invisible sur fond clair. Même fond jaune que les anciennes boutiques, texte foncé */
#itemMaint #msgMaint:not(.msgAuthWbadm){display:inline-block;background-color:rgb(255,214,99);color:#1f2937!important;fill:#1f2937;padding:10px 16px;border-radius:7px;opacity:1;text-shadow:none;line-height:1.5}
/* Claude - date:2026.10.10 - explication:les infobulles cachent [title]::before (opacity 0 / visibility hidden) ; or les icônes Font Awesome dessinent
   leur glyphe avec ::before : toute icône portant un title était invisible tant qu'on ne la survolait pas. On rend le glyphe aux icônes. */
[title]:is(.fa,.fas,.far,.fal,.fat,.fad,.fab,.fass,.fa-solid,.fa-regular,.fa-light,.fa-thin,.fa-duotone,.fa-brands,.fa-sharp)::before{opacity:1;visibility:visible}

/* Claude - date:2026.10.12 - explication:écran de connexion du BO en mobile : pas de texture de fond du thème (ex. terranostra), fond clair comme alpha */
@media screen and (max-width:814px){#site-container:has(#pageConnexion.authPage){background-image:none;background-color:#f4f6fb}}

/* Claude - date:2026.10.12 - explication:formulaire de contact : #tablePages centre ses enfants (justify-items) et le thème impose nowrap, le bloc prenait la largeur du contenu (548px en mobile, débordement à gauche) ; on l étire et on autorise le retour à la ligne */
.tableInfos:has(> .ctForm){justify-self:stretch;width:100%}.ctForm{white-space:normal}

/* Claude - date:2026.10.12 - explication:bouton admin = classe « boutons » du thème (btnAdmin.php) : couleurs des autres boutons partout ; texte et icône prennent la couleur du bouton ; en responsive il occupe toute la largeur */
.btnAdmin #btnAdminText,.btnAdmin #btnAdminIco{color:inherit;fill:inherit;white-space:inherit;padding:0 2px;font-size:inherit;text-indent:0;width:auto;max-width:none;position:static}.btnAdmin #btnAdminText::after{content:none}
@media screen and (max-width:814px){.btnAdmin{display:flex!important;justify-content:center;align-items:center;width:100%;max-width:100%;min-width:0;box-sizing:border-box;margin-left:0;margin-right:0}.siteMsgBloc:has(> .btnAdmin),.admAcces,.admBoutons{width:100%;justify-self:stretch;align-self:stretch}.siteMsgBloc:has(> .btnAdmin){align-items:stretch}.admBoutons{flex-direction:column}.admBoutons .btnAdmin,.admBoutons .admBtnTest{flex:none;width:100%}}
/* Claude - date:2026.10.14 - explication:bandeau « Vous êtes sur le site de test » : siteBtnAdmin (width:100% dans le thème) écrasait le bouton admin, texte « Administration du site » tronqué ; le bouton garde sa largeur, le texte prend le reste */
.siteMsgBloc > .btnAdmin{flex:0 0 auto}.siteMsgBloc > .siteBtnAdmin{flex:1 1 auto;width:auto;min-width:0}

/* Claude - date:2026.10.13 - explication:menu des catégories à gauche (#menuIndep-container, colonne de 15 à 20 % de la grille) : il s'adapte à la
   LARGEUR DE SA COLONNE (requête de conteneur), pas à celle de l'écran, donc aussi dans l'aperçu de l'agencement et quel que soit le thème.
   Avant : libellé + image de 44 px côte à côte dans une boîte de 116 px (page panier, écrans 800-1100 px) => image coupée, boîte débordante.
   - large (≥ 200 px) : libellé à gauche, image à droite (inchangé) ;
   - moyen (120-199 px) : image au-dessus, libellé centré dessous, retour à la ligne autorisé ;
   - étroit (< 120 px) : image seule réduite (40 px), libellé plus petit. Le sous-menu au survol est inchangé. */
/* Claude - date:2026.10.13 - explication:correctif du bloc ci-dessus : en conteneur de requête, la colonne n'était plus dimensionnée par son contenu
   (largeur 0 dans la grille centrée, boîtes posées sur la gondole) => justify-self:stretch + width:100% ; les réglages moyen/étroit ne visent
   plus que les boîtes avec image (:has(.familles-img)), sinon les thèmes sans image (terranostra) avaient leurs libellés en bas des cadres. */
#menuIndep-container{container-type:inline-size;container-name:menuFamilles;justify-self:stretch;width:100%;min-width:0;box-sizing:border-box}
#menuIndep-container #familles-container{max-width:100%;min-width:0;box-sizing:border-box}
#menuIndep-container #familles-container>.familles-boite{min-width:0;box-sizing:border-box}
#menuIndep-container #familles-container .familles-libelle{min-width:0;overflow-wrap:anywhere;hyphens:auto}
#menuIndep-container #familles-container .familles-boite>span:has(>.familles-img){flex:0 0 auto;display:block;line-height:0}
#menuIndep-container #familles-container img.familles-img{max-width:100%;object-fit:cover}
@container menuFamilles (max-width:199px){
	#menuIndep-container #familles-container:has(.familles-img){margin:0 4px 12px;padding:6px}
	#menuIndep-container #familles-container>.familles-boite:has(.familles-img){flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:8px 4px}
	#menuIndep-container #familles-container>.familles-boite:has(.familles-img)>span:has(>.familles-img){order:-1}
	#menuIndep-container #familles-container .familles-boite:has(.familles-img) .familles-libelle{text-align:center;font-size:.85rem;line-height:1.25}
	#menuIndep-container #familles-container img.familles-img{width:56px;min-width:0;height:56px}
}
@container menuFamilles (max-width:119px){
	#menuIndep-container #familles-container:has(.familles-img){margin:0 2px 10px;padding:4px}
	#menuIndep-container #familles-container>.familles-boite:has(.familles-img){padding:6px 2px;gap:4px}
	#menuIndep-container #familles-container .familles-boite:has(.familles-img) .familles-libelle{font-size:.75rem}
	#menuIndep-container #familles-container img.familles-img{width:40px;height:40px}
}

/* Claude - date:2026.10.14 - explication:encart « Changer d'adresse e-mail » de Mon compte (pages/clients/client.changeMail.php) */
.cliChgMail{max-width:640px;margin:24px auto 8px;padding:18px 20px;border:1px solid rgba(0,0,0,.12);border-radius:12px;box-sizing:border-box;text-align:left;white-space:normal}
.cliChgMail h2.titresCli{margin:0 0 8px;text-align:left}
.cliChgMailAide{margin:0 0 10px;line-height:1.45;font-size:.92rem;opacity:.85}
.cliChgMailActuelle{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 12px;font-size:.92rem;overflow-wrap:anywhere}
.cliChgMailMsg{margin:0 0 12px;padding:8px 12px;border-radius:8px}
#chgMailF{display:grid;gap:10px}
.cliChgMailChamp{display:grid;gap:4px;font-size:.9rem}
.cliChgMailChamp input{width:100%;max-width:100%;box-sizing:border-box}
.cliChgMailBouton{justify-self:start;cursor:pointer}
@media screen and (max-width:600px){.cliChgMail{margin:16px 0;padding:14px}.cliChgMailBouton{justify-self:stretch}}
/* Claude - date:2026.10.15 - explication:accueil modèle 4 (catégories en vignettes, accueil-M4.php) : nombre d'articles sous le nom, catégorie sans image
	(icône sur fond dégradé), focus clavier visible ; sur mobile, 2 vignettes par ligne au lieu d'une seule carte étroite centrée */
.rayCarte .rayNb{display:block;margin:-8px 0 12px;font-size:.8rem;font-weight:600;color:#6b7280}
.rayImageCadre.rayImageVide{background:linear-gradient(135deg,#f1f5f9,#e2e8f0);color:#94a3b8;font-size:3rem}
.rayCarte:focus-visible{outline:2px solid #334155;outline-offset:3px}
@media screen and (max-width:600px){
	.accM4Conteneur.rayGrille:not(.rayBlocs){grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 10px;box-sizing:border-box}
	.accM4Conteneur.rayGrille:not(.rayBlocs) .rayImageCadre{height:120px}
	.accM4Conteneur.rayGrille:not(.rayBlocs) .rayTitre{font-size:.92rem;padding:10px 6px 12px}
}
/* Claude - date:2026.10.15 - explication:carrousel de l'accueil, modèle 5 (accueil-M5.caroussel_haut.php) : cadre 16/9 identique pour toutes les
	diapositives, image entière posée sur un fond flou de la même image (plus de bandes grises ni de hauteur qui saute), légende des catégories,
	flèches et points accessibles, gestion des fichiers en mode agencement */
.carCadre{position:relative;width:100%;max-width:960px;margin:14px auto 24px;aspect-ratio:16/9;overflow:hidden;border-radius:16px;background:#e2e8f0;box-shadow:0 10px 30px rgba(17,24,39,.15);isolation:isolate}
.carPiste{display:flex;height:100%;transition:transform .5s ease}
.carDiapo{position:relative;flex:0 0 100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}
/* Claude - date:2026.10.17 - explication:fond flou = élément .carFlou (image en style en ligne, résolue depuis la page) au lieu de ::before + var(--carFond) */
.carFlou{position:absolute;inset:-24px;background:center/cover no-repeat;filter:blur(18px) brightness(.85);transform:scale(1.1);z-index:-1;pointer-events:none}
.carDiapo>img,.carLien>img,.carDiapo>video{position:absolute;inset:0;display:block;width:100%;height:100%;min-width:0;max-width:none;max-height:none;margin:0;padding:0;border:0;object-fit:contain}
.carLien{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:inherit;text-decoration:none}
.carCategories .carDiapo>img,.carCategories .carLien>img{object-fit:cover}
.carSansImage{background:linear-gradient(135deg,#f1f5f9,#cbd5e1)}
.carIcone{font-size:4rem;color:#94a3b8}
.carLegende{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:48px 22px 22px;background:linear-gradient(transparent,rgba(15,23,42,.75));color:#fff;text-align:left}
.carLegende b{font-size:1.6rem;font-weight:700;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.carLegende small{font-size:.9rem;opacity:.9;white-space:nowrap}
.carLegende em{margin-left:auto;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;background:#fff;color:#334155;font-style:normal;transition:transform .2s}
.carLien:hover .carLegende em,.carLien:focus-visible .carLegende em{transform:translateX(4px)}
.carLien:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.carFleche{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:#334155;font-size:20px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(17,24,39,.2);transition:background-color .2s,color .2s}
.carFleche:hover,.carFleche:focus-visible{background:#334155;color:#fff;outline:none}
.carPrec{left:12px}
.carSuiv{right:12px}
.carPoints{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:3;display:flex;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(15,23,42,.35)}
.carCategories .carPoints{left:auto;right:16px;transform:none;bottom:auto;top:14px}
.carPoints button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer}
.carPoints button[aria-current="true"]{background:#fff;transform:scale(1.25)}
.carGestion{width:100%;max-width:960px;margin:14px auto 0;padding:12px;box-sizing:border-box;border:1px dashed #94a3b8;border-radius:12px;background:#f8fafc;text-align:left}
.carGestion>form.carEnvoi{display:flex!important;flex-wrap:wrap;align-items:center;gap:10px;font-size:.9rem}
.carEnvoi label{font-weight:600;flex:1 1 100%}
.carEnvoi button,.carSuppr button{padding:6px 14px;border:0;border-radius:8px;background:#334155;color:#fff;font-weight:600;cursor:pointer}
.carMsg{margin:8px 0 0;font-size:.85rem}
.carMsg.ok{color:#15803d}
.carMsg.ko{color:#b91c1c}
.carDiapo>form.carSuppr{display:block!important;position:absolute;top:12px;left:12px;z-index:4;margin:0}	/* le thème met les form en display:contents */
.carSuppr button{background:#b91c1c;font-size:.8rem}
.carVide{max-width:960px;margin:14px auto;text-align:center;color:#6b7280}
@media screen and (max-width:768px){
	.carCadre{margin:10px auto 18px;border-radius:12px}
	.carFleche{width:36px;height:36px;font-size:16px}
	.carPrec{left:8px}
	.carSuiv{right:8px}
	.carLegende{padding:36px 14px 14px}
	.carLegende b{font-size:1.15rem}
	.carLegende em{width:34px;height:34px}
}
/* Claude - date:2026.10.15 - explication:galerie de l'accueil, modèle 6 (accueil-M6.php) : vignettes 16/9 en grille, vidéo signalée par un bouton lecture,
	légende des catégories, fenêtre d'agrandissement (dialog) avec flèches et compteur ; reprend carGestion / carEnvoi / carFleche du carrousel */
.galGrille{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;width:100%;max-width:960px;margin:14px auto 24px;padding:0;box-sizing:border-box}
.galVignette{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#e2e8f0;box-shadow:0 2px 10px rgba(17,24,39,.08);transition:transform .2s ease,box-shadow .2s ease;color:inherit;text-decoration:none}
.galVignette:hover,.galVignette:focus-within{transform:translateY(-3px);box-shadow:0 10px 24px rgba(17,24,39,.15)}
.galOuvrir{display:block;width:100%;height:100%;margin:0;padding:0;border:0;background:none;cursor:zoom-in}
.galOuvrir:focus-visible,a.galVignette:focus-visible{outline:3px solid #334155;outline-offset:2px}
.galVignette img,.galVignette video{position:absolute;inset:0;display:block;width:100%;height:100%;min-width:0;max-width:none;margin:0;border:0;object-fit:cover;transition:transform .3s}
.galVignette:hover img{transform:scale(1.05)}
.galVideo .galOuvrir{cursor:pointer}
.galVideo .galOuvrir::after{content:"\25B6";position:absolute;inset:0;margin:auto;width:48px;height:48px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.9);color:#334155;font-size:18px;box-shadow:0 4px 14px rgba(17,24,39,.25)}
.galSansImage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f1f5f9,#cbd5e1);color:#94a3b8;font-size:3rem}
.galLegende{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:baseline;gap:8px;padding:30px 14px 12px;background:linear-gradient(transparent,rgba(15,23,42,.75));color:#fff;text-align:left}
.galLegende b{font-size:1.05rem;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.galLegende small{margin-left:auto;font-size:.8rem;opacity:.9;white-space:nowrap}
.galVignette>form.galSuppr{display:block!important;position:absolute;top:8px;right:8px;z-index:2;margin:0}
.galSuppr button{width:32px;height:32px;padding:0;border:0;border-radius:999px;background:rgba(17,24,39,.65);color:#fff;cursor:pointer}
.galSuppr button:hover{background:#b91c1c}
.galFenetre{width:min(1100px,94vw);max-width:none;max-height:94vh;padding:0;border:0;border-radius:14px;background:#0f172a;color:#fff;overflow:hidden}
.galFenetre::backdrop{background:rgba(15,23,42,.85)}
.galScene{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;max-height:94vh}
.galScene img,.galScene video{display:block;width:100%;height:100%;max-height:94vh;object-fit:contain}
.galFenetre .carFleche{z-index:3}
.galFermer{position:absolute;top:10px;right:12px;z-index:4;width:40px;height:40px;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:#334155;font-size:26px;line-height:1;cursor:pointer}
.galCompteur{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);margin:0;padding:3px 10px;border-radius:999px;background:rgba(15,23,42,.6);font-size:.85rem}
@media screen and (max-width:600px){
	.galGrille{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 8px}
	.galVignette{border-radius:10px}
	.galLegende{padding:22px 8px 8px}
	.galLegende b{font-size:.9rem}
}
/* Claude - date:2026.10.15 - explication:vidéo de l'accueil, modèle 7 (accueil-M7.php) : lecteur 16/9 pleine largeur dans le même cadre que le carrousel ;
	bouton secondaire « Revenir à la vidéo par défaut » de la zone de gestion */
.vidCadre{width:100%;max-width:960px;margin:14px auto 24px;aspect-ratio:16/9;overflow:hidden;border-radius:16px;background:#0f172a;box-shadow:0 10px 30px rgba(17,24,39,.2)}
.vidCadre video{display:block;width:100%;height:100%;min-width:0;max-width:none;margin:0;border:0;object-fit:contain;background:#0f172a}
.carGestion>form.carEnvoi+form.carEnvoi{margin-top:8px}
.carEnvoi button.carSecondaire{background:#fff;color:#334155;border:1px solid #cbd5e1}
@media screen and (max-width:768px){.vidCadre{margin:10px auto 18px;border-radius:12px}}

/* Claude - date:2026.10.15 - explication:espace publicité, selon la disposition (classe posée par index.php d'après cssthemes.agcType), sans bordure, images recadrées.
	pubBas (dispositions 1 et 3) : les 3 publicités sur toute la largeur, en 16/9, une par ligne si la place manque (téléphone).
	pubCote (dispositions 2 et 4) : colonne de vignettes carrées à la largeur de la colonne ; sous 815 px le responsive du thème les passe en bas => même rendu que pubBas.
	(avant : 3 carrés de 153 px espacés, cadre gris ; .pub-table du thème limité à 30 % ; en colonne, images de 789 px qui débordaient de la colonne de 285 px) */
#pub-container{gap:12px;padding:0;align-items:stretch}
#pub-container>.pub-table{min-width:0;max-width:none;margin:0;padding:0;border:0;border-radius:12px;overflow:hidden;background:transparent}
#pub-container>.pub-table>div,#pub-container>.pub-table div.pub-image,#pub-container>.pub-table a{display:block;width:100%;height:100%;margin:0;padding:0;border:0}
#pub-container>.pub-table img{display:block;width:100%;height:100%;max-width:none;margin:0;border:0;border-radius:12px;object-fit:cover;transition:transform .3s}
#pub-container>.pub-table:hover img{transform:scale(1.03)}
#pub-container.pubBas{flex-wrap:wrap}
#pub-container.pubBas>.pub-table{flex:1 1 220px;height:auto;aspect-ratio:16/9}
@media (max-width:814px){
	#pub-container.pubCote{flex-wrap:wrap}
	#pub-container.pubCote>.pub-table{flex:1 1 220px;height:auto;aspect-ratio:16/9}
}
/* Claude - date:2026.10.15 - explication:colonne : hauteur 0 + min-height 100 % => la colonne prend la hauteur de sa zone sans l'imposer à la grille
	(avant : 3 carrés de 880 px au total sur une page courte comme le panier étiraient la ligne vide du message : 469 px de vide sous le menu) ;
	vignettes carrées au plus, réduites en bandeaux si la page est courte */
@media (min-width:815px){
	#pub-container.pubCote{flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;height:0;min-height:100%;align-self:stretch;overflow:hidden}
	#pub-container.pubCote>.pub-table{flex:0 1 auto;width:100%;height:auto;min-height:60px;aspect-ratio:1/1}
}
@media (prefers-reduced-motion:reduce){#pub-container>.pub-table img{transition:none}#pub-container>.pub-table:hover img{transform:none}}
/* Claude - date:2026.10.15 - explication:publicités AdSense (ins.adsbygoogle) et code HTML (cadre isolé pubCode.php) à la taille de la vignette, lien de l'image */
#pub-container>.pub-table iframe.pubCadre{display:block;width:100%;height:100%;border:0;background:transparent}
#pub-container>.pub-table.pubAds,#pub-container>.pub-table.pubCode{background:var(--coul-publicite-fond,#fff)}
#pub-container>.pub-table ins.adsbygoogle{display:block;width:100%;height:100%}
#pub-container>.pub-table>a.pubLien:focus-visible{outline:3px solid #334155;outline-offset:-3px}
/* Claude - date:2026.10.15 - explication:agencement, aperçu d'une publicité : celle en cours de modification encadrée, les autres atténuées */
#pub-container{scroll-margin-top:16px}
#pub-container>.pub-table.pubSurligne{outline:3px solid #f59e0b;outline-offset:3px;overflow:visible}
#pub-container:has(>.pubSurligne)>.pub-table:not(.pubSurligne){opacity:.35}
/* Claude - date:2026.10.15 - explication:espace d'intégration, « identifiez-vous en tant qu'administrateur » : champ e-mail trop court (2 colonnes sur 4 d'une carte de 440 px) ; carte élargie, libellé sur 1 colonne, champ sur 3 */
#pageConnexion.authPage{max-width:560px}
#pageConnexion.authPage .libConnCell{grid-column:1 !important}
#pageConnexion.authPage .champsConnCell{grid-column:2 / span 3 !important}