/* ============================================================
   DealFabric DS — Composant · Cartes
   ------------------------------------------------------------
   MODE ALB : la classe se pose sur la COLONNE
   (Colonne > Advanced > Developer Settings > Custom CSS Class).
   Enfold l ajoute à .flex_column, d où le sélecteur.

   Remplace à elle seule .tcard .pcard .ocard .mcard .acard .cd
   .card .sc .gw-c relevées sur les 20 maquettes, qui ne se
   distinguaient que par un rayon 14 / 16 / 18 px et une bordure
   présente ou non. Un seul rayon : --df-r-md.
   ============================================================ */

#top .df .flex_column.df-card,
#top .df .df-card{
  background:var(--df-paper);
  border:1px solid var(--df-line);
  border-radius:var(--df-r-md);
  padding:26px 26px 30px;
  transition:border-color var(--df-t), background var(--df-t);
}

/* Sur une section alternee, la carte reste blanche.

   df-alt remappe --df-paper sur --df-alt pour que ce qui vit
   dans la section prenne son fond ; une carte, elle, doit s en
   detacher. Le blanc est ecrit en dur pour la meme raison que
   dans df-card-paper : le contexte a deja reecrit le token, il
   n y a plus rien a referencer.

   Placee AVANT les variantes de fond, pour que df-card-alt,
   df-card-night et df-card-paper continuent de passer devant —
   elles ont la meme specificite, c est l ordre qui tranche. */
#top .df-alt .flex_column.df-card,
#top .df-alt .df-card{
  background:#FFFFFF;
}


/* --- Variantes de fond ---

   Chaque variante est doublee de sa forme « .flex_column », pour la
   meme raison que df-card-mark plus bas : posee sur une colonne, la
   regle de base « .flex_column.df-card » compte trois classes, contre
   deux a une variante ecrite « .df-card-alt ». La base gagnait donc,
   et la variante ne peignait rien. */
#top .df .flex_column.df-card-flat,
#top .df .df-card-flat{ border-color:transparent; }

#top .df .flex_column.df-card-alt,
#top .df .df-card-alt{ background:var(--df-alt); border-color:transparent; }

#top .df .flex_column.df-card-night,
#top .df .df-card-night{
  background:var(--df-night);
  --df-obj:var(--df-n-card);
  --df-obj-2:var(--df-n-card);
  border-color:var(--df-n-line);
  color:var(--df-n-text);
  --df-ink:var(--df-n-text);
  --df-ink-2:var(--df-n-text-2);
  --df-paper:var(--df-n-card);
  --df-line:var(--df-n-line);
  --df-link:var(--df-n-link);
  --df-alt:var(--df-n-card);
}
#top .df .df-card-night h1, #top .df .df-card-night h2,
#top .df .df-card-night h3, #top .df .df-card-night h4{
  color:var(--df-n-text);
}

/* --- Carte blanche posee sur un fond sombre ou degrade ---------
   df-card-night remappe les tokens vers le sombre ; celle-ci fait
   l inverse et RETABLIT le jeu clair chez elle. Sans ce retour
   explicite, une carte posee dans df-gradient heriterait de son
   --df-paper (blanc translucide) et de son --df-ink (blanc) : un
   panneau vitre a texte blanc, illisible.

   Les valeurs sont ecrites en dur, pas reprises d une variable :
   le contexte parent a deja ecrase les tokens, il n y a plus rien
   a quoi se raccrocher. C est la seule regle du systeme dans ce
   cas, et c est pour cette raison. */
