/* child_alloexotic_v2 - custom.css - correctifs propres à ce thème (ne rien éditer dans theme.css, généré). */

/* Police "DM Sans" (Espace Pro, Task 6 plan cart-pro-space) - @import doit être la toute première
   règle du fichier (hors commentaires), sinon les navigateurs l'ignorent silencieusement (déjà
   plusieurs @import Cormorant Garamond dans theme.css, mais aucun DM Sans ni ce jeu de graisses
   Cormorant précis - ajout additif, sans collision avec les @import existants). */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');

/* theme.css du thème enfant REMPLACE celui du parent leo_bicomart : aucune règle Bootstrap n'est héritée.
   Sans ceci toute modale Bootstrap (ex. modale wishlist de leofeature) s'affiche en bloc et crée un grand vide
   sous le footer. Bootstrap la réaffiche via un style inline display:block, qui gagne sur cette règle. */
.modal { display: none; }

/* Un fichier CSS partagé du site (/custom-code/custom-style-a.css, chargé APRÈS ce fichier) neutralise la classe
   utilitaire .hidden avec !important : on utilise l'attribut natif hidden, et on le rend robuste ici. */
[hidden] { display: none !important; }

/* theme.css embarque le CSS de patch de la maquette, qui contient une règle
   `body header, body footer, .ae-ticker, ... { display:none !important }` (elle masquait les anciens en-têtes de
   l'export) : elle touche aussi le <header id="header"> du layout parent, qui enveloppe notre header, et le
   <header class="p-head"> lui-même (diagnostiqué avec CSS.getMatchedStylesForNode : display:none hérité de
   `body header`). On les réaffiche par spécificité (id / classe > deux éléments, tous deux en !important). */
header#header { display: block !important; }
header.p-head { display: block !important; }

/* Bug de fond, présent depuis la toute première concaténation de theme.css (constructions Tailwind sans
   `container: { center: true }`) : `.container` (utilitaire Tailwind, repris tel quel comme conteneur de
   contenu par le layout PrestaShop lui-même - #wrapper > #page > .container > .row > #content-wrapper -
   sur TOUTES les pages : accueil, catalogue, fiche produit, CMS) ne reçoit que `width:100%` +
   `max-width` par palier (640/768/1024/1280/1536px), jamais de marge horizontale automatique. En dessous de
   1536px de large ça ne se voit presque pas (max-width == quasi 100% du viewport), mais au-delà (écrans
   courants 1920px et plus), le contenu reste plaqué à gauche dans un bloc de 1536px de large au lieu d'être
   centré, laissant un vide énorme à droite - vérifié par CDP (getBoundingClientRect + chaîne de parents
   complète jusqu'à <body>) sur les 4 types de page à 1920px, jamais spécifique à une seule page. Jamais
   touché dans theme.css (généré/figé) : on ajoute simplement le centrage manquant ici. */
.container { margin-left: auto !important; margin-right: auto !important; }

/* Même origine : `body{overflow:hidden!important}` (fragment du CSS injecté dans l'iframe du hero de la maquette)
   bloquait le défilement de la page. Le verrou du drawer / de la recherche (body.p-lock) reste actif. */
body { overflow-y: auto !important; overflow-x: clip !important; }
/* overflow-x: clip (propagé au viewport) : l'astuce 100vw du hero inclut la largeur de la barre de défilement (~15 px) et créait un défilement
   horizontal parasite. clip (et non hidden) ne crée pas de conteneur de défilement, donc position: sticky du header reste actif. */
html { overflow-x: clip; }
body.p-lock { overflow: hidden !important; }

/* Hero natif : les 3 panneaux de texte se superposent ; celui de la slide active est le seul visible. */
.ae-hero-panels [data-slide][hidden] { display: none !important; }
.ae-hero { min-height: 0; }
#ae-hero { padding: 0 !important; display: flow-root; }  /* flow-root : la marge haute du slider ne fuit pas hors de la section ; contre .ae-hp-main>section:first-child{padding-top:16px!important} (patch maquette) */
#ae-hero .ae-hero-slider { margin-top: 25px !important; }

/* Hero : règles de patch de la maquette (ex-`main#contenu>section[...]`, iframe React), transposées à la section native. */
@media (min-width: 1100px) {
  #ae-hero .ae-hero-slider { grid-template-columns: minmax(0, 58fr) minmax(360px, 42fr) !important; column-gap: 44px !important; align-items: stretch !important; }
  #ae-hero .ae-hero-card,
  #ae-hero .ae-hero-card > div:first-child,
  #ae-hero .ae-hero-text { height: clamp(340px, calc(100svh - 290px), 760px) !important; min-height: 340px !important; max-height: 760px !important; }
  #ae-hero .ae-hero-card > div:first-child { aspect-ratio: auto !important; }
  #ae-hero .ae-hero-card img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  #ae-hero .ae-hero-text { position: relative !important; top: auto !important; padding: 6px 4px 10px 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; }
  #ae-hero .ae-hero-panels .ae-hero-title { margin-top: 9px !important; font-size: 43px !important; line-height: .97 !important; }
  #ae-hero .ae-hero-panels > [data-slide] > p:not(.ae-hero-title) { margin-top: 14px !important; font-size: 12.5px !important; line-height: 1.55 !important; }
  #ae-hero .ae-hero-panels > [data-slide] > div:nth-of-type(2) { margin-top: 15px !important; }
  #ae-hero .ae-hero-panels > [data-slide] > div:nth-of-type(3) { margin-top: 16px !important; padding-top: 11px !important; }
  #ae-hero .ae-hero-panels > [data-slide] > div:nth-of-type(4) { margin-top: 9px !important; }
  #ae-hero .ae-hero-select { margin-top: 12px !important; }
  #ae-hero .ae-hero-select button { padding-top: 10px !important; padding-bottom: 10px !important; }
  #ae-hero .ae-hero-select img { width: 50px !important; height: 50px !important; }
  #ae-hero .ae-hero-select + div { margin-top: 12px !important; }
}

/* Hero : theme.css (patch de la maquette) force color:#000 / opacity:1 / font-weight:500 sur tout [class*="text-[10px]"][class*="tracking"]
   (règle du document principal, sans effet dans l'iframe d'origine) : on restitue les teintes et graisses du hero. */
#ae-hero [class*="text-[10px]"][class*="tracking"] { font-weight: 400 !important; }
#ae-hero [class*="text-[10px]"][class*="tracking"].font-medium { font-weight: 500 !important; }
#ae-hero .opacity-60 { opacity: .6 !important; }
#ae-hero .text-black\/50 { color: rgba(0, 0, 0, .5) !important; }
#ae-hero .text-black\/40 { color: rgba(0, 0, 0, .4) !important; }
#ae-hero .text-\[\#A63A3A\] { color: #A63A3A !important; }

/* Hero pleine largeur : la maquette le sort du conteneur .ae-hp-main (même astuce 100vw que #ae-dynamic-header-host). */
#ae-hero { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: 0; }

/* Iconiques : un CSS partagé /custom-code/*.css redéclare .grid-cols-1 après theme.css (même spécificité, il gagne) et annule
   sm:grid-cols-2 / lg:grid-cols-4 : on rétablit les colonnes responsives. Les règles max-width de theme.css (!important) restent prioritaires en mobile. */
@media (min-width: 640px) { #prop1 .grid.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { #prop1 .grid.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Partiel ae-add-to-cart : le <form> ne doit pas créer de boîte (les règles de la maquette placent .p-add directement dans la grille .ae-newness-copy). */
.ae-newness-copy > .ae-add-form { display: contents; }
/* leofeature/front.css stylise .leo-bt-cart (taille, graisse, interlettrage, bordure) : on rétablit le rendu .p-add de la maquette. */
.ae-newness-copy .p-add.leo-bt-cart { margin-top: 16px; padding: 0 0 3px; border: 0; border-bottom: 1px solid var(--i); border-radius: 0; background: none; box-shadow: none; color: inherit; font: 500 10px var(--n); letter-spacing: .12em; text-transform: uppercase; line-height: normal; height: auto; min-width: 0; width: auto; text-align: left; }
.ae-newness-copy .p-add.leo-bt-cart .leo-bt-cart-content { font: inherit; letter-spacing: inherit; text-transform: inherit; }

/* Origine / sensorielle : même collision .grid-cols-1 (CSS partagé chargé après theme.css) qui annule lg:grid-cols-[…] et md:grid-cols-3. */
@media (min-width: 768px) { #prop3 .grid.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  #prop2 .grid.lg\:grid-cols-\[1\.1fr_1fr\] { grid-template-columns: 1.1fr 1fr; }
  #prop3 .grid.lg\:grid-cols-\[35\%_65\%\] { grid-template-columns: 35% 65%; }
}
/* Formulaire d'ajout au panier des cartes sensorielles : leofeature/front.css stylise .leo-bt-cart, on rétablit le bouton plein de la maquette. */
#prop3 .ae-add-form { display: block; }
#prop3 .ae-add-form .leo-bt-cart { display: block; width: 100%; margin-top: 16px; padding: 12px 0; border: 0; border-radius: 9999px; background: #121212; color: #fff; font: inherit; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; line-height: normal; height: auto; box-shadow: none; }
#prop3 .ae-add-form .leo-bt-cart:hover { background: rgba(0,0,0,.8); }
#prop3 .ae-add-form .leo-bt-cart .leo-bt-cart-content { font: inherit; letter-spacing: inherit; text-transform: inherit; }

/* theme.css contient un 2e bloc .px-6 (CSS de l'iframe hero) placé APRÈS md:px-10 : à ≥768px il annulait le padding 2.5rem des en-têtes de section. */
@media (min-width: 768px) { .px-6.md\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; } }

/* Carrousel sensoriel : à ≥768px la piste devient une rangée à défilement horizontal (3 cartes visibles, rendu identique à la maquette
   pour 3 produits ; au-delà, les flèches ‹ › font défiler). Marges négatives/padding pour ne pas rogner l'ombre des cartes. */
@media (min-width: 768px) {
  #prop3 .grid.md\:grid-cols-3 { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 3rem) / 3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-left: 40px; margin: -12px -40px -60px; padding: 12px 40px 60px; }
  #prop3 .grid.md\:grid-cols-3::-webkit-scrollbar { display: none; }
  #prop3 .grid.md\:grid-cols-3 > [data-tab] { scroll-snap-align: start; }
}

/* Journal / Conseil : même collision .grid-cols-1 (CSS partagé chargé après theme.css) qui annule md:grid-cols-3 et lg:grid-cols-2. */
@media (min-width: 768px) { #coop .grid.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { #coop .grid.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Le conseil : theme.css redéclare .aspect-[4/3] APRÈS lg:aspect-auto (2e bloc issu du CSS de l'iframe) ; à ≥1024px la vidéo doit fixer la hauteur (ratio natif). */
@media (min-width: 1024px) { #coop .lg\:aspect-auto { aspect-ratio: auto; } }

/* Footer : même patch de maquette (`body footer {display:none!important}`) : on réaffiche le footer du nouveau design.
   (footer#footer du layout parent, s'il existe, l'enveloppe.) */
footer.ae-footer { display: block !important; }
footer#footer { display: block !important; }
/* Landing Click&Collect (Task 8) : même règle de patch, découverte tardivement avec CDP
   (getComputedStyle renvoyait display:none, hauteur 0) sur notre propre <footer id="contact">
   (mini-footer éditorial de la landing, distinct de footer.ae-footer ci-dessus) - même correctif. */
footer#contact { display: block !important; }
/* Landing Click&Collect : 3e collision trouvée avec CDP CSS.getMatchedStylesForNode sur
   .footer-bottom (mini-footer de la landing) - un CSS partagé du site (/custom-code/*.css,
   chargé après theme.css) définit sa PROPRE règle `.footer-bottom{background:none;
   padding-bottom:0;margin-top:-10px}` pour un tout autre composant (page builder) qui réutilise
   ce nom de classe générique. Restaure le padding/margin réels de la maquette
   (clickcollect-landing/styles.css : `.footer-bottom{padding:20px 28px}`, pas de margin-top). */
.ae-cc-landing .footer-bottom { padding: 20px 28px !important; margin-top: 0 !important; }

/* Retour client 2026-09-23 : « Paroles de connaisseurs » doit s'afficher comme « Le conseil Allo Exotic »
   (carte cadrée dans la largeur de la page), pas comme une bande qui semble courir sur tout l'écran.
   Cause : la maquette ne lui donne qu'un border-top (patch CSS) et aucun rayon, son fond crème (#FBF8F2)
   se fond donc dans celui de la page. Même cadre que la carte du conseil (bg-white border border-black/[0.06]
   rounded-[4px] overflow-hidden) ; !important car le CSS de patch de theme.css redéfinit ses bordures. */
.p-reviews {
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 4px;
  overflow: hidden;
}

/* Catalogue (Task 6, 2026-09-26) : append-theme-css.py (Task 5) dédoublonne les règles de
   styles.css au niveau ligne SANS conserver leur @media d'origine (son regex ne capture que
   "selecteur{corps}", jamais le "@media(...){" englobant) - plusieurs règles pensées pour le
   carrousel mobile (display:flex, min-width:XXvw, aspect-ratio) se retrouvent donc appliquées à
   TOUTES les largeurs dans theme.css et cassent la grille de bureau (vérifié : cartes qui se
   chevauchent car min-width:82vw/84vw force chaque carte à ~1300px sur un écran de 1600px,
   grep sur ces sélecteurs dans theme.css ne renvoie aucun @media englobant). On rétablit le
   comportement par largeur. NB : la grille "recettes" de la maquette réelle (screens/catalog-std-
   recipes-1600.png) affiche 5 cartes égales sur une ligne, pas la mise en page à carte vedette
   (grid-column:span 2) d'une révision antérieure de theme.css - on reprend le rendu réel. */
.ae-catalog-exception-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.ae-catalog-exception-card { min-width: 0; }
.cat-recipes-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 32px 24px !important; }
.cat-recipe, .cat-recipe-feature { min-width: 0 !important; grid-column: auto !important; grid-row: auto !important; }
.cat-recipe-media, .cat-recipe-feature .cat-recipe-media { aspect-ratio: 4 / 3 !important; }
@media (max-width: 700px) {
  .ae-catalog-exception-grid { display: flex; overflow-x: auto; gap: 14px; padding-bottom: 12px; scroll-snap-type: x mandatory; }
  .ae-catalog-exception-card { min-width: 84vw; scroll-snap-align: start; }
  .cat-recipes-grid { display: flex !important; overflow-x: auto !important; gap: 14px !important; padding-bottom: 12px !important; }
  .cat-recipe, .cat-recipe-feature { min-width: 78vw !important; scroll-snap-align: start; }
  .cat-recipe-media, .cat-recipe-feature .cat-recipe-media { aspect-ratio: 4 / 2.75 !important; }
}

/* Même bug (règle @media aplatie par append-theme-css.py) sur la barre d'outils (.cat-tools) :
   ".cat-toolbar{grid-template-columns:1fr auto}.cat-count{display:none}" venait de
   @media(max-width:1100px) et ".cat-toolbar{height:auto;...grid-template-columns:1fr}" de
   @media(max-width:700px) dans catalog-std/styles.css (vérifié à la source) - les deux
   s'appliquaient à toutes les largeurs dans theme.css, cachant en permanence le compteur
   "N produits" et empilant la barre sur une seule colonne même à 1600px. */
.cat-toolbar { grid-template-columns: 1fr auto 1fr; height: 64px; padding: 0 20px; }
.cat-count { display: block; }
@media (max-width: 1100px) {
  .cat-toolbar { grid-template-columns: 1fr auto; }
  .cat-count { display: none; }
}
@media (max-width: 700px) {
  .cat-toolbar { height: auto; padding: 14px; gap: 14px; grid-template-columns: 1fr; }
}

/* Même bug pour .cat-grid (la grille principale du catalogue, #catalog-grid .cat-grid-first) :
   theme.css contient .cat-grid{grid-template-columns:repeat(4,minmax(0,1fr))} (base) puis DEUX
   déclarations .cat-grid{...} supplémentaires consécutives sans aucun @media englobant (vérifié :
   catalog-std/styles.css:295-296 montre qu'elles viennent de @media(max-width:1100px) -> repeat(2,
   1fr) et @media(max-width:700px) -> 1fr) - la dernière (1fr) gagne donc à TOUTES les largeurs,
   y compris 1600px : la grille produits s'affichait en 1 seule colonne sur desktop (vérifié par
   capture réelle avant correctif, cf. rapport Task 9). NB : .cat-second-selection .cat-grid (3
   autres déclarations un peu plus bas dans theme.css, elles bien scopées par largeur dans la
   source) ne concerne aucun élément réel : Task 6 a fusionné la grille principale et la "2e
   sélection" de la maquette en un seul #catalog-grid.cat-collection (cf. commentaire en tête de
   product-list.tpl) - dead CSS comme .cat-last, rien à corriger dessus. */
.cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 38px 22px; }
@media (max-width: 1100px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .cat-grid { grid-template-columns: 1fr; }
}

/* Collision CSS partagée (Step 3, Task 9, 2026-09-26) : /custom-code/custom-style-m.css (chargé
   après custom.css, jamais à éditer) contient "#category section#wrapper .container{position:
   relative;width:100%;padding:0 120px;height:100%}" - héritage de l'ancienne page catégorie
   (probablement pensé pour une sidebar), qui rétrécit maintenant le conteneur plein-écran du
   nouveau catalogue : confirmé par CDP (bounding rect réel à 1600px) .container mesuré à 1536px
   mais #content-wrapper (son enfant, sans padding propre) réduit à seulement 1296px à cause de ce
   padding de 120px de chaque côté - .cat-shell calcule alors min(1544px, 100% - 56px) sur cette
   base déjà réduite au lieu du plein wrapper (~1585px), donc toutes les sections du catalogue
   (grid, editorial, exception, recipes...) s'affichent ~250px plus étroites que dans la maquette.
   product-list.tpl s'applique à TOUTE page catégorie du site (aucun {if} par id_category) - aucune
   page catégorie n'utilise plus l'ancien layout à sidebar qui justifiait ce padding, neutralisé
   sans condition supplémentaire. */
