@charset "UTF-8";
/* ==========================================================================
   DG 2026-09-17 - Bas de page #footer-before : mise en forme editoriale
   --------------------------------------------------------------------------
   FICHIER CSS STATIQUE, servi tel quel par Apache. Il ne passe par AUCUN
   compilateur : un navigateur ignore silencieusement une regle qu il ne
   comprend pas, donc ce fichier ne peut pas produire d erreur 500.
   Charge depuis templates/_partials/head.tpl, APRES la feuille du theme.
   Desactivation : retirer la ligne <link> de head.tpl. Rien d autre a defaire.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Le conteneur : il ne porte plus ni fond ni marge, les bandes le font
   -------------------------------------------------------------------------- */

#footer-before {
  padding: 0;
  background-color: #fff;
}

/* Une bande = une pleine largeur qui porte son fond et son rythme vertical.
   Le .container reste À L'INTÉRIEUR, donc le texte garde la largeur du site. */
.dg-band {
  padding: 3.75rem 0 3.5rem;
}
.dg-band--adv {
  background-color: #fbfaf8;
  border-top: 1px solid #ede8df;
  border-bottom: 1px solid #ede8df;
}
.dg-band--why {
  padding-top: 4.25rem;
  background-color: #fff;
}
.dg-band--faq {
  padding-bottom: 4.5rem;
  background-color: #fbfaf8;
  border-top: 1px solid #ede8df;
}


/* --------------------------------------------------------------------------
   2. En-tête de bande : surtitre + titre + filet or
   -------------------------------------------------------------------------- */

.dg-head {
  margin-bottom: 2.875rem;
  text-align: center;
}
.dg-eyebrow {
  margin: 0 0 .875rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #8a6c1c;
}
#footer-before .dg-title {
  margin: 0;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.1;
}
.dg-rule {
  width: 44px;
  height: 1px;
  margin: 1.125rem auto 0;
  background-color: #cdaa2e;
}


/* --------------------------------------------------------------------------
   3. Bande 1 — la réassurance
   Le markup vient du BO (theme-blocks.tpl, hook displayFooterBefore) : il n'est
   pas modifiable, tout se joue ici en CSS sur les classes existantes.
   -------------------------------------------------------------------------- */

#footer-before .theme-blocks-footerBefore {
  padding-right: 1.875rem;
  padding-left: 1.875rem;
}

/* Filets verticaux entre les 4 colonnes (dès md, là où elles sont côte à côte) */
@media (min-width: 768px) {
  #footer-before .theme-blocks-footerBefore + .theme-blocks-footerBefore {
    border-left: 1px solid #e9e4db;
  }
}
/* En 2 colonnes (mobile), le filet passe en croix */
@media (max-width: 767.98px) {
  #footer-before .theme-blocks-footerBefore:nth-child(even) {
    border-left: 1px solid #e9e4db;
  }
  #footer-before .theme-blocks-footerBefore:nth-child(1),
  #footer-before .theme-blocks-footerBefore:nth-child(2) {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e9e4db;
  }
  #footer-before .theme-blocks-footerBefore:nth-child(3),
  #footer-before .theme-blocks-footerBefore:nth-child(4) {
    padding-top: 1.5rem;
  }
}

/* Icônes : 50 px → 34 px. Le thème pose un mask sans taille, d'où le mask-size
   explicite, sinon le SVG est rogné au lieu d'être réduit. */
#footer-before .theme-blocks-footerBefore.icon i::before {
  width: 34px;
  height: 34px;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}

/* Titre : petites capitales espacées. Le min-height aligne les descriptions
   entre une colonne dont le titre tient sur 1 ligne et une sur 2 (défaut visible
   aujourd'hui sur « Paiement en plusieurs fois avec Alma »). */
#footer-before .theme-blocks-footerBefore .block-title {
  min-height: 2.125rem;
  padding: 0;
  font-size: .78125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#footer-before .theme-blocks-footerBefore .block-text {
  max-width: 232px;
  margin-bottom: 0 !important; /* annule .mb-3, utilitaire Bootstrap en !important */
}
#footer-before .theme-blocks-footerBefore .block-description {
  margin-bottom: 0;
  font-size: .84375rem;
  font-weight: 300;
  line-height: 1.65;
  color: #6b6763;
}

/* Lien : collé en bas de colonne (mt-auto du thème), tiret or qui s'allonge
   au survol au lieu de disparaître. La flèche ::after du thème reste active. */
#footer-before .theme-blocks-footerBefore .block-link {
  padding-top: 1.5rem;
  font-size: .71875rem;
  font-weight: 500;
  letter-spacing: .14em;
}
#footer-before .theme-blocks-footerBefore .block-link::before {
  width: 18px;
  transition: width .28s ease;
}
#footer-before .theme-blocks-footerBefore .block-link:hover::before {
  width: 30px;
}
#footer-before .theme-blocks-footerBefore.icon i {
  transition: transform .28s ease;
}
#footer-before .theme-blocks-footerBefore.icon:hover i {
  transform: translateY(-2px);
}


/* --------------------------------------------------------------------------
   4. Bande 2 — « Pourquoi choisir »
   Texte ferré à gauche : quatre paragraphes de 60 mots centrés étaient la
   première cause d'illisibilité du bloc. Numéro + filet haut donnent le rythme.
   -------------------------------------------------------------------------- */

/* Le filet est un ::before et non un border-top : sur une colonne Bootstrap le
   border-top couvre aussi les gouttières de 15 px, les quatre filets se touchent
   et ne forment plus qu'un seul trait. Le ::before, lui, respecte le padding. */