#top .df .flex_column.df-card-paper,
#top .df .df-card-paper{
  background:#FFFFFF;
  border-color:#DFE4E8;
  color:#173A5E;
  --df-ink:#173A5E;
  --df-ink-2:#4E5C6B;
  --df-grey:#6E7C8A;
  --df-paper:#FFFFFF;
  --df-alt:#EDF4F9;
  --df-line:#DFE4E8;
  --df-link:#2E6899;
  --df-obj:linear-gradient(140deg, #EDF4F9, #F9F3E7);
}
#top .df .df-card-paper h1, #top .df .df-card-paper h2,
#top .df .df-card-paper h3, #top .df .df-card-paper h4,
#top #wrap_all .df-gradient .df-card-paper h3,
#top #wrap_all .df-night .df-card-paper h3{
  color:#173A5E;
}
#top .df-gradient .df-card-paper.df-card-link:hover,
#top .df-night .df-card-paper.df-card-link:hover{ border-color:#173A5E; }

/* --- Variantes de taille --- */
#top .df .flex_column.df-card-lg,
#top .df .df-card-lg{ border-radius:var(--df-r-lg); padding:34px 32px 38px; }
#top .df .flex_column.df-card-sm,
#top .df .df-card-sm{ padding:18px 20px 22px; }

/* Carte haute : elle donne sa hauteur à la colonne voisine */
#top .df .df-card-tall{ min-height:460px; }

/* --- Carte cliquable --- */
#top .df .df-card-link:hover{ border-color:var(--df-ink); }
#top .df-night .df-card-link:hover,
#top .df .df-card-night.df-card-link:hover{ border-color:var(--df-n-text-2); }

/* --- Carte en colonne : le contenu s étale, le pied colle en bas ---
   Utile quand une image ou un lien doit rester aligné en bas de
   plusieurs cartes de hauteurs différentes. */
#top .df .flex_column.df-card-col{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
}

/* Les colonnes d une même rangée prennent la hauteur de la plus
   haute : sans ça les cartes ne s alignent pas en bas. */
#top .df-grid-2 .entry-content-wrapper,
#top .df-grid-3 .entry-content-wrapper,
#top .df-grid-4 .entry-content-wrapper{
  align-items:stretch;
}


/* ============================================================
   Panneau sombre en surimpression
   ------------------------------------------------------------
   À poser sur la COLOR SECTION, avec df-sec-flush : le panneau
   porte lui-même son fond et ses marges internes.
   ============================================================ */

#top .df-panel .flex_column_table{ display:contents; }
#top .df-panel .av-flex-placeholder{ display:none; }
#top .df-panel .entry-content-wrapper::before,
#top .df-panel .entry-content-wrapper::after{ display:none; }

/* Le conteneur EST le panneau, et une grille de trois colonnes :
   c est ce qui permet a la rangee des mentions de s aligner sans
   markup dedie. Le chapeau et le pied la traversent. */
#top .df-panel .entry-content-wrapper{
  --df-obj:var(--df-n-card);
  --df-obj-2:var(--df-n-card);
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  /* Deux couches : le halo par-dessus l aplat nuit. Plus de
     pseudo-element — il entrait en conflit avec la neutralisation
     du clearfix, et un ::before sur un conteneur en display:grid
     s est revele trop fragile pour ce qu il apporte. */
  background:
    radial-gradient(
      var(--df-halo-size, 60% 70%) at var(--df-halo-pos, 78% 22%),
      rgba(46,104,153, var(--df-halo-alpha, .34)),
      transparent var(--df-halo-fade, 66%)
    ),
    var(--df-night);
  border-radius:24px;
  padding:76px 56px;
  color:var(--df-n-text);
  --df-ink:var(--df-n-text);
  --df-ink-2:var(--df-n-text-2);
  --df-line:var(--df-n-line);
  --df-link:var(--df-n-link);
}
/* Halo reglable sans toucher a la regle :
     --df-halo-pos    ou il se centre        (defaut 78% 22%)
     --df-halo-alpha  son intensite          (defaut .34)
     --df-halo-size   son etendue            (defaut 60% 70%)
     --df-halo-fade   ou il s eteint         (defaut 66%)
   Valeurs par defaut reprises telles quelles de la maquette
   validee : volontairement discret. */
#top .df-panel .flex_column{ position:relative; z-index:2; }
#top .df-panel h2{ color:var(--df-n-text-2); max-width:24ch; }
#top .df-panel h2 strong,
#top .df-panel h2 b{ color:var(--df-n-text); font-weight:400; }