#category section#wrapper .container {
  padding: 0 !important;
}

/* Même bug pour .cat-section-head (display:block venait de @media(max-width:700px)) et
   .cat-editorial-grid/.cat-editorial-copy (grid-template-columns:1fr / padding:70px 0 venaient de
   @media(max-width:1100px)) - vérifiés à la source dans catalog-std/styles.css. */
.cat-section-head { display: flex; }
.cat-editorial-grid { grid-template-columns: 1fr 1.1fr; }
.cat-editorial-copy { padding-right: 9vw; padding-top: 0; padding-bottom: 0; }
@media (max-width: 700px) {
  .cat-section-head { display: block; }
}
@media (max-width: 1100px) {
  .cat-editorial-grid { grid-template-columns: 1fr; }
  .cat-editorial-copy { padding: 70px 0; }
}

/* Note d'origine (.cat-origin-note) : la révision finale de la maquette (catalog-std/styles.css,
   commentaire "2. Note d'origine plus épurée") passe à grid-template-columns:1fr auto!important
   (texte + bouton, SANS la pastille ronde ✣ des révisions précédentes) - déjà présent tel quel
   dans theme.css (non affecté par le bug de dédup ci-dessus), on retire donc la pastille du
   template plutôt que de la CSS (voir product-list.tpl). */
.cat-recipes-grid { gap: 16px !important; }

/* Fiche produit (Task 7, 2026-09-26) : même bug d'aplatissement de @media par
   append-theme-css.py (Task 5) que sur le catalogue, mais BEAUCOUP plus étendu ici - vérifié à la
   source (docs/superpowers/plans/references/2026-09-26-listing-product-clickcollect/product-std/
   styles.css) : un unique gros bloc `@media (min-width:1101px){...}` d'une trentaine de
   déclarations !important (hero, galerie, vignettes, prix, onglets, split, pair, related) a été
   entièrement aplati par le script (son regex ne capture jamais l'accolade englobante d'un
   @media) et s'appliquait donc à TOUTES LES LARGEURS, y compris 375px - bug bien plus grave que
   les autres cas déjà vus (catalogue, ce même bug plus haut) : à 375px, `.v12-hero{grid-template-
   columns:minmax(0,1.03fr) minmax(460px,.97fr)!important}` forçait une 2e colonne d'au moins
   460px sur un viewport de 375px -> DÉBORDEMENT HORIZONTAL réel (body.scrollWidth mesuré à 524px
   au lieu de 375px, contenu tronqué/coupé, vérifié par capture d'écran). Plusieurs autres blocs
   @media (1100px et 700px, eux aussi dupliqués/aplatis, parfois en plusieurs révisions
   successives "V17") souffrent du même sort pour les mêmes sélecteurs. On réinsère ici
   l'intégralité de ces 3 blocs avec leurs vraies conditions de largeur, dans le même ORDRE que la
   source (l'ordre compte : plusieurs révisions successives ciblent les mêmes sélecteurs au même
   breakpoint, la dernière doit gagner comme dans le fichier d'origine). */
@media (min-width: 1101px) {
  .v12-shell { width: min(1460px, calc(100% - 80px)) !important; }
  .v12-hero { grid-template-columns: minmax(0, 1.03fr) minmax(460px, .97fr) !important; gap: clamp(64px, 6vw, 100px) !important; padding-bottom: 86px !important; }
  .v12-stage { height: 590px !important; min-height: 590px !important; max-height: 590px !important; }
  .v12-thumbs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; width: 100% !important; align-items: stretch !important; }
  .v12-thumb { width: auto !important; height: auto !important; aspect-ratio: 1.42/1 !important; }
  .v12-info { padding-top: 18px !important; top: 122px !important; }
  .v12-info h1 { font-size: clamp(50px, 3.8vw, 68px) !important; line-height: .94 !important; max-width: 610px !important; }
  .v12-price { font-size: 45px !important; }
  .v12-tabs-section { padding-bottom: 56px !important; }
  .v12-tabs { grid-template-columns: repeat(3, 1fr) !important; }
  .v12-tab-copy { margin-top: 26px !important; max-width: 1120px !important; }
  .v12-split { min-height: 560px !important; height: 560px !important; grid-template-columns: 1fr 1fr !important; overflow: hidden !important; }
  .v12-split-media { height: 560px !important; min-height: 0 !important; }
  .v12-split-copy { padding: 64px clamp(60px, 6vw, 105px) !important; }
  .v12-pair { padding: 88px 0 100px !important; }
  .v12-pair-head { margin-bottom: 40px !important; }
  .v12-pair-grid { grid-template-columns: 1.18fr .72fr .72fr !important; gap: 28px !important; }
  .v12-feature { min-height: 500px !important; height: 500px !important; grid-column: auto !important; }
  .v12-product-visual { height: 315px !important; }
  .v12-related { padding: 86px 0 102px !important; }
  .v12-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) .98fr !important; gap: 24px !important; }
  .v12-related .v12-product-visual { height: 300px !important; }
  .v12-editorial-tile { height: 515px !important; }
  .v12-pair-grid, .v12-related-grid { display: grid !important; overflow-x: visible !important; }
  .v12-pair-grid > *, .v12-related-grid > * { min-width: 0 !important; scroll-snap-align: none !important; }
}
@media (max-width: 1100px) {
  .v12-stage { min-height: 0 !important; aspect-ratio: 1.18/1 !important; height: auto !important; max-height: none !important; }
  .v12-thumbs { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; width: 100% !important; gap: 10px !important; }
  .v12-thumb { width: auto !important; height: auto !important; aspect-ratio: 1.25/1 !important; }
  .v12-split { height: auto !important; min-height: 0 !important; grid-template-columns: 1fr !important; }
  .v12-split-media { height: auto !important; min-height: 520px !important; }
  .v12-split-copy { padding: 70px 40px !important; }
  .v12-hero { grid-template-columns: 1fr !important; gap: 40px !important; }
  .v12-info { position: relative !important; top: auto !important; padding-top: 0 !important; }
  .v12-pair-grid { grid-template-columns: 1fr 1fr !important; }
  .v12-feature { grid-column: 1/-1 !important; min-height: auto !important; height: auto !important; }
  .v12-related-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .v12-editorial-tile { height: 500px !important; }
}
@media (max-width: 700px) {
  .v12-thumbs { gap: 7px !important; }
  .v12-thumb { aspect-ratio: 1/1 !important; }
  .v12-stage { aspect-ratio: 1/1.15 !important; }
  .v12-split-media { min-height: 360px !important; }
  .v12-shell { width: calc(100% - 28px) !important; }
  .v12-breadcrumb { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .v12-stage { min-height: 0 !important; aspect-ratio: 4/5 !important; }
  .v12-info h1 { font-size: 46px !important; }
  .v12-options { grid-template-columns: 1fr 1fr !important; }
  .v12-option:nth-child(2) { border-right: 0 !important; }
  .v12-option:nth-child(-n+2) { border-bottom: 1px solid var(--v12-line) !important; }
  .v12-tabs { grid-template-columns: 1fr !important; }
  .v12-tab { font-size: 17px !important; }
  .v12-pair-grid, .v12-related-grid { display: flex !important; overflow-x: auto !important; gap: 16px !important; scroll-snap-type: x mandatory !important; }
  .v12-pair-grid > *, .v12-related-grid > * { min-width: 82vw !important; scroll-snap-align: start !important; }
  .v12-feature { min-height: 520px !important; height: auto !important; }
  .v12-product-visual, .v12-related .v12-product-visual { height: 320px !important; }
  .v12-pair, .v12-related { padding: 72px 0 !important; }
  .v12-thumb { width: 72px !important; height: 72px !important; }
  .v12-facts { grid-template-columns: 1fr !important; }
  .v12-fact, .v12-fact:not(:first-child) { padding: 15px 0 !important; border-right: 0 !important; border-bottom: 1px solid var(--v14-line, var(--v12-line)) !important; }
  .v12-fact:last-child { border-bottom: 0 !important; }
  .v12-split-copy { padding: 48px 24px !important; }
  .v12-info { top: auto !important; }
}

/* Bloc pickup Click&Collect (.ae-pickup*, Task 9, 2026-09-26) : même bug d'aplatissement de
   @media par append-theme-css.py que partout ailleurs dans ce chantier - vérifié à la source
   (product-cc/styles.css) : `@media(max-width:680px){.ae-pickup{padding:14px}.ae-pickup-head{
   display:block}.ae-pickup-ready{margin-top:10px}.ae-pickup-search>div{grid-template-columns:1fr}
   .ae-pickup-search button{width:100%}}` s'appliquait à TOUTES les largeurs dans theme.css (aucun
   @media englobant) : la pastille "Disponible sous 90 min" passait sous le titre et le champ code
   postal + bouton "Rechercher" s'empilaient sur une colonne, même à 1600px (vérifié par capture
   avant/après, cf. rapport Task 9). Rétabli avec le vrai palier de la maquette (680px). */
.ae-pickup-head { display: flex; }
.ae-pickup-ready { margin-top: 0; }
.ae-pickup-search > div { grid-template-columns: 1fr auto; }
.ae-pickup-search button { width: auto; }
@media (max-width: 680px) {
  .ae-pickup-head { display: block; }
  .ae-pickup-ready { margin-top: 10px; }
  .ae-pickup-search > div { grid-template-columns: 1fr; }
  .ae-pickup-search button { width: 100%; }
}

/* Débordement horizontal résiduel à 375px trouvé sur la fiche produit (Task 7) : le hook
   displayFooterProduct (conservé, cf. commentaire de catalog/product.tpl - productcomments,
   ets_marketplace, addifyproductcombinationstable sont déjà actifs dessus) fait aussi rendre
   ets_marketplace/views/templates/hook/product/products_other.tpl ("Produits associés" du même
   vendeur), qui enveloppe nos propres cartes catalog/_partials/miniatures/product.tpl (Task 6)
   dans un balisage Bootstrap (.row) qu'un plugin owl-carousel transforme en .owl-wrapper/.owl-item
   - sur le thème d'origine (child_leo_bicomart), Bootstrap + les CSS owl-carousel sont chargés et
   contraignent cette largeur ; ce thème enfant ne les charge pas (theme.yml: use_parent_assets:
   false), donc .owl-wrapper s'étale sur toute la largeur réelle des cartes mises bout à bout
   (~4845px mesuré) et fait déborder toute la page. Corrigé en confinant le débordement au niveau
   du <main> (les vrais carrousels voulus, .v12-pair-grid/.v12-related-grid, gardent leur propre
   overflow-x:auto indépendant, un overflow:hidden sur un ancêtre ne les empêche pas de défiler).
   Restyler proprement ce carrousel "Produits associés" pour ce thème est hors du périmètre de la
   Task 7 (fiche produit) - à traiter dans un chantier dédié marketplace/thème si le besoin est réel. */
.ae-detail-main { overflow-x: hidden; }

/* Landing Click&Collect (Task 8, 2026-09-26) : même bug d'aplatissement de @media par
   append-theme-css.py (Task 5) que sur le catalogue/la fiche produit (cf. commentaires
   ci-dessus) - vérifié à la source (clickcollect-landing/styles.css, lignes 15-16) :
   `@media(max-width:1100px){.hero-inner,.how-inner,.final-inner{grid-template-columns:1fr}
   .hero-photo{height:520px}.footer-main{grid-template-columns:repeat(2,1fr)}}` et
   `@media(max-width:700px){...48 déclarations, dont .hero h1 font-size, .searchbox-inner padding,
   .searchbox-top/.availability display, .searchrow colonnes, figcaption, trust nth-child,
   .section/.how/.final padding, .cards, .final-inner, .footer-main...}` se sont retrouvées
   appliquées à TOUTES les largeurs dans theme.css (aucun @media englobant - vérifié :
   `grep -n "@media" theme.css` ne montre aucune occurrence autour de ces règles). Constaté avec
   compare.py à 1600px : trust +91% de hauteur, selection +51%, hero +16%, parcours +29% (grilles
   forcées en 1 colonne, padding/police de mobile appliqués en desktop). Corrigé, scoppé à
   .ae-cc-landing (n'affecte aucune autre page) : chaque valeur desktop de clickcollect-landing/
   styles.css (lignes 7-14, non flattened) est réaffirmée sans condition ci-dessous, puis les 2
   mêmes paliers de la maquette (1100px/700px) sont réappliqués dans de vraies @media - liste
   exhaustive des sélecteurs affectés réellement utilisés par cette landing (le bloc source a
   aussi .top/.head-inner/.brand/.quick/.drawer, propres au header de la maquette autonome : cette
   landing réutilise le vrai header du site, _partials/header.tpl, pas ces classes - ignorés). */
.ae-cc-landing .hero-inner { grid-template-columns: 1fr 1.05fr !important; padding: 80px 28px 96px !important; gap: 64px !important; }
.ae-cc-landing .how-inner { grid-template-columns: .85fr 1.15fr !important; }
.ae-cc-landing .final-inner { grid-template-columns: 1.2fr .8fr !important; padding: 64px !important; }
.ae-cc-landing .hero-photo { height: 620px !important; }
.ae-cc-landing .hero h1 { font-size: clamp(52px, 5.6vw, 84px) !important; }
.ae-cc-landing .searchbox-inner { padding: 24px !important; }
.ae-cc-landing .searchbox-top { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 16px !important; margin-bottom: 16px !important; }
.ae-cc-landing .availability { display: inline !important; margin-top: 0 !important; }
.ae-cc-landing .searchrow { grid-template-columns: 1fr auto !important; gap: 10px !important; }
.ae-cc-landing .hero-photo figcaption strong { font: 500 34px/1.05 'Cormorant Garamond', Georgia, serif !important; }
.ae-cc-landing .hero-photo figcaption span { display: inline !important; }
.ae-cc-landing .trust-inner { grid-template-columns: repeat(4, 1fr) !important; }
.ae-cc-landing .trust article:nth-child(even) { border-right: 1px solid rgba(255, 255, 255, .15) !important; }
.ae-cc-landing .trust article:nth-child(-n+2) { border-bottom: 0 !important; }
.ae-cc-landing .trust article:last-child { border-right: 0 !important; }
.ae-cc-landing .section,
.ae-cc-landing .how,
.ae-cc-landing .final { padding: 96px 28px !important; }
.ae-cc-landing .cards { grid-template-columns: repeat(3, 1fr) !important; }
.ae-cc-landing .footer-main { grid-template-columns: 1.5fr repeat(3, 1fr) !important; padding: 64px 28px !important; gap: 48px !important; }
@media (max-width: 1100px) {
  .ae-cc-landing .hero-inner,
  .ae-cc-landing .how-inner,
  .ae-cc-landing .final-inner { grid-template-columns: 1fr !important; }
  .ae-cc-landing .hero-photo { height: 520px !important; }
  .ae-cc-landing .footer-main { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 700px) {
  .ae-cc-landing .hero-inner { padding: 48px 16px 64px !important; gap: 40px !important; }
  .ae-cc-landing .hero h1 { font-size: 48px !important; }
  .ae-cc-landing .searchbox-inner { padding: 16px !important; }
  .ae-cc-landing .searchbox-top { display: block !important; }
  .ae-cc-landing .availability { display: block !important; margin-top: 6px !important; }
  .ae-cc-landing .searchrow { grid-template-columns: 1fr !important; }
  .ae-cc-landing .hero-photo { height: 400px !important; }
  .ae-cc-landing .hero-photo figcaption strong { font-size: 27px !important; }
  .ae-cc-landing .hero-photo figcaption span { display: none !important; }
  .ae-cc-landing .trust-inner { grid-template-columns: repeat(2, 1fr) !important; }
  .ae-cc-landing .trust article:nth-child(even) { border-right: 0 !important; }
  .ae-cc-landing .trust article:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .15) !important; }
  .ae-cc-landing .section,
  .ae-cc-landing .how,
  .ae-cc-landing .final { padding: 64px 16px !important; }
  .ae-cc-landing .cards { grid-template-columns: 1fr !important; }
  .ae-cc-landing .final-inner { padding: 40px 24px !important; }
  .ae-cc-landing .footer-main { grid-template-columns: 1fr !important; padding: 48px 20px !important; gap: 32px !important; }
}

/* Landing Click&Collect : 2e collision trouvée avec CDP CSS.getMatchedStylesForNode sur
   `.hero h1` (diagnostic recommandé par les règles héritées du plan) - /custom-code/
   custom-style-m.css (chargé après theme.css) contient une règle globale, non scoppée,
   "body, h1, h2 { font-family: var(--font-br-bold) }" (--font-br-bold vaut 'Br-Bold', sans-serif)
   : même spécificité qu'un sélecteur d'élément simple, mais chargée après le
   `h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif}` de theme.css -> elle gagne sur TOUS
   les h1/h2 du site (pas seulement cette landing - la homepage n'est pas touchée car ses titres
   utilisent des classes dédiées comme .ae-homehero-copy h1, plus spécifiques). Cette landing
   reprend le CSS brut de la maquette (sélecteurs bruts h1/h2 dans .section-head, .final, .how) :
   sans ce correctif, tous les titres s'affichaient en Br-Bold/sans-serif au lieu de Cormorant
   Garamond, avec des métriques de ligne différentes -> hauteurs de section décalées. */
.ae-cc-landing h1,
.ae-cc-landing h2 { font-family: 'Cormorant Garamond', Georgia, serif !important; }

/* Retour client 2026-09-27 (7 points), catalogue - même bug de fond qu'ailleurs dans ce chantier
   (append-theme-css.py aplatit les @media, cf. commentaires ci-dessus) sauf mention contraire. Les
   vraies valeurs/breakpoints ci-dessous ont été relus dans catalog-std/styles.css et vérifiés par
   CDP (getComputedStyle + CSS.getMatchedStylesForNode) sur allo.local ET sur la maquette réelle
   (file:// sur les 2 fichiers sources) avant/après correctif. */

/* Point 1 : "Trier par" doit être à droite. theme.css a la bonne règle desktop
   (.cat-toolbar label{justify-self:end}) suivie sans @media de la variante mobile
   (justify-self:start) qui gagnait à toutes les largeurs. */
