/* ==========================================================================
   FOOTER GLOBAL (parts/footer.html + pattern footer-brand).
   Charge via wp_enqueue_style('cdp-footer') (front, toutes pages) ET
   add_editor_style(). S'applique sur tout le site (template part footer).

   Desktop (>= 1024px) = reference : marque a gauche + 5 colonnes de liens.
   Empilement sous @media (max-width: 1023.98px).
   ========================================================================== */

.cdp-footer {
    /* Largeur du bloc principal (pas full ecran) : le wrapper <footer> du
       template part n'est pas "constrained", donc alignwide ne contraint rien.
       On borne explicitement, centre, et on ajoute un padding lateral. */
    max-width: var(--wp--style--global--wide-size, 1280px);
    margin-inline: auto;
    padding-block: clamp(40px, 6vw, 72px);
    padding-inline: clamp(20px, 4vw, 40px);
    box-sizing: border-box;
}

/* Marque (gauche) + colonnes (droite) */
.cdp-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 48px;
    align-items: flex-start;
}
.cdp-footer__brand {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}
.cdp-footer__cols {
    flex: 1 1 620px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px 20px;
}

/* Neutralise le margin-block-start ajoute par le layout Gutenberg "flow"
   (is-layout-flow) aux enfants sauf le premier : en flex/grille il decalait
   les colonnes 2->5 vers le bas (« La méthode » restait plus haute). */
.cdp-footer__inner > *,
.cdp-footer__cols > * {
    margin-block-start: 0 !important;
    margin-top: 0 !important;
}

/* --------------------------------------------------------------------------
   Bloc marque
   -------------------------------------------------------------------------- */
.cdp-footer__logo {
    margin: 0;
}
.cdp-footer__logo img {
    width: 180px;
    max-width: 100%;
    height: auto;
    display: block;
}
.cdp-footer__rating {
    margin: 0;
}
.cdp-footer__rating p {
    margin: 0;
}

/* Boutons sociaux (neo-brutalism) */
.cdp-social {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 240px;
    box-sizing: border-box;
    padding: 11px 18px;
    background: var(--wp--preset--color--paper, #FCFCFC);
    border: 1px solid var(--wp--preset--color--contrast, #241A16);
    border-radius: 100px;
    box-shadow: 2px 3px 0 0 var(--wp--preset--color--contrast, #241A16);
    text-decoration: none;
    color: var(--wp--preset--color--contrast, #241A16);
    font-family: "Figtree", sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.cdp-social:hover,
.cdp-social:focus-visible {
    transform: translate(1px, 2px);
    box-shadow: 1px 1px 0 0 var(--wp--preset--color--contrast, #241A16);
}
/* Rapproche les 2 boutons sociaux entre eux (le gap 16px du bloc marque etait
   trop grand entre Discord et YouTube). N'affecte pas YouTube <-> Recherche. */
.cdp-social + .cdp-social {
    margin-top: -8px;
}
.cdp-social__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
}
.cdp-social--discord .cdp-social__icon {
    color: #5865F2;
}
.cdp-social--youtube .cdp-social__icon {
    color: #FF0000;
}

/* Champ de recherche (bloc core/search) */
.cdp-footer__search {
    width: 100%;
    max-width: 240px;
    margin: 0;
}
.cdp-footer__search .wp-block-search__inside-wrapper {
    border: 1px solid var(--wp--preset--color--contrast, #241A16);
    border-radius: 100px;
    box-shadow: 2px 3px 0 0 var(--wp--preset--color--contrast, #241A16);
    background: var(--wp--preset--color--paper, #FCFCFC);
    padding: 4px 4px 4px 16px;
    overflow: hidden;
}
.cdp-footer__search .wp-block-search__input {
    border: none !important;
    background: transparent !important;
    font-family: "Figtree", sans-serif;
    font-size: 0.9rem;
    padding: 6px 0;
}
.cdp-footer__search .wp-block-search__input:focus {
    outline: none;
}
.cdp-footer__search .wp-block-search__button {
    margin: 0;
    background: transparent !important;
    color: var(--wp--preset--color--contrast, #241A16) !important;
    border: none !important;
    box-shadow: none !important;
    padding: 6px 10px !important;
}

/* --------------------------------------------------------------------------
   Colonnes de liens
   -------------------------------------------------------------------------- */
.cdp-footer__col-title {
    margin: 0 0 14px;
    font-family: "Figtree", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    /* Annule le letter-spacing negatif que le theme applique aux titres
       (concu pour Playfair Display, pas pour Figtree). */
    letter-spacing: normal;
    color: var(--wp--preset--color--contrast, #241A16);
}
.cdp-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.cdp-footer__list li {
    margin: 0;
}
.cdp-footer__list a {
    color: var(--wp--preset--color--contrast-muted, rgba(36, 26, 22, 0.67));
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.15s ease;
}
.cdp-footer__list a:hover,
.cdp-footer__list a:focus-visible {
    color: var(--wp--preset--color--contrast, #241A16);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Barre legale
   -------------------------------------------------------------------------- */
.cdp-footer__legal {
    margin-top: clamp(32px, 5vw, 56px);
    padding-top: 20px;
    border-top: 1px solid var(--wp--preset--color--contrast-muted, rgba(36, 26, 22, 0.2));
}
.cdp-footer__legal a {
    color: var(--wp--preset--color--contrast-muted, rgba(36, 26, 22, 0.67));
    text-decoration: none;
}
.cdp-footer__legal a:hover,
.cdp-footer__legal a:focus-visible {
    color: var(--wp--preset--color--contrast, #241A16);
    text-decoration: underline;
}
.cdp-footer__legal-links {
    gap: 20px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablette : marque pleine largeur au-dessus, colonnes en 3 puis 2. */
@media (max-width: 1023.98px) {
    .cdp-footer__inner {
        flex-direction: column;
        gap: 36px;
    }
    /* Marque pleine largeur, empilee verticalement (logo, note, boutons,
       recherche). L'ancienne version passait en `flex-direction:row` et la
       rangee s'enroulait de facon desordonnee (boutons/recherche desalignes) :
       on garde donc l'empilement vertical, propre et previsible. */
    .cdp-footer__brand {
        flex: 1 1 100%;
        max-width: none;
        /* Empile pleine largeur : sans ceci, align-items:flex-start de l'inner
           retrecit la marque a la largeur de son contenu (~217px). */
        width: 100%;
    }
    /* La marque est un bloc `is-layout-constrained` : ses enfants recoivent
       margin-inline:auto (centres). En pleine largeur ca les centrerait -> on
       force l'alignement a gauche pour une colonne de marque propre. */
    .cdp-footer__inner .cdp-footer__brand > * {
        margin-inline: 0 !important;
    }
    /* Colonnes : autant que la largeur le permet (auto-fit) au lieu d'un nombre
       fige -> on remplit chaque ligne au maximum (les 5 colonnes tiennent sur une
       seule ligne des qu'il y a la place, plus de grand vide a droite).
       `width:100%` est requis : sans lui, align-items:flex-start de l'inner
       retrecit la grille a la largeur de son contenu et auto-fit tombe a 1 colonne. */
    .cdp-footer__cols {
        flex: 1 1 100%;
        width: 100%;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 28px 20px;
    }
}

@media (max-width: 680px) {
    /* Boutons + recherche pleine largeur une fois la marque tres etroite. */
    .cdp-social,
    .cdp-footer__search {
        max-width: 100%;
    }
    .cdp-footer__legal {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}