#top .df-panel .entry-content-wrapper > .flex_column{
  float:none;
  width:auto;
  min-width:0;
  margin:0;
}

/* Chapeau et pied traversent les trois colonnes */
#top .df-panel .flex_column.df-panel-head,
#top .df-panel .flex_column.df-panel-foot{
  grid-column:1 / -1;
}
#top .df-panel .flex_column.df-panel-head{ margin-bottom:60px; }
#top .df-panel .flex_column.df-panel-foot{ margin-top:46px; }

/* Les mentions : filet haut commun, separateurs verticaux */
/* Separateurs a GAUCHE et non a droite.
   Avec border-right, il fallait retirer celui de la derniere
   cellule — mais :last-of-type vise le dernier element du meme
   TYPE parmi ses freres, c est-a-dire la colonne du bouton, pas
   la derniere mention. Un filet restait donc a l extreme droite.
   En posant le filet a gauche des cellules qui en suivent une
   autre, le probleme ne se pose plus. */
#top .df-panel .flex_column.df-panel-cell{
  padding:24px 24px 0 0;
  border-top:1px solid var(--df-n-line);
}
#top .df-panel .flex_column.df-panel-cell + .flex_column.df-panel-cell{
  border-left:1px solid var(--df-n-line);
  padding-left:24px;
}
#top .df-panel .df-panel-cell p{
  margin:0;
  font-family:var(--df-font-ui);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--df-n-text-2);
}


/* ============================================================
   Liste à coches — le motif .keys / .ticks / .checks
   À poser sur un Text Block contenant une liste à puces.
   ============================================================ */

#top .df .df-checks ul{
  margin:0;
  padding:0;
  list-style:none;
}
#top .df .df-checks li{
  position:relative;
  margin:0 0 14px;
  padding-left:26px;
  font-size:var(--df-body);
  line-height:1.55;
  color:var(--df-ink);
}
#top .df .df-checks li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:9px;
  height:5px;
  border-left:1.5px solid var(--df-gold);
  border-bottom:1.5px solid var(--df-gold);
  transform:rotate(-45deg);
}

/* Variante a filets — le motif .keys des paliers. Chaque entree est
   separee de la precedente, filet compris au-dessus de la premiere.
   A poser en plus de df-checks, jamais a la place.

   La coche est en absolu par rapport au <li> : le padding haut la
   decale d autant, il faut donc le rattraper. */
#top .df .df-checks-ruled li{
  margin:0;
  padding:14px 0 14px 26px;
  border-top:1px solid var(--df-line);
}
#top .df .df-checks-ruled li::before{
  top:calc(14px + .55em);
}


/* ============================================================
   Mur de logos — à poser sur la Color Section
   Chaque colonne devient une cellule carrée bordée.
   ============================================================ */

#top .df-wall .entry-content-wrapper{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:0;
  border-top:1px solid var(--df-line);
  border-left:1px solid var(--df-line);
}
#top .df-wall .entry-content-wrapper > .flex_column{
  float:none;
  width:auto;
  margin:0;
  aspect-ratio:16/9;
  display:grid;
  place-items:center;
  padding:20px;
  border-right:1px solid var(--df-line);
  border-bottom:1px solid var(--df-line);
  transition:background var(--df-t);
}
#top .df-wall .entry-content-wrapper > .flex_column:hover{ background:var(--df-alt); }
#top .df-wall p{ margin:0; font-size:14.5px; color:var(--df-ink-2); text-align:center; }

@media (max-width:1050px){
  #top .df-wall .entry-content-wrapper{ grid-template-columns:repeat(3,1fr); }
  #top .df-panel .entry-content-wrapper{
    grid-template-columns:1fr;
    padding:48px 26px;
    border-radius:var(--df-r-lg);
  }
  #top .df-panel .flex_column.df-panel-cell{ border-right:0; padding:20px 0 0; }
  #top .df-panel .flex_column.df-panel-head{ margin-bottom:34px; }
}
@media (max-width:700px){
  #top .df-wall .entry-content-wrapper{ grid-template-columns:repeat(2,1fr); }
}