.cat-toolbar label { justify-self: end; }
@media (max-width: 700px) {
  .cat-toolbar label { justify-self: start; }
}

/* Point 2 : fil d'ariane - CSS déjà correct dans theme.css (.cat-breadcrumb / .cat-breadcrumb span),
   jamais touché par le bug d'aplatissement (une seule déclaration, sans variante mobile) - le
   problème était uniquement la classe inventée "cat-breadcrumb-ae" côté template (corrigé dans
   product-list.tpl). Seul ajout : la maquette n'a pas de vrais <a> ici (fil statique) donc pas de
   reset de soulignement dédié - le nôtre en a besoin puisqu'on garde de vrais liens pour
   l'accessibilité (a{color:inherit} existe déjà dans theme.css, mais pas de reset
   text-decoration). */
.cat-breadcrumb a { text-decoration: none; }

/* Point 3 : le bouton "Ajouter au panier" de la grille (.cat-add.leo-bt-cart) n'est PAS un bug de
   @media aplati - diagnostiqué par CDP CSS.getMatchedStylesForNode sur un vrai bouton de la page
   live : themes/leo_bicomart/modules/leofeature/views/css/front.css (hérité du thème PARENT, ce
   thème enfant n'a pas sa propre surcharge CSS pour le module leofeature) déclare
   ".leo-bt-cart{background:none;font-size:13px;font-weight:600;color:#333}" - même spécificité de
   classe que ".cat-add" et chargé APRÈS lui (leofeature/front.css est inclus avant custom.css dans
   le <head>, mais surtout APRÈS le .cat-add de theme.css), donc il gagne et transforme le bouton
   plein en lien fantôme gris/13px. Même stratégie déjà utilisée ailleurs sur ce thème pour la même
   collision (.ae-newness-copy .p-add.leo-bt-cart, #prop3 .ae-add-form .leo-bt-cart) : une
   spécificité suffisante (double classe) suffit à regagner la priorité, sans !important (la règle
   concurrente n'en a pas). */
.cat-add.leo-bt-cart {
  background: #313432;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}
.cat-add.leo-bt-cart:hover { background: var(--cat-green); color: #fff; }

/* Point 4 : bloc "NOTRE MANIÈRE DE SOURCER" - la grille 2 colonnes (.cat-editorial-grid) était déjà
   corrigée plus haut (voir bloc "Même bug pour .cat-section-head..."), mais pas le titre :
   .cat-editorial-copy h2{font-size:58px} (desktop, correct) est suivi sans @media de
   .cat-editorial-copy h2{font-size:44px} (mobile, @media(max-width:700px) dans la source) qui
   gagnait à toutes les largeurs. */
.cat-editorial-copy h2 { font-size: 58px; }
@media (max-width: 700px) {
  .cat-editorial-copy h2 { font-size: 44px; }
}

/* Point 5 : grille de ".cat-second-selection" (bloc "À découvrir ensuite", absent du template avant
   ce correctif - voir product-list.tpl). theme.css contient TROIS déclarations consécutives de
   ".cat-second-selection .cat-grid", toutes en !important, sans aucun @media englobant (vérifié à
   la source, catalog-std/styles.css : repeat(4,...) desktop, repeat(2,...) @media(max-width:1100px),
   1fr @media(max-width:700px)) - la dernière (1fr!important) gagnait donc à toutes les largeurs.
   !important nécessaire ici pour battre les 3 déclarations concurrentes, elles-mêmes !important. */
.cat-second-selection .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 32px !important; }
@media (max-width: 1100px) {
  .cat-second-selection .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 700px) {
  .cat-second-selection .cat-grid { grid-template-columns: 1fr !important; }
}

/* Point 6 (+ 1 écart supplémentaire trouvé au passage) : ".ae-catalog-exception-head" (titre +
   séparateur + lien "Découvrir tout"). Même bug : la règle desktop (grid-template-columns:auto 1fr
   auto, 3 colonnes - titre / séparateur flexible / lien) est suivie sans @media de la variante
   mobile (grid-template-columns:1fr auto, 2 colonnes) qui gagnait partout, ET
   ".ae-catalog-exception-head>span{display:none}" (mobile) gagnait aussi partout, faisant
   disparaître le séparateur même en desktop - non signalé explicitement par le client (qui ne
   parlait que du texte/type des boutons et du centrage) mais même cause racine, corrigé au passage
   comme dans le reste de ce chantier. Le texte/tag des boutons ("Ajouter à la sélection", vrai
   <button>, vrai ajout au panier) est traité côté template (product-list.tpl) - le centrage vient
   naturellement du <button> une fois le bon tag utilisé (aucune règle ne force text-align sur
   .cat-add, confirmé par CDP : le user-agent stylesheet centre déjà tout <button>). */
.ae-catalog-exception-head { grid-template-columns: auto 1fr auto; }
.ae-catalog-exception-head > span { display: block; }
@media (max-width: 700px) {
  .ae-catalog-exception-head { grid-template-columns: 1fr auto; }
  .ae-catalog-exception-head > span { display: none; }
}

/* Point 7 : bloc "L'inspiration Allo Exotic" (recettes).
   - .cat-recipes-head (titre+kicker à gauche / paragraphe à droite, côte à côte en desktop) : le
     bug ici est plus profond que la simple fuite de @media - TOUTE la région recettes/exception de
     theme.css (~120 déclarations) a perdu ses @media, y compris une révision ultérieure "V4"
     (réduction ~35%, cf. commentaire d'origine dans theme.css) qui redéfinit .cat-recipes-head en
     !important pour le desktop (grid-template-columns:1fr .9fr, gap:40px, margin-bottom:28px) ET sa
     propre variante mobile, également en !important, mais physiquement placée APRÈS dans le fichier
     généré - elle gagne donc À TOUTES LES LARGEURS (vérifié : .cat-recipes-head mesuré à une seule
     colonne de 1508px même à 1600px sur la page live). Confirmé par CDP sur la VRAIE maquette (aux 2
     fichiers sources, 1600 et 375px) que le rendu réel attendu est bien : desktop 2 colonnes
     (grid-template-columns mesuré ≈783px/705px, ratio 1fr/.9fr) avec le paragraphe à droite
     (justify-self:end), et un empilement à 1 colonne sous le vrai breakpoint source de ce sélecteur
     (@media(max-width:1050px), différent des paliers 700/1100 utilisés ailleurs sur cette page -
     confirmé par la mesure réelle à 375px : une seule colonne). !important nécessaire pour les
     propriétés où la règle concurrente en a un (grid-template-columns/gap/margin-bottom) ; pas pour
     justify-self du paragraphe (aucune des 2 déclarations concurrentes n'en a).
     ÉCART CLIENT SIGNALÉ : le client a explicitement demandé ce paragraphe "en dessous du titre"
     plutôt que côte à côte, mais a aussi demandé, dans le même retour, de respecter la maquette au
     pixel près - ces deux consignes se contredisent sur ce point précis puisque la maquette réelle
     est bien côte à côte en desktop. Choix fait ici : fidélité à la maquette réelle (côte à côte à
     droite en desktop, empilé seulement sous 1050px) - à trancher avec le client si ce rendu ne lui
     convient pas malgré tout (cf. rapport de tâche).
   - .cat-recipes-all (lien "Explorer toutes nos recettes") : même bug, la variante mobile
     (justify-content:flex-start) gagnait partout ; aucune des deux déclarations n'a !important. */
.cat-recipes-head { grid-template-columns: 1fr .9fr !important; gap: 40px !important; margin-bottom: 28px !important; }
.cat-recipes-head > p { justify-self: end; }
@media (max-width: 1050px) {
  .cat-recipes-head { grid-template-columns: 1fr !important; gap: 20px !important; margin-bottom: 22px !important; }
  .cat-recipes-head > p { justify-self: start; }
}
.cat-recipes-all { justify-content: flex-end; }
@media (max-width: 700px) {
  .cat-recipes-all { justify-content: flex-start; }
}

/* ============================================================================================
   Task 4 (docs/superpowers/plans/2026-09-27-cart-pro-space.md) — page panier classique.
   Toutes les nouvelles classes sont préfixées ".ae-cart-" (nom volontairement unique) : la maquette
   source utilisait des noms génériques (.row, .progress, .total, .summary, .checkout...) qui
   collisionneraient globalement avec Bootstrap (.row/.progress notamment, utilisés partout ailleurs
   sur ce site) si repris tels quels - repris ici sous forme préfixée avec le même contenu visuel.
   Écrit à la main (pas via append-theme-css.py, dont le regex d'extraction de règles aplatit les
   @media - bug déjà documenté ailleurs dans ce fichier) : les @media ci-dessous sont corrects dès le
   départ, vérifiés un par un (grep -B2 -A2 sur chaque sélecteur) avant de considérer la tâche finie.
   ============================================================================================ */
:root {
  --ae-cart-green: #0b3428;
  --ae-cart-ink: #16372d;
  --ae-cart-muted: #6b746f;
  --ae-cart-line: #dfe4e1;
  --ae-cart-soft: #f6f7f5;
  --ae-cart-red: #a64236;
}

.ae-cart-main { box-sizing: border-box; font-family: Inter, Arial, sans-serif; color: var(--ae-cart-ink); width: min(1420px, calc(100% - 56px)); margin: 0 auto; padding: 40px 0 110px; }
.ae-cart-main * { box-sizing: border-box; }
.ae-cart-main button { font: inherit; cursor: pointer; }

.ae-cart-crumb { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #7a847f; margin-bottom: 34px; }
.ae-cart-crumb a { color: inherit; text-decoration: none; }
.ae-cart-crumb span[aria-hidden] { margin: 0 6px; }

.ae-cart-head { display: flex; justify-content: space-between; align-items: end; padding-bottom: 28px; border-bottom: 1px solid var(--ae-cart-line); gap: 24px; }
.ae-cart-head h1 { font: 500 clamp(48px, 5vw, 72px)/.95 'Cormorant Garamond', Georgia, serif; margin: 0; }
.ae-cart-head p { max-width: 450px; margin: 0 0 8px; color: var(--ae-cart-muted); font-size: 13px; line-height: 1.7; }

.ae-cart-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr); gap: 56px; margin-top: 34px; align-items: start; }
@media (max-width: 1000px) {
  .ae-cart-grid { grid-template-columns: 1fr; gap: 40px; }
  .ae-cart-head { align-items: start; flex-direction: column; gap: 16px; }
  /* Repris de cart-std/styles.css (".summary{position:static}" sous 1000px) : évite qu'un aside
     sticky chevauche le contenu quand la grille repasse en une seule colonne. */
  .ae-cart-summary { position: static; }
}

.ae-cart-list-top { display: flex; align-items: center; justify-content: space-between; padding: 0 0 14px; gap: 16px; }
.ae-cart-list-top span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6d7772; }
.ae-cart-continue { text-decoration: underline; text-underline-offset: 4px; color: var(--ae-cart-green); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }

/* Compteur natif ("Vous avez X produits dans votre panier", cart-detailed.tpl) masqué : remplacé
   par .ae-cart-list-top ci-dessus pour matcher la maquette (compteur + lien "Continuer mes achats"
   sur la même ligne, avec accord pluriel correct). */
.ae-cart-body .cart-overview > .total_num_product { display: none; }
.ae-cart-body .no-items { display: block; padding: 48px 0; text-align: center; color: var(--ae-cart-muted); font-size: 13px; }

/* --- Ligne produit (surcharge de checkout/_partials/cart-detailed-product-line.tpl) ---
   Reconstruction du 2026-09-28 (fix capture.py, commit 915feb45) : dimensions/gap repris de
   cart-std/styles.css (".cart-item", jamais vu par la Task 4) plutôt que des valeurs approchées. */
