/* Claude — 2026-08-04 — Footer mobile (post 30, template Elementor) : passage a 1 colonne
   + accordeons repliés par défaut sur "Nos marques" / "Nos marquages" / "Nos services" /
   bloc légal. Portee stricte : mobile uniquement (max-width: 767px), desktop/tablette (>=768px)
   non touches par ce fichier — aucune règle hors media query.

   Principe non négociable (SEO) : les liens des 3 menus + du bloc légal restent en TOUT TEMPS
   dans le HTML servi (widgets Elementor natifs, non modifiés). L'état "replié" ne fait QUE les
   masquer visuellement (max-height:0 + overflow:hidden), jamais de display:none sur les listes
   elles-mêmes et jamais de suppression du DOM — Google (mobile-first, JS exécuté) les voit
   normalement. Cf. mission footer 2026-08-04 : 11 500 impressions cumulées sur les 11 pages
   marquages, ne jamais les faire disparaître du DOM.

   Sélecteurs par id Elementor unique (.elementor-element-<id>), même convention que
   koaprint-header-search-mobile.css. Le JS associé (koaprint-footer-mobile.js) ajoute/retire
   la classe .koa-footer-open sur le conteneur de colonne (ou sur la liste légale) au clic —
   sans lui, les 4 blocs restent repliés (dégradation propre, rien n'est cassé). */

@media (max-width: 767px) {

  /* ===== 1. Conteneur racine du footer : une seule colonne pleine largeur ===== */
  .elementor-element-a3ac49e {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  /* Chaque "colonne" (coordonnées + les 3 menus) prend 100% de la largeur.
     order explicite : neutralise les _flex_order_mobile/_tablet déjà réglés dans
     _elementor_data (ex. Nos marques avait un ordre custom=3) pour garder un ordre de
     lecture logique : coordonnées, marques, marquages, services, puis le bloc bas
     (légal + copyright, conteneur séparé 3127db9). */
  .elementor-element-6197608,
  .elementor-element-6054194,
  .elementor-element-3c13c27,
  .elementor-element-b261a3d {
    width: 100% !important;
  }
  .elementor-element-6197608 { order: 1 !important; }
  .elementor-element-6054194 { order: 2 !important; }
  .elementor-element-3c13c27 { order: 3 !important; }
  .elementor-element-b261a3d { order: 4 !important; }

  /* ===== 2. Coordonnées : TOUJOURS visibles, jamais repliées ===== */
  /* Logo réduit (~80px de hauteur) — évite qu'il occupe une hauteur importante au centre. */
  .elementor-element-dae9945 img {
    max-height: 80px !important;
    width: auto !important;
  }

  /* ===== 3. Accordéons "Nos marques" / "Nos marquages" / "Nos services" =====
     Le titre de chaque colonne (widget heading) devient la ligne cliquable, 52px, chevron
     à droite. Le contenu (spacer + liste de liens) est replié par défaut via max-height:0
     sur le conteneur SANS la classe .koa-footer-open — les liens restent dans le DOM. */
  .elementor-element-323df19,
  .elementor-element-eeb4035,
  .elementor-element-cdcb859 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 52px;
    margin: 0 !important;
    padding: 0 4px !important;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    -webkit-tap-highlight-color: transparent;
  }
  /* Ligne de fermeture en haut du premier accordéon (Nos marques) */
  .elementor-element-323df19 {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  .elementor-element-323df19::after,
  .elementor-element-eeb4035::after,
  .elementor-element-cdcb859::after,
  .koa-footer-legal-toggle::after {
    content: "";
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    margin-left: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }

  /* Contenu replié par défaut (spacer + nav-menu de chaque colonne) */
  .elementor-element-6054194 > .elementor-element-493584b,
  .elementor-element-6054194 > .elementor-element-d63d175,
  .elementor-element-3c13c27 > .elementor-element-0c61c57,
  .elementor-element-3c13c27 > .elementor-element-3f30cdc,
  .elementor-element-b261a3d > .elementor-element-3d4d223,
  .elementor-element-b261a3d > .elementor-element-833f636 {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: max-height 0.25s ease, opacity 0.2s ease;
  }

  /* État ouvert (classe ajoutée par le JS sur le conteneur de colonne) */
  .elementor-element-6054194.koa-footer-open > .elementor-element-493584b,
  .elementor-element-6054194.koa-footer-open > .elementor-element-d63d175,
  .elementor-element-3c13c27.koa-footer-open > .elementor-element-0c61c57,
  .elementor-element-3c13c27.koa-footer-open > .elementor-element-3f30cdc,
  .elementor-element-b261a3d.koa-footer-open > .elementor-element-3d4d223,
  .elementor-element-b261a3d.koa-footer-open > .elementor-element-833f636 {
    max-height: 1000px;
    opacity: 1;
  }

  .elementor-element-6054194.koa-footer-open > .elementor-element-323df19::after,
  .elementor-element-3c13c27.koa-footer-open > .elementor-element-eeb4035::after,
  .elementor-element-b261a3d.koa-footer-open > .elementor-element-cdcb859::after {
    transform: rotate(-135deg);
  }

  /* Liste de liens : marges internes propres une fois dépliée */
  .elementor-element-d63d175,
  .elementor-element-3f30cdc,
  .elementor-element-833f636 {
    padding: 8px 4px 4px !important;
  }

  /* ===== 4. Bloc légal (conteneur bas, séparé : copyright + liens légaux) =====
     Le conteneur repasse en colonne simple (Elementor le mettait en column-reverse sur
     mobile) : copyright d'abord, bouton "Informations légales" + liste ensuite. */
  .elementor-element-3127db9 {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Bouton de bascule injecté par le JS juste avant la liste de liens légaux.
     Sans JS, cet élément n'existe pas et la liste (voir règle suivante) reste visible —
     dégradation propre, aucun lien perdu. */
  .koa-footer-legal-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    margin: 4px 0 0;
    padding: 0 4px;
    background: none;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .koa-footer-legal-toggle.koa-footer-open::after {
    transform: rotate(-135deg);
  }

  /* Liste des liens légaux : repliée par défaut UNIQUEMENT si le bouton existe (JS chargé) */
  .elementor-element-3127db9 .koa-footer-legal-toggle ~ .elementor-element-a16d2b1 {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0 !important;
    transition: max-height 0.25s ease, opacity 0.2s ease;
  }
  .elementor-element-3127db9 .koa-footer-legal-toggle ~ .elementor-element-a16d2b1.koa-footer-open {
    max-height: 400px;
    opacity: 1;
    margin-top: 8px !important;
  }
}