/* ============================================================
   df-cta — carte d appel a l action de fin de page
   ------------------------------------------------------------
   Presente sur les 20 pages internes. A poser sur la COLOR
   SECTION, avec df-sec : la carte porte son fond et ses marges
   internes, la section porte le rythme vertical. Les maquettes
   lui donnent une section pleine — sans elle la carte se colle
   au bloc precedent, et le raccord se voit des que ce bloc a un
   fond (df-alt, df-gradient).

     Color Section  df df-sec df-cta
     Colonne 1/1    (rien)  titre, phrase, bouton, mention
   ============================================================ */

/* Le rythme vertical de la section, pose ici et non sur la seule
   classe df-sec : les pages collees avant ce correctif portent
   encore df-sec-flush, qui met le padding a zero. cartes.css est
   servi apres 01-enfold-reset.css, donc a specificite egale c est
   cette regle qui passe — les deux combinaisons rendent pareil. */
#top .df-cta{
  padding-top:var(--df-sec-y);
  padding-bottom:var(--df-sec-y);
}

/* Les deux renvois de bas de page appartiennent visuellement a
   l appel a l action : ils se rapprochent. Le plein rythme reste
   pour les pages ou le CTA est la derniere section, devant le
   pied de page. Un navigateur sans :has garde ce plein rythme —
   c est plus large, jamais casse. */
#top .avia-section.df-cta:has(+ .df-duo){
  padding-bottom:40px;
}

#top .df-cta .flex_column_table{ display:contents; }
#top .df-cta .av-flex-placeholder{ display:none; }
#top .df-cta .entry-content-wrapper::before,
#top .df-cta .entry-content-wrapper::after{ display:none; }

#top .df-cta .entry-content-wrapper{
  --df-obj:var(--df-n-card);
  --df-obj-2:var(--df-n-card);
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(
      var(--df-halo-size, 60% 70%) at var(--df-halo-pos, 78% 22%),
      rgba(46,104,153, var(--df-halo-alpha, .28)),
      transparent var(--df-halo-fade, 66%)
    ),
    var(--df-night);
  border-radius:12px;
  padding:66px 40px 60px;
  text-align:center;
  color:var(--df-n-text);
  --df-ink:var(--df-n-text);
  --df-ink-2:var(--df-n-text-2);
  --df-line:var(--df-n-line);
  --df-link:var(--df-n-link);
}
#top .df-cta .entry-content-wrapper .flex_column{
  float:none;
  width:auto;
  min-width:0;
  margin:0;
}
#top .df-cta h2,
#top #wrap_all .df-cta h2{
  color:var(--df-n-text);
  max-width:22ch;
  margin-left:auto;
  margin-right:auto;
}
#top .df-cta p{ max-width:56ch; margin-left:auto; margin-right:auto; }
#top .df-cta .avia-button-wrap{ margin-top:26px; }

/* La mention sous le bouton — « Reponse sous 24 h » */
#top .df-cta .df-cta-after,
#top .df-cta .df-cta-after p{
  margin-top:16px;
  font-size:var(--df-xs);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--df-n-text-2);
}

@media (max-width:1050px){
  #top .df-cta .entry-content-wrapper{
    padding:44px 26px 48px;
    border-radius:var(--df-r-lg);
  }
}


/* ============================================================
   df-card-media — carte dont le visuel touche les bords
   ------------------------------------------------------------
   Le motif .ocard .lp .d2 .tcard des maquettes : une bande
   d image en tete, collee aux bords de la carte, puis le texte
   dans la marge normale.

     Colonne     df-card df-card-media
     Bloc 1      df-ph df-card-visual   (ou une Image)
     Bloc 2      titre et texte

   Le visuel ressort de la carte par une marge negative egale a
   son padding lateral, d ou --df-card-pad. Sans overflow:hidden
   sur la carte, il deborderait du rayon des angles.
   ============================================================ */