.ae-cart-item { display: grid; grid-template-columns: 190px minmax(0, 1fr) 145px; gap: 24px; padding: 24px 0; border-top: 1px solid var(--ae-cart-line); align-items: start; }
.ae-cart-item:last-child { border-bottom: 1px solid var(--ae-cart-line); }
.ae-cart-item-media { display: block; }
.ae-cart-item-media img { width: 100%; max-width: 190px; height: 210px; object-fit: cover; background: #f3f3f1; }
.ae-cart-item-kicker { font-size: 9px; text-transform: uppercase; letter-spacing: .15em; color: var(--ae-cart-red); font-weight: 600; margin-bottom: 7px; }
.ae-cart-item-title { display: block; font: 500 28px/1.02 'Cormorant Garamond', Georgia, serif; margin: 0 0 8px; color: inherit; text-decoration: none; }
.ae-cart-item-format { display: inline-flex; gap: 4px; border: 1px solid var(--ae-cart-line); padding: 9px 12px; margin: 0 6px 6px 0; font-size: 11px; background: #fff; }
.ae-cart-item-remove { display: block; margin-top: 18px; border: 0; background: transparent; padding: 0; text-decoration: underline; text-underline-offset: 3px; color: #7b837f; font-size: 10px; }
.ae-cart-item-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 52px; }
.ae-cart-item-price { font: 500 22px/1 'Cormorant Garamond', Georgia, serif; color: var(--ae-cart-green); white-space: nowrap; }

/* Stepper -/+ (custom.js) : mécanique réelle mais balisage propre à la maquette (bouton/span/bouton),
   plus le spinner vertical TouchSpin natif. L'input natif reste dans le DOM (source de vérité des
   URLs + valeur courante lue par custom.js, TouchSpin continue de s'y initialiser sans erreur) mais
   n'est jamais montré - cf. commentaire en tête de cart-detailed-product-line.tpl. */
.ae-cart-item-qty { display: flex; align-items: center; justify-content: flex-end; }
.ae-cart-item-qty-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ae-cart-item-qty-stepper { display: grid; grid-template-columns: 34px 38px 34px; height: 36px; border: 1px solid #d6dcda; border-radius: 999px; overflow: hidden; }
.ae-cart-item-qty-stepper button { border: 0; background: #fff; color: var(--ae-cart-green); font-size: 16px; line-height: 1; padding: 0; }
.ae-cart-item-qty-stepper button:disabled { opacity: .4; cursor: not-allowed; }
.ae-cart-item-qty-value { display: grid; place-items: center; font-size: 12px; border-left: 1px solid #edf0ee; border-right: 1px solid #edf0ee; color: var(--ae-cart-ink); }

@media (max-width: 650px) {
  .ae-cart-item { grid-template-columns: 90px 1fr; gap: 14px; }
  .ae-cart-item-media img { width: 90px; height: 110px; }
  .ae-cart-item-actions { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; }
  .ae-cart-item-title { font-size: 22px; }

  /* Écart trouvé Task 5 (compare.py --cc à 375px) en comparant le bloc pickup : cart-cc/styles.css
     (ligne 15) réduit la marge horizontale de <main> sous 650px (min(100% - 28px,1420px) au lieu de
     calc(100% - 56px) au-delà) - jamais repris ici à la Task 4, donc .ae-cart-main rendait 28px plus
     étroit que la maquette sous 650px (319px vs 347px à 375px de large, vérifié), faisant reflow des
     textes (titre panier, cartes de retrait) un mot plus tôt que la référence. Repris tel quel depuis
     la maquette (pas une valeur inventée) - impacte tout le panier (Task 4 + Task 5), pas seulement
     le bloc pickup. */
  .ae-cart-main { width: min(calc(100% - 28px), 1420px); }
}

/* Bloc "expédié par" natif ($cart.sellers - marketplace ets_marketplace, le shop lui-même est
   enregistré comme "seller", donc CE bloc s'affiche sur CHAQUE panier, jamais un cas rare).
   L'image de logo (img/mp_seller/*.png) est cassée sur ce jeu de données -> masquée. Un client a
   signalé que "1 produit expédié par" restait seul, sans rien après (juste l'image cassée
   masquée) : themes/child_alloexotic_v2/templates/checkout/_partials/cart-detailed.tpl surcharge
   maintenant le fichier parent (une seule vraie différence : affiche $seller.sellerinfo->shop_name
   en texte à la place du logo, donnée déjà utilisée ailleurs dans ce même fichier natif). */
.ae-cart-body .shop_seller { border: 1px solid var(--ae-cart-line); padding: 14px 0; margin-bottom: 4px; }
.ae-cart-body .shop_seller .shop_logo { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ae-cart-muted); }
.ae-cart-body .shop_seller .shop_logo img { display: none; }
.ae-cart-body .shop_seller .shop_logo strong { color: var(--ae-cart-ink); font-weight: 600; }

/* --- Bandeau libre "Livraison offerte" (marketing statique, cf. commentaire dans cart.tpl) --- */
.ae-cart-delivery-note { margin-top: 28px; padding: 22px 24px; background: var(--ae-cart-soft); display: flex; justify-content: space-between; gap: 20px; align-items: center; flex-wrap: wrap; }
.ae-cart-delivery-note strong { font: 500 18px 'Cormorant Garamond', Georgia, serif; }
.ae-cart-delivery-note span { font-size: 11px; color: var(--ae-cart-muted); }

/* --- Récapitulatif de commande (checkout/_partials/cart-summary-aside.tpl) ---
   Reconstruction du 2026-09-28 (fix capture.py, commit 915feb45) : remplace l'ancien style qui
   restylait le conteneur natif ".cart-summary" (improvisé, jamais vu la vraie maquette). Dimensions
   reprises de cart-std/styles.css (".summary"/".row"/".coupon"/".checkout", jamais vues par la
   Task 4) - contenu toujours branché sur les vraies données (cf. commentaires du .tpl), seul le
   balisage change. */
.ae-cart-summary { position: sticky; top: 24px; border: 1px solid #d9dfdc; padding: 30px; background: #fff; }
.ae-cart-summary h2 { font: 500 34px/1 'Cormorant Garamond', Georgia, serif; margin: 0 0 24px; }
.ae-cart-summary-row { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; font-size: 12px; }
.ae-cart-summary-free { color: #46784e; font-weight: 600; }
.ae-cart-summary-discount { display: none; }
.ae-cart-summary-discount.is-visible { display: flex; color: #46784e; }
.ae-cart-summary-total { border-top: 1px solid var(--ae-cart-line); margin-top: 12px; padding-top: 20px; font-weight: 600; font-size: 14px; }
.ae-cart-summary-total strong { font: 500 28px 'Cormorant Garamond', Georgia, serif; }
.ae-cart-summary-warning { margin: 6px 0 16px; padding: 12px 14px; background: #fbeceb; color: var(--ae-cart-red); font-size: 11px; line-height: 1.5; }
.ae-cart-summary-checkout { display: block; width: 100%; height: 52px; border: 1px solid var(--ae-cart-green); background: var(--ae-cart-green); color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; text-align: center; line-height: 50px; text-decoration: none; }
.ae-cart-summary-checkout:hover { background: #08281f; color: #fff; }
.ae-cart-summary-checkout:disabled,
.ae-cart-summary-checkout[disabled] { opacity: .45; cursor: not-allowed; }
.ae-cart-summary-secure { text-align: center; font-size: 9px; color: #7d8581; margin-top: 12px; letter-spacing: .08em; text-transform: uppercase; }

/* --- Barre "Livraison offerte"/"Disponibilité des retraits" (checkout/_partials/
   cart-shipping-progress.tpl) : positionnée DANS le récapitulatif, entre la ligne
   "Livraison"/"Retrait en boutique" et le code avantage - comme dans la vraie maquette (l'ancien
   écart pixel assumé par la Task 4, qui la plaçait avant les totaux faute d'avoir vu ".summary",
   n'existe plus). --- */
.ae-cart-progress { height: 3px; background: #e7ece9; margin: 8px 0 10px; border-radius: 3px; overflow: hidden; }
.ae-cart-progress i { display: block; height: 100%; background: var(--ae-cart-green); }
.ae-cart-shipping-msg { font-size: 10px; color: var(--ae-cart-muted); margin-bottom: 22px; }

/* --- Code avantage (checkout/_partials/cart-voucher.tpl, surchargé) : mécanisme natif inchangé
   (form/champs/classe js-error, cf. commentaires du .tpl), apparence alignée sur ".coupon-wrap" de
   la maquette. Le <label> réel (accessibilité) est visuellement masqué comme dans la maquette
   (".status-live") : le libellé visible est le placeholder de l'input, pas une ligne de texte à
   part. --- */
.ae-cart-coupon-wrap { margin: 18px 0 22px; }
.ae-cart-coupon-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ae-cart-coupon-added { list-style: none; margin: 0 0 10px; padding: 0; font-size: 11px; }
.ae-cart-coupon-added li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--ae-cart-line); }
.ae-cart-coupon-added-amount { color: #46784e; font-weight: 600; white-space: nowrap; }
.ae-cart-coupon-added-amount a { margin-left: 8px; color: var(--ae-cart-red); text-decoration: none; }
.ae-cart-coupon { display: grid; grid-template-columns: 1fr auto; margin: 0; }
.ae-cart-coupon-input { height: 44px; border: 1px solid #d7ddda; border-right: 0; padding: 0 12px; font-size: 11px; width: 100%; }
.ae-cart-coupon-btn { height: 44px; border: 1px solid var(--ae-cart-green); background: #fff; color: var(--ae-cart-green); padding: 0 15px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.ae-cart-coupon-feedback { min-height: 18px; margin-top: 7px; font-size: 10px; color: var(--ae-cart-muted); }
/* Bug natif trouvé en CDP (déjà documenté ici avant la reconstruction du 2026-09-28) : .js-error
   (message d'erreur de code promo) n'a AUCUN display:none par défaut dans ce thème (Bootstrap, dont
   dépendait ce masquage dans leo_bicomart, n'est pas chargé/actif ici) - masqué par défaut ; le JS
   natif de PrestaShop (.show()/style inline) reste inchangé et passera outre cette règle CSS pour
   afficher une vraie erreur le cas échéant. */
.ae-cart-coupon-feedback.js-error { display: none; }
.ae-cart-coupon-offers-title { margin: 14px 0 6px; font-size: 10px; color: var(--ae-cart-muted); }
.ae-cart-coupon-offers { list-style: none; margin: 0; padding: 0; font-size: 11px; }
.ae-cart-coupon-offer-code { font-weight: 600; color: var(--ae-cart-green); }

/* --- Recommandations panier (cross-sell réel, Td_alloexotic_v2_home::
   hookDisplayCrossSellingShoppingCart(), modules/td_alloexotic_v2_home/views/templates/hook/
   cart-cross-sell.tpl) --- */
.ae-cart-recos { margin-top: 70px; padding-top: 50px; border-top: 1px solid var(--ae-cart-line); width: min(1420px, calc(100% - 56px)); margin-left: auto; margin-right: auto; box-sizing: border-box; font-family: Inter, Arial, sans-serif; color: var(--ae-cart-ink); }
.ae-cart-recos * { box-sizing: border-box; }
.ae-cart-recos-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 24px; gap: 24px; flex-wrap: wrap; }
.ae-cart-recos-head h2 { font: 500 36px/1 'Cormorant Garamond', Georgia, serif; margin: 0; }
.ae-cart-recos-head p { font-size: 12px; color: var(--ae-cart-muted); max-width: 440px; line-height: 1.6; margin: 0; }
.ae-cart-reco-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ae-cart-reco { border-top: 1px solid var(--ae-cart-line); padding-top: 16px; }
.ae-cart-reco a { color: inherit; text-decoration: none; }
.ae-cart-reco img { width: 100%; aspect-ratio: 1.2 / 1; object-fit: cover; background: #f4f4f2; display: block; }
.ae-cart-reco h3 { font: 500 20px 'Cormorant Garamond', Georgia, serif; margin: 13px 0 4px; }
.ae-cart-reco p { font-size: 11px; margin: 0 0 10px; color: var(--ae-cart-muted); }
.ae-cart-reco-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ae-cart-reco-bottom strong { font-size: 14px; color: var(--ae-cart-green); }
.ae-cart-reco-add { border: 1px solid var(--ae-cart-green); background: #fff; color: var(--ae-cart-green); padding: 9px 12px; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 1000px) {
  .ae-cart-reco-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 650px) {
  .ae-cart-reco-grid { grid-template-columns: 1fr; }
}

/* Évite le doublon avec le widget générique "produits mis en avant" (ps_featuredproducts), déjà
   branché nativement sur displayCrossSellingShoppingCart (vérifié en base, ps_hook_module) et
   laissé actif tel quel pour les AUTRES pages/thèmes - seule sa sortie sur CETTE page (panier,
   body#cart) est masquée pour ne pas superposer 2 blocs de recommandations produits. */
body#cart .featured-products { display: none; }

/* --- Bloc "Vos lieux de retrait" (Task 5, checkout/_partials/cart-pickup.tpl, $ae_mode == 'retrait')
   Repris à la main depuis cart-cc/styles.css (grep ".pickup", lignes 31-45) - PAS via
   append-theme-css.py (bug d'aplatissement des @media déjà documenté plus haut dans ce fichier) :
   le @media(max-width:650px) ci-dessous est correct dès le départ, vérifié par grep -B2 -A2 sur
   chaque sélecteur avant de considérer la tâche finie. Classes préfixées ".ae-cart-pickup-*" (les
   noms génériques de la maquette, .pickup/.pickup-search/etc., n'ont 0 occurrence ailleurs dans
   theme.css/custom.css - vérifié - mais préfixés par cohérence avec le reste de cette page).

   Bug trouvé en comparant au pixel (compare.py --cc) : la maquette source ne fixe explicitement
   AUCUN line-height sur .pickup-kicker/-availability/-feedback et les strong/small/em des cartes de
   point de retrait - elle hérite donc du line-height "normal" par défaut du navigateur (~1.2). Le
   thème parent (leo_bicomart/theme.css, reset Tailwind global) fixe lui un line-height:1.6 sur
   html/body, hérité ici faute d'override : chaque ligne de petit texte (9-12px) prenait ~25.6px de
   haut au lieu de ~1.2x sa taille de police, gonflant la hauteur totale du bloc de +8.3% (509px vs
   470px, mesuré par compare.py). Neutralisé ci-dessous par un reset local, même pattern que
   ".ae-cart-recos *{box-sizing:border-box}" (Task 4) pour isoler un nouveau bloc du reset global du
   thème parent plutôt que de deviner un line-height fixe non présent dans la maquette. --- */
.ae-cart-pickup, .ae-cart-pickup * { line-height: normal; }
.ae-cart-pickup { margin-top: 28px; padding: 24px; border: 1px solid #d9dfdc; background: #f7f6f2; }
.ae-cart-pickup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid #dde1de; }
.ae-cart-pickup-kicker { display: block; margin-bottom: 5px; color: var(--ae-cart-green); font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.ae-cart-pickup h2 { margin: 0; font: 500 25px/1 'Cormorant Garamond', Georgia, serif; }
.ae-cart-pickup-availability { display: flex; align-items: center; gap: 7px; font-size: 9px; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.ae-cart-pickup-availability i { width: 9px; height: 9px; border-radius: 50%; background: #c8ee62; box-shadow: 0 0 0 3px rgba(200, 238, 98, .2); }
.ae-cart-pickup-search { padding: 17px 0 12px; }
.ae-cart-pickup-search label { display: block; margin-bottom: 8px; color: #69736e; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.ae-cart-pickup-search > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.ae-cart-pickup-search input { min-width: 0; height: 46px; border: 1px solid #d5dbd8; background: #fff; padding: 0 13px; color: var(--ae-cart-ink); }
.ae-cart-pickup-search button { height: 46px; border: 1px solid var(--ae-cart-green); background: var(--ae-cart-green); color: #fff; padding: 0 20px; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ae-cart-pickup-feedback { min-height: 16px; margin: 7px 0 0; color: var(--ae-cart-red); font-size: 10px; }
.ae-cart-pickup-list { display: grid; gap: 10px; }
.ae-cart-pickup-location { width: 100%; display: grid; grid-template-columns: 34px 1fr 24px; align-items: center; gap: 12px; border: 1px solid var(--ae-cart-green); background: #fff; padding: 14px; text-align: left; color: var(--ae-cart-ink); }
.ae-cart-pickup-location[hidden] { display: none; }
.ae-cart-pickup-pin { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #f3f4f1; color: var(--ae-cart-green); font-size: 17px; }
.ae-cart-pickup-location strong, .ae-cart-pickup-location small, .ae-cart-pickup-location em { display: block; }
.ae-cart-pickup-location strong { font-size: 12px; font-weight: 500; }
.ae-cart-pickup-location small { margin-top: 5px; color: #69736e; font-size: 9px; }
.ae-cart-pickup-location em { margin-top: 5px; color: #46784e; font-size: 9px; font-style: normal; }
.ae-cart-pickup-check { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ae-cart-green); color: #c8ee62; font-size: 11px; }
.ae-cart-pickup-confirmation { margin-top: 10px; background: #dfe6e1; border-left: 3px solid var(--ae-cart-green); padding: 13px 15px; color: var(--ae-cart-ink); }
.ae-cart-pickup-confirmation[hidden] { display: none; }
.ae-cart-pickup-confirmation span, .ae-cart-pickup-confirmation strong, .ae-cart-pickup-confirmation small { display: block; }
.ae-cart-pickup-confirmation span { color: #46784e; font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ae-cart-pickup-confirmation strong { margin-top: 4px; font-size: 11px; }
.ae-cart-pickup-confirmation small { margin-top: 4px; color: #5f6b65; font-size: 9px; }
@media (max-width: 650px) {
  .ae-cart-pickup { padding: 18px; }
  .ae-cart-pickup-head { display: block; }
  .ae-cart-pickup-availability { margin-top: 12px; }
  .ae-cart-pickup-search > div { grid-template-columns: 1fr; }
  .ae-cart-pickup-search button { width: 100%; }
}
/* Boutons de lieu de retrait "disabled" (bloc non fonctionnel, cf. commentaire de cart-pickup.tpl) :
   neutralise le style natif "grisé" des <button disabled> pour rester fidèle à la maquette, qui ne
   grise pas ces boutons (ils sont juste inertes, pas visuellement désactivés). */
.ae-cart-pickup-location:disabled { opacity: 1; cursor: default; }

/* --- Espace Pro (Task 6, plan cart-pro-space, cms/page.tpl $cms.id == 11) ---
   CSS écrit à la main (comme .ae-cart-* et .ae-cart-pickup-*), PAS via append-theme-css.py : cette
   landing (espace-pro/styles.css) utilise des noms de classe et de variable CSS génériques
   (.hero, .manifesto, .wrap, .eyebrow, .tile, .card-like .doc-card, --green, --gold, --muted,
   --line, --paper...) qui existeraient en collision réelle avec de nombreuses autres règles déjà
   présentes dans theme.css (accumulées par les captures précédentes) si elles étaient ajoutées
   telles quelles au niveau global. Toutes les règles ci-dessous sont donc scopées sous
   `.ae-pro-landing` (le <main> de cette landing, cms/page.tpl) et les custom properties sont
   déclarées SUR .ae-pro-landing (pas sur :root) avec un préfixe --ae-pro-* : les propriétés CSS
   personnalisées héritent normalement de l'ancêtre le plus proche qui les définit, donc les
   scoper ainsi suffit à éviter toute fuite, sans avoir besoin de renommer les usages internes.
   Sections NON reprises ici : ticker/header/footer/drawer (partiels partagés du thème, déjà en
   place - cf. commentaire cms/page.tpl) et le bloc "Metrics" (.metric-strip/.metrics/.metric),
   absent du HTML réellement capturé des 7 sections de cette landing (hero/manifesto/journey/
   simulator/docs/form/faq - vérifié dans espace-pro/manifest.json, "metrics" n'y figure pas). */
.ae-pro-landing {
  --ae-pro-green: #0f3b2f; --ae-pro-green-2: #173f32; --ae-pro-green-3: #0a261e; --ae-pro-green-light: #e8f0eb;
  --ae-pro-brick: #a94a3f;
  --ae-pro-cream: #f4f2ed; --ae-pro-paper: #ffffff; --ae-pro-ink: #17211d; --ae-pro-muted: #647069; --ae-pro-line: #d9dfda; --ae-pro-line2: #e9ece7;
  --ae-pro-gold: #b98b54; --ae-pro-gold2: #d5a45a;
  --ae-pro-shadow: 0 20px 60px rgba(15, 59, 47, .09), 0 8px 24px rgba(15, 59, 47, .06);
  --ae-pro-shadow-lg: 0 30px 90px rgba(15, 59, 47, .14), 0 12px 32px rgba(15, 59, 47, .08);
  --ae-pro-ease: cubic-bezier(.16, 1, .3, 1);
  --ae-pro-serif: 'Cormorant Garamond', Georgia, serif; --ae-pro-sans: 'DM Sans', system-ui, sans-serif;
  box-sizing: border-box; background: var(--ae-pro-cream); color: var(--ae-pro-ink); font-family: var(--ae-pro-sans);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.6;
}
.ae-pro-landing, .ae-pro-landing *, .ae-pro-landing *::before, .ae-pro-landing *::after { box-sizing: border-box; }
.ae-pro-landing a { color: inherit; text-decoration: none; }
.ae-pro-landing button, .ae-pro-landing input, .ae-pro-landing select, .ae-pro-landing textarea { font: inherit; }
.ae-pro-landing :focus-visible { outline: 3px solid var(--ae-pro-gold2); outline-offset: 3px; }
.ae-pro-landing img { display: block; max-width: 100%; }
.ae-pro-landing .wrap { width: min(1440px, calc(100% - 56px)); margin: auto; }
.ae-pro-landing .eyebrow { display: flex; align-items: center; gap: 14px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ae-pro-brick); font-weight: 800; margin: 0; }
.ae-pro-landing .eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--ae-pro-brick); margin: 0; }
.ae-pro-landing .cta-main, .ae-pro-landing .cta-alt { height: 56px; display: inline-flex; align-items: center; gap: 22px; padding: 0 24px; border: 1px solid var(--ae-pro-green); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transition: all .35s var(--ae-pro-ease); position: relative; overflow: hidden; }
.ae-pro-landing .cta-main { background: var(--ae-pro-green); color: #fff; }
.ae-pro-landing .cta-main::before, .ae-pro-landing .cta-alt::before { content: ''; position: absolute; inset: 0; transform: translateX(-100%); transition: transform .5s var(--ae-pro-ease); }
.ae-pro-landing .cta-main::before { background: var(--ae-pro-green-2); }
.ae-pro-landing .cta-alt::before { background: var(--ae-pro-cream); }
.ae-pro-landing .cta-main:hover, .ae-pro-landing .cta-alt:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15, 59, 47, .14); }
.ae-pro-landing .cta-main:hover::before, .ae-pro-landing .cta-alt:hover::before { transform: translateX(0); }
.ae-pro-landing .cta-main span, .ae-pro-landing .cta-alt span { position: relative; }

/* Hero (espace-pro/sections-raw/hero.html) */
.ae-pro-landing .hero { background: var(--ae-pro-paper); border-bottom: 1px solid var(--ae-pro-line); overflow: hidden; position: relative; }
.ae-pro-landing .hero-grid { display: grid; grid-template-columns: 61% 39%; min-height: 640px; max-width: 1440px; margin: auto; width: calc(100% - 56px); align-items: center; }
.ae-pro-landing .hero-copy { padding: 88px 72px 72px 0; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 2; }
.ae-pro-landing .hero h1 { font-family: var(--ae-pro-serif); font-size: clamp(52px, 5.2vw, 84px); line-height: .92; letter-spacing: -.03em; color: var(--ae-pro-green); margin: 32px 0 24px; max-width: 680px; font-weight: 600; }
.ae-pro-landing .hero h1 em { font-style: italic; color: var(--ae-pro-gold); position: relative; display: inline-block; }
.ae-pro-landing .hero h1 em::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 8px; background: rgba(185, 139, 84, .18); z-index: -1; transform: skewX(-6deg); }
.ae-pro-landing .hero-lead { font-size: 17px; line-height: 1.75; color: #4f5c55; max-width: 620px; margin: 0; }
.ae-pro-landing .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 38px; }
.ae-pro-landing .hero-note { font-size: 11px; color: #5a6b64; margin-top: 18px; display: flex; align-items: center; gap: 10px; }
.ae-pro-landing .hero-note i { width: 32px; height: 1px; background: var(--ae-pro-line); display: inline-block; }
.ae-pro-landing .hero-media { position: relative; overflow: hidden; background: linear-gradient(135deg, #fdf8ef 0%, #f4ede0 100%); isolation: isolate; display: flex; align-items: center; justify-content: center; padding: 32px; border-radius: 0 0 0 24px; max-height: 620px; }
.ae-pro-landing .hero-media img { width: 100%; height: auto; max-width: 380px; max-height: 520px; object-fit: contain; object-position: center; display: block; transition: transform .4s var(--ae-pro-ease), box-shadow .4s var(--ae-pro-ease); border-radius: 16px; box-shadow: 0 20px 40px rgba(15, 59, 47, .12); }
.ae-pro-landing .hero-media:hover img { transform: scale(1.03) translateY(-4px); }
.ae-pro-landing .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 59, 47, .12), transparent 42%), linear-gradient(0deg, rgba(7, 35, 27, .48), transparent 52%); pointer-events: none; }
.ae-pro-landing .media-card { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 20px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .6); padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .10); transition: transform .5s var(--ae-pro-ease); border-radius: 10px; }
.ae-pro-landing .hero-media:hover .media-card { transform: translateY(-4px); }
.ae-pro-landing .media-card strong { font: 32px var(--ae-pro-serif); color: var(--ae-pro-green); display: block; line-height: 1; }
.ae-pro-landing .media-card span { display: block; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; margin-top: 6px; color: var(--ae-pro-muted); font-weight: 700; }
.ae-pro-landing .media-card b { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ae-pro-green); border-bottom: 1px solid var(--ae-pro-gold); padding-bottom: 2px; }

/* Manifesto & Bento (espace-pro/sections-raw/manifesto.html) */
.ae-pro-landing .manifesto { padding: 120px 0; background: var(--ae-pro-paper); position: relative; }
.ae-pro-landing .section-top { display: grid; grid-template-columns: 1fr .9fr; gap: 60px; align-items: end; margin-bottom: 56px; }
.ae-pro-landing .big-title { font-family: var(--ae-pro-serif); font-size: clamp(36px, 3.4vw, 56px); line-height: 1.08; letter-spacing: -.015em; color: var(--ae-pro-green); margin: 0; font-weight: 500; max-width: 720px; }
.ae-pro-landing .big-title em { font-style: italic; color: var(--ae-pro-gold); position: relative; }
.ae-pro-landing .big-title em::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: 4px; height: 6px; background: rgba(185, 139, 84, .14); z-index: -1; border-radius: 2px; }
.ae-pro-landing .section-copy { font-size: 17px; line-height: 1.8; color: #536159; margin: 0; max-width: 560px; }
.ae-pro-landing .bento { display: grid; grid-template-columns: 1.1fr .9fr .9fr; grid-template-rows: 280px 280px; gap: 18px; }
.ae-pro-landing .tile { border: 1px solid var(--ae-pro-line); background: var(--ae-pro-cream); position: relative; overflow: hidden; transition: all .45s var(--ae-pro-ease); }
.ae-pro-landing .tile:hover { transform: translateY(-6px); box-shadow: var(--ae-pro-shadow-lg); border-color: rgba(185, 139, 84, .3); }
.ae-pro-landing .tile.photo { grid-row: span 2; }
.ae-pro-landing .tile.photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 1s var(--ae-pro-ease); }
.ae-pro-landing .tile.photo:hover img { transform: scale(1.02); }
.ae-pro-landing .tile-text { padding: 32px; display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.ae-pro-landing .tile-no { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ae-pro-brick); font-weight: 800; display: flex; align-items: center; gap: 10px; }
.ae-pro-landing .tile-no::after { content: ''; width: 18px; height: 1px; background: currentColor; opacity: .5; }
.ae-pro-landing .tile h3 { font-family: var(--ae-pro-serif); font-size: 36px; line-height: 1.02; color: var(--ae-pro-green); margin: 0; font-weight: 600; }
.ae-pro-landing .tile p { font-size: 13px; line-height: 1.7; color: var(--ae-pro-muted); margin: 12px 0 0; }
.ae-pro-landing .tile.dark { background: var(--ae-pro-green); color: white; border-color: var(--ae-pro-green); }
.ae-pro-landing .tile.dark h3 { color: white; }
.ae-pro-landing .tile.dark p { color: #c2d0c8; }
.ae-pro-landing .tile.dark .tile-no { color: var(--ae-pro-gold2); }
.ae-pro-landing .tile.soft { background: var(--ae-pro-line2); }
.ae-pro-landing .tile.gold { background: linear-gradient(135deg, #fdf6e8, #f7e9d2); border-color: #e8d5b5; }
.ae-pro-landing .tile--featured { aspect-ratio: auto; }

/* Journey / parcours (espace-pro/sections-raw/journey.html) */
.ae-pro-landing .journey-sec { padding: 120px 0; background: var(--ae-pro-cream); position: relative; overflow: hidden; }
.ae-pro-landing .journey-sec::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--ae-pro-line), transparent); }
/* .section-head entre en collision réelle (nom générique) avec theme.css (autre capture,
   `.section-head{text-align:center;max-width:700px;margin:0 auto 48px}`) : ce max-width:700px
   hérité écrasait la mise en page flex voulue (h2 comprimé sur 700px au lieu de la largeur de
   .wrap, retour à la ligne excessif du titre, section ~30% plus haute que la maquette - trouvé
   via compare.py + CSS.getMatchedStylesForNode). text-align/max-width/margin réaffirmés
   explicitement ci-dessous pour neutraliser cet héritage, en plus de display/justify/align déjà
   nécessaires (qui gagnaient déjà par spécificité, eux). */
.ae-pro-landing .section-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin: 0 0 64px; max-width: none; text-align: left; }
.ae-pro-landing .section-head h2 { font-family: var(--ae-pro-serif); font-size: clamp(52px, 5.6vw, 86px); line-height: .9; margin: 0; color: var(--ae-pro-green); font-weight: 600; letter-spacing: -.03em; }
.ae-pro-landing .section-head h2 em { font-style: italic; color: var(--ae-pro-gold); }
.ae-pro-landing .section-head p { max-width: 480px; margin: 0; color: var(--ae-pro-muted); line-height: 1.7; font-size: 14px; }
.ae-pro-landing .journey { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #9ba8a1; }
.ae-pro-landing .journey::before { content: ''; position: absolute; top: -1px; left: 0; width: var(--progress, 0%); height: 1px; background: var(--ae-pro-green); }
.ae-pro-landing .journey-card { padding: 32px 32px 40px 0; margin-right: 32px; border-right: 1px solid var(--ae-pro-line); position: relative; transition: all .4s var(--ae-pro-ease); }
.ae-pro-landing .journey-card:last-child { border: 0; margin-right: 0; }
.ae-pro-landing .journey-card:hover { background: rgba(255, 255, 255, .5); padding-left: 12px; }
.ae-pro-landing .journey-no { font: 52px var(--ae-pro-serif); color: #bac2bd; transition: color .4s, transform .4s var(--ae-pro-ease); display: inline-block; }
.ae-pro-landing .journey-card:hover .journey-no { color: var(--ae-pro-gold); transform: translateY(-4px); }
.ae-pro-landing .journey-card h3 { font-family: var(--ae-pro-serif); font-size: 30px; color: var(--ae-pro-green); margin: 42px 0 12px; font-weight: 600; }
.ae-pro-landing .journey-card p { font-size: 13px; line-height: 1.7; color: var(--ae-pro-muted); }

/* Simulateur de commission (espace-pro/sections-raw/simulator.html) - fonctionnel, cf. custom.js */
.ae-pro-landing .sim-sec { padding: 120px 0; background: var(--ae-pro-paper); border-top: 1px solid var(--ae-pro-line); border-bottom: 1px solid var(--ae-pro-line); }
.ae-pro-landing .sim-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: start; }
.ae-pro-landing .sim-copy h2 { font-family: var(--ae-pro-serif); font-size: clamp(48px, 5vw, 72px); line-height: .92; color: var(--ae-pro-green); margin: 0 0 22px; font-weight: 600; }
.ae-pro-landing .sim-copy > p { font-size: 16px; line-height: 1.75; color: var(--ae-pro-muted); max-width: 560px; margin: 0 0 36px; }
.ae-pro-landing .sim-card { background: var(--ae-pro-cream); border: 1px solid var(--ae-pro-line); padding: 36px; box-shadow: var(--ae-pro-shadow); position: relative; overflow: hidden; }
.ae-pro-landing .sim-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--ae-pro-gold), var(--ae-pro-gold2)); }
.ae-pro-landing .sim-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.ae-pro-landing .sim-row label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--ae-pro-green); }
.ae-pro-landing .sim-value { font: 28px var(--ae-pro-serif); color: var(--ae-pro-green); font-weight: 600; }
.ae-pro-landing input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: var(--ae-pro-line); border-radius: 2px; outline: none; margin: 18px 0 28px; }
.ae-pro-landing input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ae-pro-green); border: 3px solid #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); cursor: pointer; transition: transform .2s; }
.ae-pro-landing input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.ae-pro-landing input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--ae-pro-green); border: 3px solid #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); cursor: pointer; }
.ae-pro-landing .sim-select { width: 100%; height: 48px; border: 1px solid var(--ae-pro-line); background: #fff; padding: 0 14px; font-size: 14px; font-weight: 600; color: var(--ae-pro-green); }
.ae-pro-landing .sim-results { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ae-pro-landing .sim-result { background: #fff; border: 1px solid var(--ae-pro-line2); padding: 18px 20px; }
.ae-pro-landing .sim-result small { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ae-pro-muted); font-weight: 800; display: block; margin-bottom: 6px; }
.ae-pro-landing .sim-result strong { font: 22px var(--ae-pro-serif); color: var(--ae-pro-green); }
.ae-pro-landing .sim-result.net { background: var(--ae-pro-green); color: #fff; border-color: var(--ae-pro-green); }
.ae-pro-landing .sim-result.net small { color: #b9c9c2; }
.ae-pro-landing .sim-result.net strong { color: #fff; }
.ae-pro-landing .sim-note { margin-top: 18px; font-size: 11px; line-height: 1.6; color: #5a6b64; display: flex; gap: 10px; }
.ae-pro-landing .sim-note i { width: 20px; height: 1px; background: var(--ae-pro-line); margin-top: 9px; flex: none; }

/* Docs / "ce qu'on vous demande vraiment" (espace-pro/sections-raw/docs.html) */
.ae-pro-landing .docs-sec { padding: 100px 0; background: var(--ae-pro-cream); }
.ae-pro-landing .docs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 50px; }
.ae-pro-landing .doc-card { background: var(--ae-pro-paper); border: 1px solid var(--ae-pro-line); padding: 28px; transition: all .4s var(--ae-pro-ease); position: relative; }
.ae-pro-landing .doc-card:hover { transform: translateY(-4px); box-shadow: var(--ae-pro-shadow); border-color: var(--ae-pro-gold); }
.ae-pro-landing .doc-check { width: 42px; height: 42px; border-radius: 50%; background: var(--ae-pro-green-light); display: grid; place-items: center; color: var(--ae-pro-green); margin-bottom: 20px; font-size: 18px; }
.ae-pro-landing .doc-card h4 { font-family: var(--ae-pro-serif); font-size: 22px; color: var(--ae-pro-green); margin: 0 0 8px; }
.ae-pro-landing .doc-card p { font-size: 12px; line-height: 1.65; color: var(--ae-pro-muted); margin: 0; }
.ae-pro-landing .doc-card ul { margin: 14px 0 0; padding: 0; list-style: none; }
.ae-pro-landing .doc-card li { font-size: 12px; line-height: 1.6; color: #4f5c55; padding-left: 16px; position: relative; margin-bottom: 6px; }
.ae-pro-landing .doc-card li::before { content: '—'; position: absolute; left: 0; color: var(--ae-pro-gold); }

/* Formulaire de candidature (espace-pro/sections-raw/form.html) - NON FONCTIONNEL, cf. commentaire
   dans cms/page.tpl : le bouton ne soumet rien (onsubmit="return false"), comme voulu par la
   maquette elle-même ("Aucune donnée n'est envoyée depuis cette page démo"). */
.ae-pro-landing .form-sec { padding: 120px 0; background: var(--ae-pro-paper); position: relative; }
.ae-pro-landing .form-sec::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--ae-pro-line), transparent); }
.ae-pro-landing .form-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 80px; align-items: start; }
.ae-pro-landing .form-intro h2 { font-family: var(--ae-pro-serif); font-size: clamp(48px, 5vw, 76px); line-height: .9; color: var(--ae-pro-green); margin: 0 0 20px; font-weight: 600; }
.ae-pro-landing .form-intro p { font-size: 15px; line-height: 1.75; color: var(--ae-pro-muted); max-width: 520px; }
.ae-pro-landing .form-trust { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ae-pro-landing .trust-item { display: flex; gap: 12px; align-items: start; font-size: 12px; line-height: 1.6; color: #4f5c55; }
.ae-pro-landing .trust-item b { width: 28px; height: 28px; border-radius: 50%; background: var(--ae-pro-green-light); display: grid; place-items: center; color: var(--ae-pro-green); flex: none; font-size: 12px; }
.ae-pro-landing .pro-form { background: var(--ae-pro-cream); border: 1px solid var(--ae-pro-line); padding: 40px; box-shadow: var(--ae-pro-shadow-lg); position: sticky; top: 104px; }
.ae-pro-landing .pro-form h3 { font-family: var(--ae-pro-serif); font-size: 28px; color: var(--ae-pro-green); margin: 0 0 6px; }
.ae-pro-landing .pro-form > p { font-size: 12px; color: var(--ae-pro-muted); margin: 0 0 28px; line-height: 1.6; }
.ae-pro-landing .field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.ae-pro-landing .field label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--ae-pro-green); }
.ae-pro-landing .field input, .ae-pro-landing .field select, .ae-pro-landing .field textarea { height: 48px; border: 1px solid var(--ae-pro-line); background: #fff; padding: 0 14px; font-size: 14px; color: var(--ae-pro-ink); transition: border-color .2s, box-shadow .2s; width: 100%; }
.ae-pro-landing .field textarea { height: 108px; padding: 12px 14px; resize: vertical; }
.ae-pro-landing .field input:focus, .ae-pro-landing .field select:focus, .ae-pro-landing .field textarea:focus { border-color: var(--ae-pro-gold); box-shadow: 0 0 0 3px rgba(185, 139, 84, .12); outline: none; }
.ae-pro-landing .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ae-pro-landing .submit-row { margin-top: 8px; display: flex; flex-direction: column; gap: 14px; }
.ae-pro-landing .btn-submit { height: 56px; background: var(--ae-pro-green); color: #fff; border: 1px solid var(--ae-pro-green); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 14px; transition: all .35s var(--ae-pro-ease); position: relative; overflow: hidden; cursor: pointer; width: 100%; }
.ae-pro-landing .btn-submit::before { content: ''; position: absolute; inset: 0; background: var(--ae-pro-green-2); transform: translateY(100%); transition: transform .4s var(--ae-pro-ease); }
.ae-pro-landing .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15, 59, 47, .22); }
.ae-pro-landing .btn-submit:hover::before { transform: translateY(0); }
.ae-pro-landing .btn-submit span { position: relative; }
.ae-pro-landing .form-status { min-height: 20px; font-size: 12px; font-weight: 600; color: var(--ae-pro-green); line-height: 1.5; }
.ae-pro-landing .form-status:not(:empty) { background: #e8f0eb; border-left: 3px solid var(--ae-pro-green); padding: 10px 14px; }

/* FAQ (espace-pro/sections-raw/faq.html) */
.ae-pro-landing .faq-sec { padding: 110px 0; background: var(--ae-pro-cream); border-top: 1px solid var(--ae-pro-line); }
.ae-pro-landing .faq-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; }
.ae-pro-landing .faq-layout h2 { font-family: var(--ae-pro-serif); font-size: clamp(48px, 5vw, 72px); line-height: .9; color: var(--ae-pro-green); margin: 0; }
.ae-pro-landing .faq-item { border-bottom: 1px solid var(--ae-pro-line); background: var(--ae-pro-paper); transition: all .3s; }
.ae-pro-landing .faq-item.open { background: #fff; box-shadow: var(--ae-pro-shadow); }
.ae-pro-landing .faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 24px; background: none; border: 0; text-align: left; font-size: 15px; font-weight: 600; color: var(--ae-pro-green); cursor: pointer; }
.ae-pro-landing .faq-q i { width: 32px; height: 32px; border: 1px solid var(--ae-pro-line); border-radius: 50%; display: grid; place-items: center; font-style: normal; transition: all .3s var(--ae-pro-ease); flex: none; }
.ae-pro-landing .faq-item.open .faq-q i { background: var(--ae-pro-green); color: #fff; border-color: var(--ae-pro-green); transform: rotate(45deg); }
.ae-pro-landing .faq-a { padding: 0 24px 24px; font-size: 13px; line-height: 1.7; color: var(--ae-pro-muted); overflow: hidden; }
.ae-pro-landing .faq-a[hidden] { display: none; }
.ae-pro-landing .faq-item.open .faq-a { display: block; animation: ae-pro-fade-in .3s var(--ae-pro-ease); }
@keyframes ae-pro-fade-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* Reveal au scroll (.motion) : la maquette source anime ces blocs au scroll via un script
   d'orchestration non repris ici (pas de moteur JS scroll-reveal ailleurs dans ce thème) -
   contenu toujours visible par défaut (état de repli propre de la maquette source elle-même,
   `.motion{opacity:1;transform:none}`), pas de FOUC ni de contenu caché sans JS. */
.ae-pro-landing .motion { opacity: 1; transform: none; }

@media (max-width: 1180px) {
  .ae-pro-landing .hero-grid { grid-template-columns: 1fr; width: 100%; }
  .ae-pro-landing .hero-copy { padding: 64px 28px; }
  .ae-pro-landing .hero-media { min-height: 420px; }
  .ae-pro-landing .section-top, .ae-pro-landing .sim-grid, .ae-pro-landing .form-layout, .ae-pro-landing .faq-layout { grid-template-columns: 1fr; gap: 32px; }
  .ae-pro-landing .bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .ae-pro-landing .tile.photo { grid-row: span 1; grid-column: span 2; }
  .ae-pro-landing .journey { grid-template-columns: 1fr 1fr; }
  .ae-pro-landing .journey-card { margin-right: 0; padding-right: 0; }
  .ae-pro-landing .docs-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .ae-pro-landing .wrap, .ae-pro-landing .hero-grid { width: calc(100% - 32px); }
  .ae-pro-landing .bento, .ae-pro-landing .docs-grid, .ae-pro-landing .field-row, .ae-pro-landing .form-trust { grid-template-columns: 1fr; }
  .ae-pro-landing .tile.photo { grid-column: span 1; }
  .ae-pro-landing .journey { grid-template-columns: 1fr; }
  .ae-pro-landing .journey-card { border-right: 0; border-bottom: 1px solid var(--ae-pro-line); margin-right: 0; padding-right: 0; padding-bottom: 24px; margin-bottom: 0; }
  .ae-pro-landing .journey-card:last-child { border-bottom: 0; }
}
@media (min-width: 681px) and (max-width: 1180px) {
  .ae-pro-landing .tile--featured { grid-column: span 2; min-height: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .ae-pro-landing .motion { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================================================
   Task 3 (docs/superpowers/plans/2026-09-28-checkout-tunnel.md) — tunnel de commande, étape
   "Livraison" (checkout/_partials/steps/{checkout-step,personal-information,addresses,shipping}.tpl
   + checkout/checkout.tpl). Toutes les nouvelles classes sont préfixées ".ae-checkout-" (même
   discipline que ".ae-cart-" au chantier précédent) : la maquette source réutilise des noms très
   génériques (.panel, .field, .grid2, .choice, .summary...) qui collisionneraient avec Bootstrap ou
   avec d'autres pages du thème. Écrit à la main (pas de générateur automatique) : @media vérifiés un
   par un. body#checkout confirmé en conditions réelles (grep themes/leo_bicomart/assets/css/
   theme.css - "body#checkout section.checkout-step" existe déjà nativement).

   ÉCART RÉEL IMPORTANT (voir aussi les commentaires des .tpl et le rapport de tâche) :
   themes/leo_bicomart/assets/js/custom.js (thème PARENT, non modifié) masque ENTIEREMENT toute
   étape non courante ($('.checkout-step').hide()) - le vrai tunnel de ce shop est un ASSISTANT
   pas-à-pas (une étape visible à la fois + bouton "précédent"), pas l'accordéon multi-panneaux
   dépliables de la maquette. Le CSS ci-dessous habille donc surtout l'état ".-current" (seul
   réellement visible en pratique) ; les règles pour un état "replié visible" sont présentes par
   prudence/cohérence mais n'ont pas d'effet tant que ce hide() JS natif n'est pas modifié (hors
   sujet de cette tâche - ne pas toucher un fichier JS partagé par tout le thème pour ça). */
:root {
  --ae-checkout-green: #0b3428;
  --ae-checkout-ink: #16372d;
  --ae-checkout-muted: #6b746f;
  --ae-checkout-line: #dde3df;
  --ae-checkout-soft: #f6f7f5;
  --ae-checkout-red: #a64236;
  --ae-checkout-gold: #b98a46;
}

body#checkout .ae-checkout-content { width: min(1420px, calc(100% - 56px)); margin: 0 auto; padding: 8px 0 100px; box-sizing: border-box; }
body#checkout .ae-checkout-content * { box-sizing: border-box; }
body#checkout .ae-checkout-content button { font: inherit; }

/* --- Grille 2 colonnes (flow-stack / summary), reprise de .checkout-grid de la maquette --- */
body#checkout #checkoutView.ae-checkout-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr); gap: 56px; align-items: start; font-family: Inter, Arial, sans-serif; color: var(--ae-checkout-ink); }
body#checkout .ae-checkout-flow-stack { display: grid; gap: 14px; }
@media (max-width: 1000px) {
  body#checkout #checkoutView.ae-checkout-grid { grid-template-columns: 1fr; gap: 32px; }
  body#checkout .ae-checkout-summary { position: static; }
}

/* --- Panneau d'étape (.checkout-step natif habillé en "flow-panel") --- */
body#checkout section.checkout-step.ae-checkout-flow-panel {
  border: 1px solid var(--ae-checkout-line);
  background: #fff;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}
body#checkout section.checkout-step.ae-checkout-flow-panel .ae-checkout-flow-title { display: none; } /* remplacée visuellement par le bloc ci-dessous en état ouvert */
body#checkout section.checkout-step.ae-checkout-flow-panel.-current { padding: 24px 26px 28px; }
body#checkout section.checkout-step.ae-checkout-flow-panel.-current .ae-checkout-flow-title {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  text-transform: none; cursor: default; margin: 0 0 6px;
}
body#checkout section.checkout-step.ae-checkout-flow-panel.-current .ae-checkout-flow-title .step-number { display: none; }
body#checkout section.checkout-step.ae-checkout-flow-panel.-current .ae-checkout-flow-title .done { display: none !important; }
body#checkout section.checkout-step.ae-checkout-flow-panel.-current .ae-checkout-flow-title .step-edit { display: none !important; }
body#checkout section.checkout-step.ae-checkout-flow-panel.-current .ae-checkout-flow-title { font: 500 30px/1 'Cormorant Garamond', Georgia, serif; }
body#checkout section.checkout-step.ae-checkout-flow-panel.-current .ae-checkout-flow-eyebrow { order: 2; margin-left: auto; font: 400 10px/1 Inter, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8b938f; }
body#checkout section.checkout-step.ae-checkout-flow-panel .ae-checkout-flow-subtitle { display: none; font-size: 11px; color: var(--ae-checkout-muted); margin: 0 0 18px; }
body#checkout section.checkout-step.ae-checkout-flow-panel.-current .ae-checkout-flow-subtitle { display: block; }
body#checkout section.checkout-step.ae-checkout-flow-panel .ae-checkout-flow-body.content { padding: 0; }

/* CORRECTIF RÉEL (Task 4, découvert en vérifiant l'étape Paiement - affecte aussi Livraison/Task 3,
   présent depuis ed1e8ded) : le commentaire de checkout-step.tpl affirme que themes/leo_bicomart/
   assets/js/custom.js (thème PARENT) masque nativement toute étape non courante
   ($('.checkout-step').hide()/.show()) - FAUX en pratique sur CE shop, vérifié par CDP
   (Runtime.exceptionThrown/diagnostic direct) : un thème enfant PrestaShop fournit son PROPRE
   assets/js/custom.js qui REMPLACE entièrement celui du parent (même chemin relatif, mécanisme de
   cascade de thème standard) - themes/child_alloexotic_v2/assets/js/custom.js (Task 6, simulateur
   Espace Pro) est le seul chargé sur ce shop, il ne contient AUCUNE des lignes hide()/show() du
   parent. Résultat réel (constaté par CDP sur /commande, page Paiement) : chaque étape déjà
   complète (Adresses, Mode de livraison...) restait intégralement visible sous son en-tête
   "replié" - sur la page Paiement en particulier, toute la liste des transporteurs + le bloc promo
   5,90€/mois de l'étape Livraison réapparaissait au-dessus du panneau Paiement, très éloigné de la
   maquette. Le clic sur "Modifier" reste natif et fonctionnel (core.js, PAS le custom.js manquant :
   selectors.checkout.step/.stepTitle, classes -current/-clickable gérées par core.js lui-même,
   vérifié par CDP après ce correctif - cliquer sur "Modifier" rouvre bien l'étape visée) : masquer
   .content ici par CSS n'interfère pas avec ce mécanisme, qui pilote les classes -current/-complete,
   pas l'affichage direct. */
body#checkout section.checkout-step.ae-checkout-flow-panel.-reachable.-complete:not(.-current) .ae-checkout-flow-body.content {
  display: none;
}
body#checkout section.checkout-step.ae-checkout-flow-panel.-reachable.-complete:not(.-current) {
  padding: 0;
}
body#checkout section.checkout-step.ae-checkout-flow-panel.-reachable.-complete:not(.-current) .ae-checkout-flow-title {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 58px; padding: 0 18px; margin: 0; background: #f8f7f2; color: #7a817d;
  text-transform: none; cursor: pointer; font: 600 16px Inter, Arial, sans-serif;
}
body#checkout section.checkout-step.ae-checkout-flow-panel.-reachable.-complete:not(.-current) .ae-checkout-flow-title .step-number,
body#checkout section.checkout-step.ae-checkout-flow-panel.-reachable.-complete:not(.-current) .ae-checkout-flow-title .done { display: none; }
body#checkout section.checkout-step.ae-checkout-flow-panel.-reachable.-complete:not(.-current) .ae-checkout-flow-eyebrow { display: none; }
body#checkout section.checkout-step.ae-checkout-flow-panel.-reachable.-complete:not(.-current) .step-edit { display: inline-flex !important; align-items: center; gap: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #7a817d; }

/* --- Étape "Identification" (connecté) --- */
body#checkout .ae-checkout-connected { font-size: 13px; line-height: 1.7; color: var(--ae-checkout-ink); }
body#checkout .ae-checkout-connected a { color: var(--ae-checkout-green); }
body#checkout .ae-checkout-btn-primary,
body#checkout .ae-checkout-address-form .continue,
body#checkout .ae-checkout-delivery-options .continue {
  height: 46px; padding: 0 20px; border: 1px solid var(--ae-checkout-ink); background: var(--ae-checkout-ink);
  color: #fff; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
}
body#checkout .ae-checkout-btn-primary:hover { background: #08281f; }
body#checkout .ae-checkout-btn-outline { display: inline-block; margin: 10px 0; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ae-checkout-green); text-decoration: underline; text-underline-offset: 3px; }

/* --- Étape "Vos informations personnelles" (guest/login natif, formulaire inscription AlloExotic
   inchangé - voir commentaire de personal-information.tpl pour le pourquoi) --- */
body#checkout .ae-checkout-tabs { display: flex; align-items: center; gap: 14px; list-style: none; padding: 0; margin: 0 0 18px; border-bottom: 1px solid var(--ae-checkout-line); }
body#checkout .ae-checkout-tabs .nav-link { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #7a847f; padding: 0 0 12px; display: inline-block; border-bottom: 2px solid transparent; }
body#checkout .ae-checkout-tabs .nav-link.active { color: var(--ae-checkout-green); border-bottom-color: var(--ae-checkout-green); font-weight: 600; }
body#checkout .ae-checkout-tabs .nav-separator { font-size: 10px; color: #a9b0ac; text-transform: lowercase; }
body#checkout .ae-checkout-guest-block #customer-form .page-title,
body#checkout .ae-checkout-guest-block #login-form .page-title { font: 500 26px/1.1 'Cormorant Garamond', Georgia, serif; margin: 0 0 10px; }
body#checkout .ae-checkout-guest-block .form-group.row label.form-control-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #6d7772; }
body#checkout .ae-checkout-guest-block .form-control { border-color: #cfd7d3; }
body#checkout .ae-checkout-guest-block .form-control:focus { border-color: var(--ae-checkout-green); box-shadow: 0 0 0 1px var(--ae-checkout-green); }
body#checkout .ae-checkout-guest-block ul.switch { display: flex; gap: 8px; list-style: none; padding: 0; margin: 12px 0 20px; }
body#checkout .ae-checkout-guest-block ul.switch li { padding: 9px 16px; border: 1px solid var(--ae-checkout-line); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ae-checkout-muted); cursor: pointer; }
body#checkout .ae-checkout-guest-block ul.switch li.active { border-color: var(--ae-checkout-green); color: var(--ae-checkout-green); font-weight: 600; }

/* --- Étape "Adresse" : sélecteur + formulaire d'adresse natifs (address-selector-block.tpl /
   address-form.tpl inchangés), reskin des cartes façon maquette --- */
body#checkout .ae-checkout-address-selector .address-item {
  border: 1px solid var(--ae-checkout-line); padding: 16px 18px; margin-bottom: 10px; background: #fff;
}
body#checkout .ae-checkout-address-selector .address-item.selected { border-color: var(--ae-checkout-green); background: #fbfcfb; box-shadow: inset 0 0 0 1px var(--ae-checkout-green); }
body#checkout .ae-checkout-address-form .form-group.row label.form-control-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #6d7772; }
body#checkout .ae-checkout-address-form .form-control { height: 46px; border-color: #cfd7d3; }
body#checkout .ae-checkout-address-form .form-control:focus { border-color: var(--ae-checkout-green); box-shadow: 0 0 0 1px var(--ae-checkout-green); }

/* --- Étape "Mode de livraison" : liste des transporteurs réels + widget point relais Colissimo
   natif (carrier-extra-content, jamais modifié - juste laissé respirer, pas de overflow:hidden qui
   couperait le widget) --- */
body#checkout .ae-checkout-promo .bloc { border: 1px solid var(--ae-checkout-line); background: var(--ae-checkout-soft); padding: 18px 20px; margin-bottom: 18px; }
body#checkout .ae-checkout-promo .bloc h2 { font: 500 16px/1.3 'Cormorant Garamond', Georgia, serif; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
body#checkout .ae-checkout-promo .bloc h2 img { width: 22px; height: 22px; }
body#checkout .ae-checkout-promo .bloc p { font-size: 12px; line-height: 1.6; color: var(--ae-checkout-muted); margin: 0 0 10px; }
body#checkout .ae-checkout-promo .bloc .gratitutr .link { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ae-checkout-green); text-decoration: underline; text-underline-offset: 3px; }

body#checkout .ae-checkout-carrier-list { display: grid; gap: 10px; }
body#checkout .ae-checkout-carrier {
  border: 1px solid var(--ae-checkout-line); background: #fff; margin: 0 !important; padding: 14px 16px;
}
body#checkout .ae-checkout-carrier--selected { border-color: var(--ae-checkout-green); box-shadow: inset 0 0 0 1px var(--ae-checkout-green); background: #fbfcfb; }
body#checkout .ae-checkout-carrier .carrier-name { font-size: 13px; font-weight: 600; color: var(--ae-checkout-ink); display: block; }
body#checkout .ae-checkout-carrier .carrier-delay { font-size: 11px; color: var(--ae-checkout-muted); display: block; margin-top: 2px; }
body#checkout .ae-checkout-carrier .carrier-price { font-size: 13px; font-weight: 600; color: var(--ae-checkout-ink); }
body#checkout .ae-checkout-carrier-extra { margin-top: 10px; }
body#checkout .ae-checkout-order-options { margin-top: 16px; font-size: 11px; color: var(--ae-checkout-muted); }
body#checkout .ae-checkout-order-options textarea { width: 100%; border: 1px solid #cfd7d3; padding: 10px; font: inherit; }

/* --- Récapitulatif de commande (aside, checkout/_partials/cart-summary.tpl NATIF, non surchargé -
   voir commentaire de checkout.tpl : réutilisé via {include} pour ne pas casser le rafraîchissement
   AJAX réel du total après sélection d'un transporteur, habillage CSS uniquement) --- */
body#checkout .ae-checkout-summary { position: sticky; top: 24px; border: 1px solid var(--ae-checkout-line); background: #fff; padding: 24px 26px; }
body#checkout .ae-checkout-summary #js-checkout-summary { box-shadow: none; border: 0; padding: 0; background: none; }
body#checkout .ae-checkout-summary .title-checkout-summary h3 { font: 500 28px/1 'Cormorant Garamond', Georgia, serif; margin: 0 0 18px; }
/* Bug réel trouvé pendant la vérification CDP de Task 3 : cette règle (display:flex) était plus
   specifique que la regle native ".pc_hide { display:none }" (custom-code/custom-style-m.css,
   chargee globalement, hors thème) et la battait dans la cascade, ce qui reaffichait en
   permanence sur desktop le second total mobile-only natif (".mob_f .cart-summary-line.cart-total
   .pc_hide" de checkout/_partials/cart-summary.tpl, natif, non surchargé) - constate en CDP comme
   un second bloc "Total TTC" + RETOUR/CONTINUER fige (jamais rafraichi par l'AJAX de selection de
   transporteur, qui ne cible que .js-cart-summary-totals) sous le vrai total a jour. :not(.pc_hide)
   restaure le comportement natif (masque sur desktop) sans toucher a cart-summary.tpl. */
body#checkout .ae-checkout-summary .cart-summary-line:not(.pc_hide) { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 12px; }
body#checkout .ae-checkout-summary .cart-summary-line.cart-total:not(.pc_hide) { border-top: 1px solid var(--ae-checkout-line); margin-top: 8px; padding-top: 14px; font-weight: 700; }
body#checkout .ae-checkout-summary .cart-summary-line.cart-total .value { font: 500 24px 'Cormorant Garamond', Georgia, serif; }
body#checkout .ae-checkout-summary .promo-code-button a,
body#checkout .ae-checkout-summary .promo-input { font-size: 11px; }

@media (max-width: 650px) {
  body#checkout section.checkout-step.ae-checkout-flow-panel.-current { padding: 16px; }
  body#checkout .ae-checkout-summary { padding: 18px; }
}

/* --- Bug réel trouvé pendant la vérification CDP de Task 3 (pas un ecart de maquette) : sur
   /commande (les 2 branches, accordeon ET page de connexion legacy), le wrapper natif <div
   class="bottomnav"> de checkout/_partials/header.tpl (natif, {hook h='displayNav2'}) recoit une
   regle .bottomnav en position:fixed / border-radius:75px / background:#0B4940 qui n'a RIEN a voir
   avec ce wrapper : elle vient du contenu que le hook affiche a cet endroit (bloc AppPageBuilder
   generant lui-meme un element .bottomnav non namespace - meme collision de nom de classe que le
   theme.css natif, qui ne definit que ".bottomnav { background:#fff }"). Resultat constate en CDP
   (1600 et 375) : un bandeau vert plein ecran en position fixe recouvre tout le haut du tunnel
   (etapes 1-3 illisibles). Confirme PAS specifique a Task 3 : themes/child_leo_bicomart/assets/css/
   custom.css (theme ACTUELLEMENT EN PROD) neutralise deja exactement cette meme collision via
   "#header .bottomnav { padding:0 !important; width:100% !important; margin:0 !important;
   border-radius:0 !important; margin-top:0 !important; }" + un reset de fond sur "#header". Cette
   meme neutralisation n'avait simplement pas ete reportee dans child_alloexotic_v2 (les autres pages
   du theme n'utilisent pas ce header natif, donc jamais rencontree avant cette tache). Port a
   l'identique ici (memes proprietes, meme discipline "custom.css uniquement", theme.css jamais
   touche), scope a .page-order par prudence supplementaire (le reste du theme n'a de toute facon
   pas de #header/.bottomnav dans son DOM). */
.page-order #header,
.page-order #header .bottomnav,
.page-order #header .ApRow,
.page-order .bg-fullwidth {
  background-color: #ffffff !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}
.page-order #header .bottomnav {
  position: static !important;
  padding: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Bug réel trouvé pendant la vérification CDP de Task 4 (docs/superpowers/plans/2026-09-28-
   checkout-tunnel.md), en fait présent depuis l'introduction du header natif checkout/_partials/
   header.tpl en Task 3 mais jamais détecté alors car compare.py ne recadre que des sections
   précises (#checkoutView etc.), jamais le haut de page entier : <nav class="off-canvas-nav-
   megamenu"> (widget natif leofeature, même hook displayNav2 que .bottomnav ci-dessus, distinct du
   hamburger mobile PROPRE à ce thème qui fonctionne normalement partout ailleurs) s'affichait
   INTÉGRALEMENT EN FLUX (position:static, ~4000px de hauteur, confirmé par CDP
   getBoundingClientRect à 1600 et 375px) au lieu de rester hors-écran dans son état de repos -
   <body> porte déjà nativement la classe "off-canvas-inactive" (donc PAS un manque de JS/état),
   seul le CSS qui traduit cet état en position réelle manque. Cause : tout le mécanisme réel de
   positionnement de ce composant (display:none à partir de 992px, position:fixed hors-écran en
   dessous) vit dans leo_bicomart/assets/css/theme.css (~15670-15900) ; child_alloexotic_v2/assets/
   css/theme.css (build Tailwind from-scratch) ne le reprend pas du tout - même lacune structurelle
   déjà documentée pour ".modal" (un thème enfant REMPLACE entièrement le theme.css du parent, pas
   de cascade). Ce widget n'a pas d'équivalent dans la maquette et fait doublon avec le vrai menu
   mobile du thème : masqué entièrement ici (theme.css jamais touché, custom.css uniquement, même
   discipline que le correctif .bottomnav ci-dessus) plutôt que re-porter tout le mécanisme JS
   d'ouverture/fermeture natif pour un composant hors-sujet du brief. */
.page-order .off-canvas-nav-megamenu {
  display: none !important;
}

/* 2e bug réel du même type, trouvé dans la foulée du précédent (même vérification CDP Task 4,
   même cause racine) : à l'intérieur de #header .bottomnav lui-même (donc PAS neutralisé par le
   correctif ci-dessus, qui ne touche que fond/position du wrapper, jamais son contenu), la 3e
   "row ApRow" (.menu-bloc.ApColumn > .ApMegamenu > nav.leo-megamenu, widget ApPageBuilder "PRODUITS
   / NOTRE GAMME", catégories + visuels + libellés) s'affiche INTÉGRALEMENT DÉPLIÉE EN FLUX
   (~1170px, confirmé par CDP getBoundingClientRect sur #header .bottomnav .inner > .row.ApRow:nth-
   child(3)) au lieu d'un simple bandeau de nav avec sous-menu au survol - même lacune structurelle
   que le off-canvas-nav-megamenu ci-dessus (les règles réelles de repli/hover de ".leo-megamenu"
   vivent dans leo_bicomart/assets/css/theme.css, absentes du theme.css from-scratch de
   child_alloexotic_v2). Ce même widget ApPageBuilder fonctionne normalement partout ailleurs sur ce
   thème car aucune autre page n'utilise ce header natif (hook displayNav2) - seul /commande
   l'instancie, donc jamais rencontré avant Task 3/4. Sans équivalent dans la maquette et redondant
   avec la vraie navigation du thème (visible juste au-dessus : logo + recherche + icônes, rows 1-2
   de .bottomnav, conservées) : seule cette 3e row est masquée, pas tout .bottomnav. */
.page-order #header .bottomnav .menu-bloc.ApColumn {
  display: none !important;
}

/* ============================================================================================
   Task 4 (docs/superpowers/plans/2026-09-28-checkout-tunnel.md) — tunnel de commande, étape
   "Paiement" (checkout/_partials/steps/payment.tpl + bandeau ".steps" dans checkout.tpl). Système
   de classes VRAIMENT différent de celui de Task 3 (.pay-*/.ae-checkout-steps, pas .flow-panel) -
   les 2 designs ne sont pas fusionnés (cf. plan). Le chrome extérieur de l'étape (titre "Paiement",
   bordure de panneau, padding) reste celui de checkout-step.tpl/Task 3 (--current déjà stylé
   ci-dessus, wrapper commun non retouché) ; seul le contenu INTERNE de cette étape reprend
   fidèlement la maquette "checkout-paiement" (--ae-checkout-* : mêmes variables que Task 3, même
   palette). body#checkout confirmé natif comme pour Task 3. */

/* --- Bandeau de progression (Panier/Livraison/Paiement/Confirmation), page "Paiement" uniquement -
   voir checkout.tpl ($payment_step_current, dérivé du vrai CheckoutProcess::isCurrent()). --- */
body#checkout .ae-checkout-steps {
  display: grid !important; grid-template-columns: repeat(4, 1fr) !important; margin: 0 0 28px;
  border: 1px solid var(--ae-checkout-line); font-family: Inter, Arial, sans-serif; list-style: none !important;
}
body#checkout .ae-checkout-step {
  padding: 15px 18px; border-right: 1px solid var(--ae-checkout-line);
  display: flex; align-items: center; gap: 10px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em; color: #87908b;
}
body#checkout .ae-checkout-step:last-child { border-right: 0; }
body#checkout .ae-checkout-step b {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid #cfd6d2; font-size: 10px; font-weight: 600; flex: none;
}
body#checkout .ae-checkout-step.done,
body#checkout .ae-checkout-step.active { color: var(--ae-checkout-green); }
body#checkout .ae-checkout-step.done b { background: var(--ae-checkout-green); color: #fff; border-color: var(--ae-checkout-green); }
body#checkout .ae-checkout-step.active { background: #f7f9f8; }
body#checkout .ae-checkout-step.active b { border-color: var(--ae-checkout-green); }
@media (max-width: 1000px) {
  /* !important nécessaire : la règle de base est posée en style inline sur l'élément (cf. checkout.tpl,
     contournement de l'anomalie CSSOM ci-dessus) - un style externe sans !important ne peut jamais
     battre un style inline, même via @media. */
  body#checkout .ae-checkout-steps { grid-template-columns: 1fr 1fr !important; }
  body#checkout .ae-checkout-step:nth-child(2) { border-right: 0; }
  body#checkout .ae-checkout-step:nth-child(-n+2) { border-bottom: 1px solid var(--ae-checkout-line); }
}
@media (max-width: 650px) {
  body#checkout .ae-checkout-steps { grid-template-columns: 1fr !important; }
  body#checkout .ae-checkout-step { border-right: 0; border-bottom: 1px solid var(--ae-checkout-line) !important; }
  body#checkout .ae-checkout-step:last-child { border-bottom: 0 !important; }
}