.dg-why-item {
  margin-top: 1.5rem;
  text-align: left;
}
.dg-why-item::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: 1.25rem;
  background-color: #e6e1d8;
}
.dg-why-num {
  margin: 0;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .22em;
  color: #8a6c1c;
}
.dg-why-title {
  margin: .75rem 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
}
.dg-why-text {
  margin: 0;
  font-size: .84375rem;
  font-weight: 300;
  line-height: 1.75;
  color: #4a4744;
}


/* --------------------------------------------------------------------------
   5. Bande 3 — la FAQ (accueil seulement)
   Vrai accordéon : marqueur natif supprimé, + / − en or, filets de séparation.
   -------------------------------------------------------------------------- */

.dg-faq {
  max-width: 880px;
  margin: 0 auto;
}
.dg-faq-list {
  border-top: 1px solid #e6e1d8;
}
.dg-faq-item {
  margin-bottom: 0;
  border-bottom: 1px solid #e6e1d8;
}
.dg-faq-item > summary {
  position: relative;
  padding: 1.375rem 2.875rem 1.375rem 0;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.4;
  color: #161616;
  list-style: none;
  cursor: pointer;
  transition: color .2s ease;
}
.dg-faq-item > summary::-webkit-details-marker { display: none; }
.dg-faq-item > summary:hover { color: #8a6c1c; }

/* Le + est fait de deux filets ; à l'ouverture la barre verticale pivote et
   s'efface, il ne reste que le −. */
.dg-faq-item > summary::before,
.dg-faq-item > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  background-color: #cdaa2e;
  transition: transform .3s ease, opacity .3s ease;
}
.dg-faq-item > summary::before {
  right: 4px;
  width: 14px;
  height: 1px;
  margin-top: 0;
}
.dg-faq-item > summary::after {
  right: 10px;
  width: 1px;
  height: 14px;
  margin-top: -7px;
}
.dg-faq-item[open] > summary { font-weight: 600; }
.dg-faq-item[open] > summary::after {
  transform: rotate(90deg);
  opacity: 0;
}

.dg-faq-answer {
  max-width: 760px;
  padding: 0 2.875rem 1.5rem 0;
  font-size: .875rem;
  font-weight: 300;
  line-height: 1.8;
  color: #4a4744;
}

/* --------------------------------------------------------------------------
   6. Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .dg-band { padding: 2.75rem 0 2.5rem; }
  .dg-band--why { padding-top: 3rem; }
  .dg-band--faq { padding-bottom: 3rem; }

  .dg-head { margin-bottom: 2.125rem; }
  .dg-eyebrow { font-size: .625rem; }
  #footer-before .dg-title { font-size: 1.4375rem; }

  #footer-before .theme-blocks-footerBefore {
    padding-right: .625rem;
    padding-left: .625rem;
  }
  #footer-before .theme-blocks-footerBefore .block-title { font-size: .71875rem; }

  .dg-why-item { margin-top: 1.25rem; }
  .dg-faq-item > summary {
    padding-right: 2.5rem;
    font-size: .96875rem;
  }
  .dg-faq-answer { padding-right: 2.5rem; }
}

/* --------------------------------------------------------------------------
   7. Ligne « moyens de paiement » + mention DCC2 — theme-footer.tpl
   Le bloc n'avait jamais recu la moindre regle : ni filet, ni espacement, ni
   alignement des logos. Il est desormais visible aussi sous 992 px.
   -------------------------------------------------------------------------- */

#theme-footer .footer-paiement {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(22, 22, 22, .1);
}
#theme-footer .footer-paiement-modes {
  gap: .75rem 1.75rem;
}
#theme-footer .footer-paiement-left,
#theme-footer .footer-paiement-right {
  gap: .625rem;
}
#theme-footer .footer-paiement .font-weight-light {
  font-size: .6875rem;
  font-weight: 600 !important; /* annule .font-weight-light du theme */
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6b6763;
}

/* Cartouches de hauteur unique. object-fit: contain fait tenir chaque logo dans
   sa boite sans le deformer NI l'agrandir : les PNG sont en 1x, un logo etire
   se verrait tout de suite. Largeurs par alt, il n'y a pas d'autre prise. */
#theme-footer .footer-paiement img {
  box-sizing: border-box;
  height: 32px;
  margin: 0 !important; /* annule .ml-2 / .mx-2, le gap s'en charge */
  padding: 6px 10px;
  object-fit: contain;
  background-color: #fff;
  border: 1px solid #e6e1d8;
  border-radius: 3px;
}
#theme-footer .footer-paiement img[alt="CB"]     { width: 48px; }
#theme-footer .footer-paiement img[alt="Paypal"] { width: 78px; }
#theme-footer .footer-paiement img[alt="Alma"]   { width: 62px; }

/* Mention DCC2. Volontairement PLUS GRANDE que le libelle de l'offre
   (12,5 px contre 11 px) : l'avertissement ne doit pas etre le plus petit
   texte de la zone. Contraste 5,3:1 sur #f6f4f4. */
#theme-footer .footer-paiement-legal {
  max-width: 62rem;
  margin: 1.25rem 0 0;
  font-size: .78125rem;
  font-weight: 300;
  line-height: 1.6;
  color: #6b6763;
}
#theme-footer .footer-paiement-legal a {
  color: #4a4744;
  text-decoration: underline;
}
#theme-footer .footer-paiement-legal a:hover {
  color: #161616;
}

/* Sous 992 px, .footer-right est deja centre par le theme (text-center), mais
   un conteneur flex ne suit pas text-align : il faut justify-content. */
@media (max-width: 991.98px) {
  #theme-footer .footer-paiement {
    margin-top: 2rem;
    padding-top: 1.25rem;
  }
  #theme-footer .footer-paiement-modes {
    justify-content: center;
  }
  #theme-footer .footer-paiement-legal {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}