#top .df .df-card{    --df-card-pad:26px; }
#top .df .df-card-lg{ --df-card-pad:32px; }
#top .df .df-card-sm{ --df-card-pad:20px; }

#top .df .flex_column.df-card-media,
#top .df .df-card-media{
  overflow:hidden;
  padding-top:0;
}

/* Hauteur reglable par --df-card-visual-h, au cas par cas. */
#top .df .df-card-media .df-card-visual,
#top .df .df-card-media .df-card-visual.df-ph{
  margin-top:0;
  margin-left:calc(-1 * var(--df-card-pad));
  margin-right:calc(-1 * var(--df-card-pad));
  min-height:var(--df-card-visual-h, 160px);
  border-radius:0;
}
#top .df .df-card-media .df-card-visual img{
  display:block;
  width:100%;
  height:var(--df-card-visual-h, 160px);
  object-fit:cover;
  border-radius:0;
}

/* Variante sans recadrage — a poser EN PLUS de df-card-visual.

   Par defaut le visuel a une hauteur fixe et « object-fit:cover »
   remplit la boite, quitte a rogner : une image plus large que la
   boite est mise a l echelle sur la hauteur, et deborde sur les
   cotes. C est ce qui donne l impression de zoom, et qui mange les
   marges laissees autour du dessin.

   Ici la hauteur suit les proportions du fichier. Rien n est rogne,
   rien n est etire, et la hauteur se recalcule toute seule selon la
   largeur de la colonne.

   Contrepartie : les vignettes d une meme rangee n ont plus
   forcement la meme hauteur si leurs fichiers n ont pas le meme
   rapport. Les six vignettes du processus M&A sont toutes en
   3168x1173, donc elles restent alignees. */
#top .df .df-card-media .df-card-visual-auto,
#top .df .df-card-media .df-card-visual-auto.df-ph{
  min-height:0;
  height:auto;
}
#top .df .df-card-media .df-card-visual-auto img{
  height:auto;
  object-fit:fill;
}


/* Le cas de l element Image d Enfold, qui n est pas un simple
   <img> mais trois boites emboitees :

     .avia-image-container        <- df-card-visual est ici
       .avia-image-container-inner
         .avia-image-overlay-wrap
           img.avia_image

   Deux reglages d Enfold empechent le plein cadre. Le conteneur
   est en « max-width:100% », donc il ne peut pas depasser la
   largeur utile de la carte — nos marges negatives n ont alors
   plus de quoi s etendre. Et en alignement centre l interieur
   passe en « inline-block », qui se retracte a la largeur
   naturelle du fichier : le « width:100% » de l image se calcule
   contre cette largeur-la, et ne stretche donc rien.

   On repasse la chaine complete en bloc pleine largeur. Le
   « margin-bottom:10px » d avia-align-center saute au passage :
   le visuel doit toucher le texte, pas flotter au-dessus. */
#top .df .df-card-media .df-card-visual.avia-image-container{
  max-width:none;
  margin-bottom:0;
}
#top .df .df-card-media .df-card-visual .avia-image-container-inner,
#top .df .df-card-media .df-card-visual .avia-image-overlay-wrap,
#top .df .df-card-media .df-card-visual a.avia_image{
  display:block;
  width:100%;
  max-width:none;
  margin:0;
  border-radius:0;
}


/* ============================================================
   df-band — bandeau nuit arrondi, deux colonnes
   ------------------------------------------------------------
   Le motif .wide : un panneau sombre insere dans une section
   claire, texte a gauche, visuel a droite. Meme mecanique que
   df-cta, mais en deux colonnes et aligne a gauche.

     Color Section  df df-sec-flush df-band
     Colonne 1/2    texte
     Colonne 2/2    visuel
   ============================================================ */

#top .df-band .flex_column_table{ display:contents; }
#top .df-band .av-flex-placeholder{ display:none; }
#top .df-band .entry-content-wrapper::before,
#top .df-band .entry-content-wrapper::after{ display:none; }