/* --- Bandeau "Paiement sécurisé" + badges CB/Visa/Mastercard/3D Secure (texte statique, décoratif,
   pas de donnée dynamique derrière) --- */
body#checkout .ae-checkout-pay-intro {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start;
  padding: 18px 20px; background: var(--ae-checkout-soft); border: 1px solid var(--ae-checkout-line);
  margin-bottom: 22px;
}
body#checkout .ae-checkout-pay-intro strong { font-size: 13px; display: block; margin-bottom: 5px; }
body#checkout .ae-checkout-pay-intro p { margin: 0; color: var(--ae-checkout-muted); font-size: 11px; line-height: 1.6; }
body#checkout .ae-checkout-pay-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
body#checkout .ae-checkout-pay-badges span { border: 1px solid #cfd7d3; background: #fff; padding: 7px 9px; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

/* --- Liste des VRAIS moyens de paiement ($payment_options, foreach natif inchangé) --- */
body#checkout .ae-checkout-pay-methods { display: grid; gap: 10px; }
body#checkout .ae-checkout-pay-method { border: 1px solid var(--ae-checkout-line); background: #fff; }
/* CORRECTIF RÉEL (Task 4, trouvé par CDP CSS.getMatchedStylesForNode - même discipline de diagnostic
   que les autres correctifs de ce chantier) : /custom-code/custom-style-m.css (fichier PARTAGÉ,
   chargé sur tout le site après le thème, jamais édité) contient 2 règles héritées de l'ANCIEN
   design de l'étape paiement, ligne ~6310 :
     1. "section#checkout-payment-step .payment-option.clearfix span.custom-radio.float-xs-left
        { display:none }" - masquait le vrai input radio natif de CHAQUE moyen de paiement sur
        CETTE étape spécifiquement (ne touche pas les autres étapes, d'où un radio bien visible sur
        "Mode de livraison"/Task 3 mais invisible ici).
     2. Une règle plus générale "body#checkout section.checkout-step .custom-radio { position:
        absolute; left:24/16px; top:24/16px }" (native, pas custom-style-m.css) rend ce widget
        HORS FLUX partout sur le tunnel - sans effet visible sur les autres étapes (mises en page
        flex/bloc classiques) mais avec un effet de bord réel ici : notre grille CSS
        (.ae-checkout-pay-method-head, grid-template-columns: 30px 1fr auto) traitait alors le
        radio absolutely-positioned comme retiré du flux de grille (comportement CSS Grid standard
        pour position:absolute, comme pour display:none), laissant SEUL le texte du moyen de
        paiement (ex. "Payer en ligne") auto-placé dans la 1re colonne (30px) au lieu de la 2e -
        texte compressé, retour à la ligne mot par mot. Corrigé en abandonnant la grille pour ce
        widget : on adopte le VRAI modèle natif (radio hors flux en position:absolute dans un
        parent position:relative, contenu texte en simple bloc avec un padding-left réservant sa
        place) au lieu de forcer une grille qui suppose un radio "en flux". */
body#checkout .ae-checkout-pay-method-head {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 17px 15px 47px; cursor: pointer; margin: 0;
}
body#checkout section#checkout-payment-step .payment-option.clearfix span.custom-radio.float-xs-left {
  display: inline-flex !important;
}
body#checkout .ae-checkout-pay-method-head .custom-radio { width: 17px; height: 17px; align-items: center; justify-content: center; }
body#checkout .ae-checkout-pay-method-label { flex: 1 1 auto; min-width: 0; }
body#checkout .ae-checkout-pay-method-label strong { font-size: 13px; font-weight: 600; color: var(--ae-checkout-ink); white-space: normal; }
body#checkout .ae-checkout-pay-method-logo { max-height: 22px; width: auto; flex: none; }
body#checkout .ae-checkout-pay-arrow { font-size: 14px; color: var(--ae-checkout-muted); font-weight: 400; flex: none; }
body#checkout .ae-checkout-pay-method-body { padding: 0 17px 18px 59px; }
body#checkout .ae-checkout-pay-method-body.ps-hidden { display: none; }
/* Surbrillance réactive du moyen sélectionné : :has() (pas de JS custom sur un mécanisme déjà géré
   nativement, cf. commentaire de payment.tpl) + classe "selected" posée par Smarty pour l'état initial
   (dégradation propre si :has() non supporté). */