#top .df-band .entry-content-wrapper{
  --df-obj:var(--df-n-card);
  --df-obj-2:var(--df-n-card);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:center;
  background:var(--df-night);
  border-radius:24px;
  padding:48px 44px;
  color:var(--df-n-text);
  --df-ink:var(--df-n-text);
  --df-ink-2:var(--df-n-text-2);
  --df-paper:var(--df-n-card);
  --df-line:var(--df-n-line);
  --df-link:var(--df-n-link);
  --df-alt:var(--df-n-card);
}
#top .df-band .entry-content-wrapper .flex_column{
  float:none;
  width:auto;
  min-width:0;
  margin:0;
}
#top .df-band h2,
#top .df-band h3{ color:var(--df-n-text); }

@media (max-width:1050px){
  #top .df-band .entry-content-wrapper{
    grid-template-columns:1fr;
    gap:26px;
    padding:32px 24px;
    border-radius:var(--df-r-lg);
  }
}


/* ============================================================
   df-card-mark — l offre mise en avant
   ------------------------------------------------------------
   Le motif .plan.mid : parmi trois cartes d offre, celle que l on
   recommande porte un filet plus sombre et plus epais. Deux
   selecteurs, car .flex_column.df-card pose deja un border a une
   specificite superieure.
   ============================================================ */

#top .df .flex_column.df-card-mark,
#top .df .df-card-mark{
  border-color:var(--df-ink);
  border-width:1.5px;
}


/* ============================================================
   df-card-band — la carte pleine largeur en bandeau
   ------------------------------------------------------------
   Le motif .msband des maquettes : une carte qui occupe toute la
   largeur, tout centre, et dont le titre et le texte sont
   resserres pour ne pas s etaler sur la mesure complete.

     Colonne 1/1  df-card df-card-lg df-card-alt df-card-band

   Placee apres df-card-lg : a specificite egale c est l ordre qui
   tranche, et c est ce padding-ci qu on veut.
   ============================================================ */

#top .df .flex_column.df-card-band,
#top .df .df-card-band{
  padding:44px 40px;
  text-align:center;
}
/* Le titre n est PAS mis a la mesure. La maquette le plafonnait a
   24ch, ce qui le cassait en quatre lignes tres courtes : revu en
   recette, il court sur toute la largeur de la carte. Il n y a donc
   plus rien a declarer pour lui — le centrage vient de
   « text-align:center » pose plus haut, qui s herite.

   Le paragraphe, lui, garde sa mesure : sans elle il s etalerait
   sur pres de 1000 px, illisible. */
#top .df .df-card-band p{
  max-width:60ch;
  margin-left:auto;
  margin-right:auto;
}


/* ============================================================
   df-logogrid — quelques logos dans une demi-colonne
   ------------------------------------------------------------
   df-wall fait la meme chose mais a l echelle d une section, une
   colonne par logo. Ici le mur tient dans la moitie d un split :
   il vit donc dans un seul Text Block, a partir d une simple
   liste a puces.

     Text Block  df-logogrid
     contenu     <ul><li>FC Partners</li>...</ul>

   Le nombre de colonnes se regle par --df-logogrid-cols.
   ============================================================ */

#top .df .df-logogrid ul{
  display:grid;
  grid-template-columns:repeat(var(--df-logogrid-cols, 3), 1fr);
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--df-line);
  border-left:1px solid var(--df-line);
}
#top .df .df-logogrid li{
  display:grid;
  place-items:center;
  aspect-ratio:16 / 9;
  margin:0;
  padding:16px;
  text-align:center;
  font-size:14.5px;
  line-height:1.4;
  color:var(--df-ink-2);
  list-style:none;
  border-right:1px solid var(--df-line);
  border-bottom:1px solid var(--df-line);
  transition:background var(--df-t);
}
#top .df .df-logogrid li:hover{ background:var(--df-alt); }
#top .df .df-logogrid li img{ max-width:100%; height:auto; }