body#checkout .ae-checkout-pay-method.selected,
body#checkout .ae-checkout-pay-method:has(> .payment-option input:checked) {
  border-color: var(--ae-checkout-green); box-shadow: inset 0 0 0 1px var(--ae-checkout-green); background: #fbfcfb;
}

/* --- Formulaire inline d'un moyen de paiement ($option.form nofilter, natif - ex. carte Stripe) --- */
body#checkout .ae-checkout-pay-method-body .form-group,
body#checkout .ae-checkout-pay-method-body .field { margin-bottom: 14px; }
body#checkout .ae-checkout-pay-method-body label { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: #6d7772; display: block; margin-bottom: 6px; }
body#checkout .ae-checkout-pay-method-body input[type="text"],
body#checkout .ae-checkout-pay-method-body input[type="email"],
body#checkout .ae-checkout-pay-method-body input[type="tel"] { height: 46px; width: 100%; border: 1px solid #cfd7d3; padding: 0 13px; }

/* --- Encadré "Protection renforcée" (3D Secure, statique) --- */
body#checkout .ae-checkout-pay-secure {
  display: flex; gap: 12px; padding: 14px 16px; background: var(--ae-checkout-soft);
  font-size: 11px; line-height: 1.5; color: #5d6862; margin-top: 12px;
}
body#checkout .ae-checkout-pay-secure b { color: var(--ae-checkout-green); }

/* --- Conditions à approuver (natif, $conditions_to_approve) --- */
body#checkout .ae-checkout-pay-conditions { margin-top: 18px; font-size: 11px; color: var(--ae-checkout-muted); }
body#checkout .ae-checkout-pay-conditions ul { list-style: none; padding: 0; margin: 0; }
body#checkout .ae-checkout-pay-conditions li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }

/* --- Bouton de soumission final + mention légale (natif : $selected_payment_option pilote toujours
   l'état disabled réel, rien n'est forcé cliquable) --- */
/* CORRECTIF RÉEL, CRITIQUE (Task 4, trouvé par CDP - le bouton de soumission finale était
   INVISIBLE, aucun moyen de valider la commande) : /custom-code/custom-style-m.css (fichier
   PARTAGÉ, jamais édité) contient, hérité de l'ANCIEN design de l'étape paiement (juste après un
   bloc commenté qui masquait aussi button[type=submit] et le bouton "précédent") :
   "div#payment-confirmation { display:none !important }" (ligne ~10393) - masque INCONDITIONNELLEMENT
   le vrai wrapper natif #payment-confirmation (js-payment-confirmation, checkout.js natif) qui
   contient le vrai bouton "Payer" ($selected_payment_option pilote son état disabled) ainsi que
   l'alerte de rappel des conditions. Confirmé par CDP (chaîne d'ancêtres, getComputedStyle) : le
   bouton lui-même a une taille de boîte 0x0 uniquement à cause de cet ancêtre display:none, même
   si l'élément a bien un inline style="display:block" posé par le JS natif (core.js) - le
   !important d'un fichier partagé bat un style inline non-important. Sans ce correctif, aucune
   commande ne peut être validée depuis cette page (régression pré-existante de l'ancien design
   héritée dans ce fichier partagé, jamais rencontrée avant cette tâche car aucune autre page ne
   contient #payment-confirmation). body#checkout + l'id ajoutent la spécificité nécessaire pour
   battre la règle partagée (elle-même déjà !important). */
body#checkout #payment-confirmation.ae-checkout-pay-confirm {
  display: block !important;
}
body#checkout .ae-checkout-pay-confirm { margin-top: 22px; }
body#checkout .ae-checkout-pay-validate {
  display: block !important; width: 100% !important; max-width: none !important; height: 54px;
  border: 1px solid var(--ae-checkout-green); border-radius: 4px !important;
  background: var(--ae-checkout-green); color: #fff; font-size: 11px; text-transform: uppercase;
  letter-spacing: .11em; font-weight: 700;
}
body#checkout .ae-checkout-pay-validate:hover { background: #08281f; }
body#checkout .ae-checkout-pay-validate.disabled { opacity: .45; cursor: not-allowed; }
body#checkout .ae-checkout-pay-legal { font-size: 9px; line-height: 1.5; color: #7c8580; margin-top: 12px; text-align: center; }

@media (max-width: 650px) {
  body#checkout .ae-checkout-pay-intro { grid-template-columns: 1fr; }
  body#checkout .ae-checkout-pay-badges { justify-content: flex-start; }
  body#checkout .ae-checkout-pay-method-body { padding-left: 17px; }
}

/* ============================================================================================
   Task 5 (docs/superpowers/plans/2026-09-28-checkout-tunnel.md) — page de confirmation de
   commande (checkout/order-confirmation.tpl, contrôleur OrderConfirmationController natif,
   php_self = 'order-confirmation' -> body#order-confirmation / .page-order-confirmation,
   PAS body#checkout : cette page n'utilise PAS checkout/_partials/header.tpl, c'est le header
   NORMAL du thème, cf. commentaire en tête de order-confirmation.tpl). Classes ".paid-*" reprises
   telles quelles de la maquette confirmation/styles.css ; variables de couleur réutilisées depuis
   --ae-checkout-* déjà définies ci-dessus pour Task 3/4 (mêmes valeurs exactes que le :root de la
   maquette confirmation : #0b3428/#16372d/#6b746f/#dde3df/#f6f7f5/#a64236) plutôt que redéfinies. */
body#order-confirmation .paid-wrap { width: min(1180px, calc(100% - 56px)); margin: 0 auto; padding: 54px 0 110px; font-family: Inter, Arial, sans-serif; color: var(--ae-checkout-ink); }
body#order-confirmation .paid-crumb { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #7a847f; margin-bottom: 26px; }
body#order-confirmation .paid-crumb a { color: inherit; text-decoration: none; }

body#order-confirmation .paid-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: start; border-bottom: 1px solid var(--ae-checkout-line); padding-bottom: 46px; }
body#order-confirmation .paid-check { width: 64px; height: 64px; border-radius: 50%; background: var(--ae-checkout-green); color: #fff; display: grid; place-items: center; font-size: 31px; margin-bottom: 26px; box-shadow: 0 10px 28px rgba(11,52,40,.14); }
body#order-confirmation .paid-kicker { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ae-checkout-red); font-weight: 600; margin-bottom: 15px; }
body#order-confirmation .paid-title { font: 500 clamp(52px, 5.4vw, 78px)/.92 'Cormorant Garamond', Georgia, serif; margin: 0; color: var(--ae-checkout-green); letter-spacing: -.025em; }
body#order-confirmation .paid-lead { font-size: 14px; line-height: 1.75; color: var(--ae-checkout-muted); max-width: 600px; margin: 24px 0 0; }
body#order-confirmation .paid-card { border: 1px solid var(--ae-checkout-line); background: #fff; padding: 28px; }
body#order-confirmation .paid-card h2 { font: 500 32px/1 'Cormorant Garamond', Georgia, serif; margin: 0 0 22px; }
body#order-confirmation .paid-ref { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--ae-checkout-line); font-size: 12px; }
body#order-confirmation .paid-ref:first-of-type { border-top: 0; }
body#order-confirmation .paid-ref span { color: var(--ae-checkout-muted); }
body#order-confirmation .paid-ref b { font-weight: 600; text-align: right; }
body#order-confirmation .paid-status { display: inline-flex; align-items: center; gap: 8px; color: #46784e; }
body#order-confirmation .paid-status:before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #5f8b62; flex: none; }

body#order-confirmation .paid-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin: 30px 0 52px; border: 1px solid var(--ae-checkout-line); list-style: none; padding: 0; }
body#order-confirmation .paid-step { padding: 15px 18px; border-right: 1px solid var(--ae-checkout-line); display: flex; align-items: center; gap: 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ae-checkout-green); }
body#order-confirmation .paid-step:last-child { border-right: 0; background: #f7f9f8; }
body#order-confirmation .paid-step b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ae-checkout-green); color: #fff; font-size: 10px; flex: none; font-weight: 600; }

body#order-confirmation .paid-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: start; }
body#order-confirmation .paid-section { padding: 30px 0; border-top: 1px solid var(--ae-checkout-line); }
body#order-confirmation .paid-section:first-child { border-top: 0; padding-top: 0; }
body#order-confirmation .paid-section h2 { font: 500 34px/1 'Cormorant Garamond', Georgia, serif; margin: 0 0 20px; }
body#order-confirmation .paid-address { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
body#order-confirmation .paid-mini { border: 1px solid var(--ae-checkout-line); padding: 18px 20px; }
body#order-confirmation .paid-mini small { display: block; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #8a928e; margin-bottom: 10px; }
body#order-confirmation .paid-mini strong { display: block; font-size: 13px; margin-bottom: 6px; }
body#order-confirmation .paid-mini p { margin: 0; font-size: 11px; line-height: 1.65; color: var(--ae-checkout-muted); }
body#order-confirmation .paid-mini p a { color: var(--ae-checkout-green); }
body#order-confirmation .paid-note { margin-top: 16px; background: #f7f9f8; border: 1px solid #e2e7e4; padding: 15px 17px; font-size: 11px; line-height: 1.6; color: #62706a; }

body#order-confirmation .paid-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
body#order-confirmation .paid-btn { height: 48px; padding: 0 22px; border: 1px solid var(--ae-checkout-green); background: var(--ae-checkout-green); color: #fff; text-transform: uppercase; letter-spacing: .09em; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
body#order-confirmation .paid-btn.alt { background: #fff; color: var(--ae-checkout-green); }
body#order-confirmation .paid-support { margin-top: 22px; font-size: 11px; color: var(--ae-checkout-muted); line-height: 1.7; }
body#order-confirmation .paid-support a { color: var(--ae-checkout-green); text-underline-offset: 3px; }

body#order-confirmation .paid-order { border: 1px solid var(--ae-checkout-line); padding: 26px 28px; position: sticky; top: 24px; }
body#order-confirmation .paid-order h2 { font: 500 34px/1 'Cormorant Garamond', Georgia, serif; margin: 0 0 20px; }
body#order-confirmation .paid-items { max-height: 330px; overflow: auto; padding-right: 4px; }
body#order-confirmation .paid-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 13px 0; border-top: 1px solid var(--ae-checkout-line); }
body#order-confirmation .paid-item:first-child { border-top: 0; }
body#order-confirmation .paid-letter { width: 52px; height: 58px; background: #f2eee8; display: grid; place-items: center; font: 500 20px 'Cormorant Garamond', Georgia, serif; color: var(--ae-checkout-green); }
body#order-confirmation .paid-item strong { font-size: 12px; line-height: 1.3; display: block; }
body#order-confirmation .paid-item span { font-size: 10px; color: var(--ae-checkout-muted); display: block; margin-top: 3px; }
body#order-confirmation .paid-item b { font-size: 12px; white-space: nowrap; }
body#order-confirmation .paid-row { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; font-size: 12px; }
body#order-confirmation .paid-total { border-top: 1px solid var(--ae-checkout-line); margin-top: 10px; padding-top: 18px; align-items: end; }
body#order-confirmation .paid-total strong { font: 500 30px 'Cormorant Garamond', Georgia, serif; }
body#order-confirmation .paid-free { color: #46784e; font-weight: 600; }

@media (max-width: 950px) {
  body#order-confirmation .paid-hero,
  body#order-confirmation .paid-grid { grid-template-columns: 1fr; }
  body#order-confirmation .paid-order { position: static; }
  body#order-confirmation .paid-steps { grid-template-columns: 1fr 1fr; }
  body#order-confirmation .paid-step:nth-child(2) { border-right: 0; }
  body#order-confirmation .paid-step:nth-child(-n+2) { border-bottom: 1px solid var(--ae-checkout-line); }
  body#order-confirmation .paid-address { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  body#order-confirmation .paid-wrap { width: calc(100% - 28px); padding-top: 30px; }
  body#order-confirmation .paid-steps { grid-template-columns: 1fr; }
  body#order-confirmation .paid-step { border-right: 0; border-bottom: 1px solid var(--ae-checkout-line); }
  body#order-confirmation .paid-step:last-child { border-bottom: 0; }
  body#order-confirmation .paid-hero { gap: 28px; }
  body#order-confirmation .paid-card,
  body#order-confirmation .paid-order { padding: 20px; }
  body#order-confirmation .paid-actions { display: grid; }
  body#order-confirmation .paid-btn { width: 100%; }
}

/* ============================================================================================
   Chantier "Mon compte" (connexion) — maquette AlloExotic-connexion-MON-COMPTE.html. PONCTUEL,
   indépendant du plan checkout-tunnel (contexte lu pour les conventions uniquement). Page réelle :
   AuthController (php_self='authentication') -> body#authentication / .page-authentication
   (classes/controller/FrontController.php::getTemplateVarPage - body id = $page.page_name).
   Réutilise les variables --ae-checkout-* déjà posées pour le tunnel de commande (mêmes valeurs
   exactes) plutôt que d'en redéfinir. Les 2 formulaires réels ($login_form natif inchangé,
   $register_form ajouté par override/controllers/front/AuthController.php) sont rendus via les
   VRAIS partiels natifs customer/_partials/{login-form,customer-form}.tpl, jamais dupliqués ni
   réécrits : tout ce qui suit est un habillage visuel scopé body#authentication, sans toucher aux
   fichiers .tpl natifs partagés (donc sans effet sur /inscription ni sur l'étape "Livraison" du
   tunnel de commande, qui réutilisent les mêmes partiels ailleurs). Voir authentication.tpl pour le
   détail des écarts assumés (bouton Google retiré, "rester connecté" retiré, mention paiement
   invité retirée, onglet marketplace "Vendeur Pro" masqué). */
body#authentication .ae-account-intro,
body#authentication .ae-account-grid { box-sizing: border-box; font-family: Inter, Arial, sans-serif; color: var(--ae-checkout-ink); }
body#authentication .ae-account-intro *,
body#authentication .ae-account-grid * { box-sizing: border-box; }
/* #main est display:flex nativement (leo_bicomart) - #content ne s'étire pas sur l'axe principal
   sans flex-grow explicite (pas de sidebar sur cette page, #content est le seul enfant visible :
   trouvé par inspection réelle CDP, largeur réduite à son contenu sans cette règle). En plus de ça,
   collision CSS partagée trouvée par CDP CSS.getMatchedStylesForNode (même classe de bug que celles
   déjà documentées dans la mémoire projet pour ce chantier) : custom-code/custom-style-{m,a,uni,allo}.css
   (fichiers PARTAGÉS, jamais édités) posent PLUSIEURS règles `!important` héritées de l'ancien design
   de connexion qui plafonnent #content à 553px sur cette page (`.page-login section#content`,
   `.page-authentication section#content`, `.page-customer-account #main .page-content:has(.register-form)`...) -
   elles chargent APRÈS custom.css dans le <head> (confirmé via document.styleSheets), donc une règle
   sans !important perd même à spécificité égale ou supérieure. Neutralisé avec !important ici. */
body#authentication #content.page-content { background: none; border: 0; box-shadow: none; padding: 0; width: 100% !important; max-width: none !important; flex: 1 1 auto; }
body#authentication #main { width: min(1400px, calc(100% - 56px)); margin: 0 auto; padding: 46px 0 110px; }
body#authentication .page-header { display: none; }

/* Fond jaune illustré (#fcd583) : règle héritée de l'ancien design de connexion, posée directement
   sur `body#authentication` avec !important dans custom-code/custom-style-a.css (fichier PARTAGÉ,
   jamais édité) - trouvée par CDP CSS.getMatchedStylesForNode, jamais neutralisée par la tâche
   précédente (qui n'avait vérifié que la largeur de #content, pas le fond du body). Un sélecteur
   ID + classe (spécificité supérieure à un simple `body#authentication`) + !important gagne. */
body#authentication.page-authentication { background: #fff !important; }
/* Le fond jaune ne vient pas QUE de body : #wrapper (id réel du DOM, `<section id="wrapper">`)
   porte sa propre image de fond héritée de l'ancien design (`custom-uni.css`, sélecteur
   `body#authentication.page-login main#page section#wrapper` - spécificité 3 ids/1 classe/3
   éléments, plus un `padding-bottom:587px!important` qui prolongeait le jaune bien après la fin
   de la carte blanche). Trouvé en vérifiant le fond de CHAQUE wrapper (html/body/#wrapper/#page/
   #main/#content-wrapper) via getComputedStyle, pas seulement body - même sélecteur réutilisé ici
   avec une classe réelle en plus (`.page-login`, déjà présente sur ce body) pour dépasser leur
   spécificité (3 ids/2 classes/3 éléments > 3 ids/1 classe/3 éléments), donc gagne même si
   custom-uni.css charge après. */
body#authentication.page-authentication.page-login main#page section#wrapper { background: #fff !important; background-image: none !important; padding-bottom: 0 !important; }

body#authentication .ae-account-intro { display: grid !important; grid-template-columns: 1.35fr .65fr !important; gap: 70px !important; align-items: end !important; padding-bottom: 34px !important; border-bottom: 1px solid var(--ae-checkout-line) !important; }
body#authentication .ae-account-kicker { font-size: 10px !important; letter-spacing: .18em !important; font-weight: 600 !important; color: var(--ae-checkout-red) !important; text-transform: uppercase !important; }
body#authentication .ae-account-title { font: 400 clamp(38px, 4.6vw, 58px)/1 'Cormorant Garamond', Georgia, serif !important; margin: 8px 0 0 !important; color: var(--ae-checkout-green) !important; }
body#authentication .ae-account-subtitle { margin: 0 !important; font-size: 13px !important; line-height: 1.7 !important; color: var(--ae-checkout-muted) !important; }

body#authentication .ae-account-grid { display: grid !important; grid-template-columns: .78fr 1.22fr !important; gap: 72px !important; padding-top: 48px !important; align-items: start !important; }
body#authentication .ae-account-panel-login { padding-right: 54px !important; border-right: 1px solid var(--ae-checkout-line) !important; }

/* Champs natifs (login-form.tpl / customer-form.tpl) - même habillage que le reste du site, pas de
   nouveau composant : labels via {form_field}, structure Bootstrap .form-group native conservée.
   !important partout ci-dessous : custom-code/custom-style-{m,a,uni,allo}.css (chargés APRÈS
   custom.css, confirmé via <link> réel de la page) posent des règles concurrentes sur .page-authentication
   input / .page-authentication #content .form-control-label / .form-group :is(label,...) qui gagnaient
   silencieusement à spécificité comparable - même pattern déjà documenté 5+ fois sur ce chantier. */
body#authentication .ae-account-panel label { display: block !important; font-size: 9px !important; letter-spacing: .13em !important; text-transform: uppercase !important; margin: 16px 0 7px !important; color: #53615b !important; font-weight: 400 !important; }
body#authentication .ae-account-panel input.form-control,
body#authentication .ae-account-panel select.form-control { width: 100% !important; height: 48px !important; border: 1px solid #ccd3ce !important; background: #fffefa !important; padding: 0 14px !important; font-size: 13px !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; }
body#authentication .ae-account-panel input.form-control:focus,
body#authentication .ae-account-panel select.form-control:focus { border-color: var(--ae-checkout-green) !important; outline: none !important; box-shadow: 0 0 0 1px var(--ae-checkout-green) !important; }
body#authentication .ae-account-panel .page-title { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 38px !important; font-weight: 500 !important; margin: 0 0 10px !important; color: var(--ae-checkout-green) !important; }
body#authentication .ae-account-panel .login_info { display: none !important; } /* lien natif "S'inscrire" redondant : l'inscription est déjà la colonne de droite */

body#authentication .ae-account-panel button[type="submit"],
body#authentication .ae-account-panel .form-control-submit { display: block !important; width: 100% !important; height: 50px !important; background: var(--ae-checkout-green) !important; color: #fff !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: .1em !important; text-transform: uppercase !important; border: 1px solid var(--ae-checkout-green) !important; border-radius: 0 !important; margin-top: 20px !important; cursor: pointer !important; }
body#authentication .ae-account-panel button[type="submit"]:hover,
body#authentication .ae-account-panel .form-control-submit:hover { background: #08281f !important; }

body#authentication .ae-account-forgot { margin-top: 16px !important; font-size: 11px !important; text-align: right !important; }
body#authentication .ae-account-forgot a { color: var(--ae-checkout-green) !important; text-decoration: underline !important; text-underline-offset: 3px !important; }

/* Cases à cocher (rester connecté retiré, mais CGV/newsletter du formulaire d'inscription natif
   restent) et boutons radio de civilité : la maquette montre des cases nettes alignées avec leur
   texte - les règles partagées ci-dessus (custom-style-*) leur imposent une taille/position par
   défaut différente, corrigé ici en restant sur les vrais éléments natifs (pas de faux composant). */
body#authentication .ae-account-panel .custom-checkbox,
body#authentication .ae-account-panel .radio-inline,
body#authentication .ae-account-panel .form-check { display: flex !important; align-items: flex-start !important; gap: 8px !important; font-size: 11px !important; line-height: 1.5 !important; margin: 10px 0 !important; }
body#authentication .ae-account-panel input[type="checkbox"],
body#authentication .ae-account-panel input[type="radio"] { width: 16px !important; height: 16px !important; margin: 2px 0 0 !important; flex: 0 0 auto !important; }
body#authentication .ae-account-panel-register .gender-line,
body#authentication .ae-account-panel-register #field-id_gender { display: flex !important; gap: 18px !important; align-items: center !important; margin: 16px 0 7px !important; }
body#authentication .ae-account-panel-register #field-id_gender label { display: inline-flex !important; align-items: center !important; gap: 6px !important; text-transform: none !important; font-size: 12px !important; letter-spacing: normal !important; margin: 0 !important; color: var(--ae-checkout-ink) !important; }

/* Bouton "afficher/masquer" le mot de passe - ajouté en JS (custom.js), pas natif à l'origine mais
   une vraie bascule type="password"/type="text" fonctionnelle (pas un habillage muet). */
body#authentication .ae-account-panel .ae-pass-field { position: relative; }
body#authentication .ae-account-panel .ae-pass-field input { padding-right: 74px; }
body#authentication .ae-account-panel .ae-pass-toggle { position: absolute; right: 12px; top: 16px; height: 32px; background: none; border: 0; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--ae-checkout-green); cursor: pointer; padding: 0 4px; }

/* Champs/sections réellement hors-sujet sur cette page compacte (voir authentication.tpl) - masqués
   visuellement seulement, jamais retirés du template natif partagé customer-form.tpl. */
body#authentication .ae-account-panel-register #customer-form > p.txt,
body#authentication .ae-account-panel-register #customer-form ul.switch,
body#authentication .ae-account-panel-register section.professional,
body#authentication .ae-account-panel-register .change_pswd,
body#authentication .ae-account-panel-register .page-title.second-step { display: none !important; }
body#authentication .ae-account-panel-register #customer-form section.particulier { display: block !important; }

body#authentication .ae-account-panel-register .form-group.row.half,
body#authentication .ae-account-panel-register div.address.address1,
body#authentication .ae-account-panel-register div.address.address2 { margin-top: 4px; }
body#authentication .ae-account-panel-register .form-control-comment { display: block; font-size: 10px; color: var(--ae-checkout-muted); margin-top: 4px; }

body#authentication .ae-account-panel-register .field-password-policy .password-policy,
body#authentication .ae-account-panel-register .field-password-policy .progress { font-size: 10px; margin-top: 6px; }

body#authentication .ae-account-panel-register footer.form-footer { margin-top: 6px; }

@media (max-width: 900px) {
  /* !important requis : les règles de base ci-dessus ont dû passer en !important pour battre
     custom-code/custom-style-*.css (chargés après) - sans !important ici aussi, cette media query
     perdait contre la règle de base non-responsive (même sélecteur, !important gagne toujours sur
     non-important quel que soit l'ordre/la media query) - régression trouvée en testant à 375px
     après le premier correctif (colonnes restées côte à côte, débordement horizontal réel). */
  body#authentication .ae-account-intro,
  body#authentication .ae-account-grid { grid-template-columns: 1fr !important; }
  body#authentication .ae-account-grid { gap: 40px !important; }
  body#authentication .ae-account-panel-login { padding-right: 0 !important; border-right: 0 !important; padding-bottom: 34px !important; border-bottom: 1px solid var(--ae-checkout-line) !important; }
}
@media (max-width: 480px) {
  body#authentication #main { width: calc(100% - 28px) !important; padding-top: 30px !important; }
}