@media (max-width:700px){
  #top .df .df-logogrid ul{ grid-template-columns:1fr 1fr; }
}


/* Nombre de colonnes du mur de logos compact */
#top .df .df-logogrid-4{ --df-logogrid-cols:4; }
#top .df .df-logogrid-5{ --df-logogrid-cols:5; }


/* ============================================================
   df-duotone — deux panneaux soudes dans un seul cadre
   ------------------------------------------------------------
   Le motif .split de la page Contact : un bloc arrondi coupe en
   deux, la moitie sombre portant le propos, la moitie claire le
   formulaire. Pas de gouttiere entre les deux : c est un seul
   cadre, d ou overflow:hidden et gap:0.

     Color Section  df df-sec df-duotone
     Colonne 1/2    df-pane-night   propos et visuel
     Colonne 2/2    (rien)          formulaire

   La moitie sombre etale son contenu : le visuel se colle en bas,
   quelle que soit la hauteur du formulaire en face.
   ============================================================ */

#top .df-duotone .flex_column_table{ display:contents; }
#top .df-duotone .av-flex-placeholder{ display:none; }
#top .df-duotone .entry-content-wrapper::before,
#top .df-duotone .entry-content-wrapper::after{ display:none; }

#top .df-duotone .entry-content-wrapper{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:0;
  align-items:stretch;
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--df-line);
  background:var(--df-paper);
}
#top .df-duotone .entry-content-wrapper > .flex_column{
  float:none;
  width:auto;
  min-width:0;
  margin:0;
  padding:48px 46px 52px;
}

/* La moitie sombre : elle remappe les tokens, tout ce qu elle
   contient suit — sur-titre, titres, texte, filets. */
#top .df-duotone .flex_column.df-pane-night{
  --df-obj:var(--df-n-card);
  --df-obj-2:var(--df-n-card);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:52px 46px;
  background:var(--df-night);
  color:var(--df-n-text);
  --df-ink:var(--df-n-text);
  --df-ink-2:var(--df-n-text-2);
  --df-paper:var(--df-n-card);
  --df-line:var(--df-n-line);
  --df-link:var(--df-n-link);
  --df-alt:var(--df-n-card);
}
#top .df-duotone .df-pane-night h2,
#top .df-duotone .df-pane-night h3{ color:var(--df-n-text); }

@media (max-width:1050px){
  #top .df-duotone .entry-content-wrapper{
    grid-template-columns:1fr;
    border-radius:var(--df-r-lg);
  }
  #top .df-duotone .entry-content-wrapper > .flex_column,
  #top .df-duotone .flex_column.df-pane-night{ padding:32px 24px 36px; }
}


/* ============================================================
   df-duo — les deux renvois de bas de page
   ------------------------------------------------------------
   Deux blocs distincts, separes par une gouttiere. Les maquettes
   les soudaient en un seul cadre ; le choix a ete revu en recette
   pour les detacher l un de l autre.

     Color Section  df df-pad-bottom df-duo
     Colonne 1/2    icone, titre, phrase, lien
     Colonne 2/2    idem
   ============================================================ */

#top .df-duo .flex_column_table{ display:contents; }
#top .df-duo .av-flex-placeholder{ display:none; }
#top .df-duo .entry-content-wrapper::before,
#top .df-duo .entry-content-wrapper::after{ display:none; }

#top .df-duo .entry-content-wrapper{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--df-gap);
  align-items:stretch;
}
#top .df-duo .entry-content-wrapper > .flex_column{
  float:none;
  width:auto;
  min-width:0;
  margin:0;
  padding:30px 32px 34px;
  border:1px solid var(--df-line);
  border-radius:12px;
  transition:border-color var(--df-t);
}
#top .df-duo .entry-content-wrapper > .flex_column:hover{
  border-color:var(--df-ink);
}

@media (max-width:1000px){
  #top .df-duo .entry-content-wrapper{ grid-template-columns:1fr; }
}