/* ============================================================
   DealFabric Design System — 03 · Mise en page
   ------------------------------------------------------------
   Enfold monte ses colonnes en flottants avec des gouttières en
   pourcentage :

     .flex_column  { float:left; width:100% }
     .av_one_third { margin-left:6%; width:29.333% }

   Ces classes remplacent ce système par une grille CSS, posée
   sur la COLOR SECTION. Conséquence utile : le découpage choisi
   dans l ALB n a plus d importance. Six colonnes 1/3, quatre 1/4,
   trois 1/2 — la classe impose la grille et le responsive.

   Le client peut donc ajouter ou retirer une colonne sans jamais
   casser la mise en page.
   ============================================================ */


/* ------------------------------------------------------------
   Contextes de couleur de section
   ------------------------------------------------------------
   À préférer au sélecteur de couleur de fond de la Color Section :
   ces classes redéfinissent les tokens, donc tout ce que contient
   la section bascule seul — cartes, boutons, filets, sur-titres.
   Aucune classe « sombre » à ajouter sur les enfants.

   Deux blocs sombres maximum par page, pied de page compris.
   ------------------------------------------------------------ */

#top .df-alt{
  background:var(--df-alt);
  --df-paper:var(--df-alt);
  --df-line:var(--df-line-alt);
}

#top .df-night{
  background:var(--df-night);
  --df-obj:var(--df-n-card);
  --df-obj-2:var(--df-n-card);
  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-night h1, #top .df-night h2,
#top .df-night h3, #top .df-night h4{ color:var(--df-n-text); }
#top .df-night a:hover{ color:var(--df-n-link-h); }

/* Degrade bleu. Meme mecanique que df-night : on remappe les
   tokens, et tout ce que contient la section suit — sur-titre,
   chapo, listes a filets, boutons, liens.
     titres et texte fort  -> blanc pur
     sur-titre et chapo    -> #DFE4E8
   Les filets passent en blanc translucide : une teinte fixe
   marcherait sur le bleu clair du haut du degrade, pas sur le
   marine du bas. */
#top .df-gradient{
  /* Assemble ici, et non dans 00-tokens.css : c est cet element
     qui porte la variante, donc c est ici que les sous-tokens
     doivent etre lus. */
  background:linear-gradient(var(--df-blue-a),
    #5B98D7 var(--df-blue-p1),
    #39699B var(--df-blue-p2),
    #173A5E var(--df-blue-p3));
  color:#FFFFFF;
  --df-ink:#FFFFFF;
  --df-ink-2:#DFE4E8;
  --df-grey:#DFE4E8;
  --df-paper:rgba(255,255,255,.08);
  --df-line:rgba(255,255,255,.28);
  --df-link:#FFFFFF;
  --df-alt:rgba(255,255,255,.10);
}
#top .df-gradient h1, #top .df-gradient h2,
#top .df-gradient h3, #top .df-gradient h4{ color:#FFFFFF; }
#top .df-gradient a:hover{ color:#FFFFFF; }

/* Variantes de position, a poser SUR la meme Color Section que
   df-gradient. Memes couleurs, course deplacee.

   Le reglage par defaut eclaircit le bord gauche : a reserver aux
   sections dont le texte n est pas a gauche, sinon le blanc perd
   son contraste sur le bleu clair. */

/* Course inversee : le clair passe a droite, le marine tient la
   gauche. Le choix des blocs en deux colonnes texte / visuel. */
#top .df-gradient-inverse{ --df-blue-a:264deg; }

/* Diagonale franche depuis le coin haut gauche. Plus de mouvement,
   le clair mord sur le premier tiers de la hauteur. */
#top .df-gradient-diag{
  --df-blue-a:145deg;
  --df-blue-p1:0%;
  --df-blue-p2:22%;
  --df-blue-p3:52%;
}

/* Meme sens qu au depart, mais la transition court sur toute la
   largeur au lieu de s arreter au tiers. Rendu plus doux. */
#top .df-gradient-large{
  --df-blue-p1:0%;
  --df-blue-p2:38%;
  --df-blue-p3:88%;
}


/* ------------------------------------------------------------
   Le conteneur que pose « Equal height columns »
   ------------------------------------------------------------
   Quand cette option est active, Enfold enveloppe les colonnes
   par rangées dans un .flex_column_table, avec des cales
   .av-flex-placeholder entre elles. Les colonnes cessent donc
   d etre enfants directs de .entry-content-wrapper.

   display:contents retire ce conteneur de la mise en page sans
   toucher au DOM : ses colonnes redeviennent des elements de
   notre grille, et les rangees fusionnent. L option peut donc
   rester activee ou non, le rendu est le meme.
   ------------------------------------------------------------ */

#top .df-grid-2 .flex_column_table,
#top .df-grid-3 .flex_column_table,
#top .df-grid-4 .flex_column_table,
#top .df-cells .flex_column_table,
#top .df-cells-2 .flex_column_table,
#top .df-cells-4 .flex_column_table,
#top .df-cells-5 .flex_column_table,
#top .df-split .flex_column_table,
#top .df-split-even .flex_column_table,
#top .df-split-wide .flex_column_table,
#top .df-split-aside .flex_column_table,
#top .df-split-reverse .flex_column_table{
  display:contents;
}

#top .df-grid-2 .av-flex-placeholder,
#top .df-grid-3 .av-flex-placeholder,
#top .df-grid-4 .av-flex-placeholder,
#top .df-cells .av-flex-placeholder,
#top .df-cells-2 .av-flex-placeholder,
#top .df-cells-4 .av-flex-placeholder,
#top .df-cells-5 .av-flex-placeholder,
#top .df-split .av-flex-placeholder,
#top .df-split-even .av-flex-placeholder,
#top .df-split-wide .av-flex-placeholder,
#top .df-split-aside .av-flex-placeholder,
#top .df-split-reverse .av-flex-placeholder{
  display:none;
}


/* ------------------------------------------------------------
   Socle commun : on désarme les flottants d Enfold
   ------------------------------------------------------------ */

#top .df-grid-2 .entry-content-wrapper,
#top .df-grid-3 .entry-content-wrapper,
#top .df-grid-4 .entry-content-wrapper,
#top .df-cells .entry-content-wrapper,
#top .df-cells-2 .entry-content-wrapper,
#top .df-cells-4 .entry-content-wrapper,
#top .df-cells-5 .entry-content-wrapper,
#top .df-split .entry-content-wrapper,
#top .df-split-even .entry-content-wrapper,
#top .df-split-wide .entry-content-wrapper,
#top .df-split-aside .entry-content-wrapper,
#top .df-split-reverse .entry-content-wrapper{
  display:grid;
  align-items:start;
}

/* Les grilles a filets s etirent : sans cela chaque cellule prend
   la hauteur de son texte et les filets d une meme rangee ne
   s alignent plus. align-items:start convient aux colonnes de
   texte, pas a un cadre. */
#top .df-cells .entry-content-wrapper,
#top .df-cells-2 .entry-content-wrapper,
#top .df-cells-4 .entry-content-wrapper,
#top .df-cells-5 .entry-content-wrapper{
  align-items:stretch;
}

/* Le clearfix d Enfold devient un element de grille.
   .entry-content-wrapper porte la classe « clearfix », dont les
   pseudo-elements ::before et ::after sont des boites. Inoffensifs
   en flottant, ils occupent une case des qu on passe le conteneur
   en display:grid — et tout le contenu decale d un cran. */
#top .df-grid-2 .entry-content-wrapper::before,
#top .df-grid-2 .entry-content-wrapper::after,
#top .df-grid-3 .entry-content-wrapper::before,
#top .df-grid-3 .entry-content-wrapper::after,
#top .df-grid-4 .entry-content-wrapper::before,
#top .df-grid-4 .entry-content-wrapper::after,
#top .df-cells .entry-content-wrapper::before,
#top .df-cells .entry-content-wrapper::after,
#top .df-cells-2 .entry-content-wrapper::before,
#top .df-cells-2 .entry-content-wrapper::after,
#top .df-cells-4 .entry-content-wrapper::before,
#top .df-cells-4 .entry-content-wrapper::after,
#top .df-cells-5 .entry-content-wrapper::before,
#top .df-cells-5 .entry-content-wrapper::after,
#top .df-split .entry-content-wrapper::before,
#top .df-split .entry-content-wrapper::after,
#top .df-split-even .entry-content-wrapper::before,
#top .df-split-even .entry-content-wrapper::after,
#top .df-split-reverse .entry-content-wrapper::before,
#top .df-split-reverse .entry-content-wrapper::after,
#top .df-split-wide .entry-content-wrapper::before,
#top .df-split-wide .entry-content-wrapper::after,
#top .df-split-aside .entry-content-wrapper::before,
#top .df-split-aside .entry-content-wrapper::after,
#top .df-wall .entry-content-wrapper::before,
#top .df-wall .entry-content-wrapper::after{
  display:none;
}


#top .df-grid-2 .entry-content-wrapper .flex_column,
#top .df-grid-3 .entry-content-wrapper .flex_column,
#top .df-grid-4 .entry-content-wrapper .flex_column,
#top .df-cells .entry-content-wrapper .flex_column,
#top .df-cells-2 .entry-content-wrapper .flex_column,
#top .df-cells-4 .entry-content-wrapper .flex_column,
#top .df-cells-5 .entry-content-wrapper .flex_column,
#top .df-split .entry-content-wrapper .flex_column,
#top .df-split-even .entry-content-wrapper .flex_column,
#top .df-split-wide .entry-content-wrapper .flex_column,
#top .df-split-aside .entry-content-wrapper .flex_column,
#top .df-split-reverse .entry-content-wrapper .flex_column{
  float:none;
  width:auto;
  min-width:0;
  margin:0;
}


/* ------------------------------------------------------------
   Grilles à gouttière
   ------------------------------------------------------------ */

#top .df-grid-2 .entry-content-wrapper{ grid-template-columns:repeat(2,1fr); gap:var(--df-gap); }
#top .df-grid-3 .entry-content-wrapper{ grid-template-columns:repeat(3,1fr); gap:var(--df-gap); }
#top .df-grid-4 .entry-content-wrapper{ grid-template-columns:repeat(4,1fr); gap:var(--df-gap); }

/* Gouttière large, pour du texte plutôt que des cartes */
#top .df-gap-lg .entry-content-wrapper{ gap:var(--df-gap-lg); }


/* ------------------------------------------------------------
   Grilles à filets, sans gouttière
   ------------------------------------------------------------
   Le motif des « 6 raisons », des 5 agents, des piliers.
   Les cellules se touchent, séparées par un filet d un pixel.
   ------------------------------------------------------------ */

#top .df-cells .entry-content-wrapper,
#top .df-cells-2 .entry-content-wrapper,
#top .df-cells-4 .entry-content-wrapper,
#top .df-cells-5 .entry-content-wrapper{
  gap:0;
  border-top:1px solid var(--df-line);
  border-left:1px solid var(--df-line);
}
#top .df-cells .entry-content-wrapper{   grid-template-columns:repeat(3,1fr); }
#top .df-cells-2 .entry-content-wrapper{ grid-template-columns:repeat(2,1fr); }
#top .df-cells-4 .entry-content-wrapper{ grid-template-columns:repeat(4,1fr); }
#top .df-cells-5 .entry-content-wrapper{ grid-template-columns:repeat(5,1fr); }

/* background et border-radius sont remis à zéro volontairement :
   si quelqu un a stylé la colonne dans l ALB, Enfold injecte un
   <style> inline (.flex_column.av-xxxx) qui fabriquerait des
   cartes arrondies au milieu d une grille à filets. Le design
   system tranche — ne style pas les colonnes dans le builder. */
#top .df-cells .entry-content-wrapper .flex_column,
#top .df-cells-2 .entry-content-wrapper .flex_column,
#top .df-cells-4 .entry-content-wrapper .flex_column,
#top .df-cells-5 .entry-content-wrapper .flex_column{
  background:none;
  border-radius:0;
  border-right:1px solid var(--df-line);
  border-bottom:1px solid var(--df-line);
  padding:30px 26px 34px;
  transition:background var(--df-t);
}
#top .df-cells .entry-content-wrapper .flex_column:hover,
#top .df-cells-2 .entry-content-wrapper .flex_column:hover,
#top .df-cells-4 .entry-content-wrapper .flex_column:hover,
#top .df-cells-5 .entry-content-wrapper .flex_column:hover{
  background:var(--df-alt);
}

/* Dans une cellule, le texte passe en ink : c est du contenu
   court et affirmatif, pas du paragraphe secondaire. */
#top .df-cells p,
#top .df-cells-2 p,
#top .df-cells-4 p,
#top .df-cells-5 p{
  color:var(--df-ink);
  font-size:15px;
}

/* Variante rangée : filets verticaux seuls, pas de bordure basse */
#top .df-cells-row .entry-content-wrapper{
  border-left:0;
}
#top .df-cells-row .entry-content-wrapper .flex_column{
  border-bottom:0;
}
#top .df-cells-row .entry-content-wrapper .flex_column:last-child{
  border-right:0;
}


/* ------------------------------------------------------------
   Deux colonnes déséquilibrées — texte plus objet
   ------------------------------------------------------------ */

/* Le texte est legerement plus large que l objet : c est le rapport
   des maquettes (1.1fr / .9fr sur les bandeaux de tete). L inverse
   etranglait le titre, qui passait a trois lignes. */
#top .df-split .entry-content-wrapper,
#top .df-split-reverse .entry-content-wrapper{
  grid-template-columns:1.05fr .95fr;
  gap:56px;
}

/* Sens de lecture inverse : l objet a gauche, le texte a droite.
   direction:rtl retourne l axe de la grille — la premiere colonne
   du builder part a droite. On passe par la plutot que par `order`
   ou :first-of-type, qui dependraient de la structure exacte
   qu Enfold sort (une colonne parfois enveloppee dans un
   flex_column_table, parfois non). Le texte lui-meme repasse en
   ltr, sinon la ponctuation se retrouverait a l envers. */
#top .df-split-reverse .entry-content-wrapper{ direction:rtl; }
#top .df-split-reverse .flex_column{ direction:ltr; }

/* L objet domine : capture large, texte court a cote. */
#top .df-split-wide .entry-content-wrapper{
  grid-template-columns:.85fr 1.15fr;
  gap:56px;
}

#top .df-split-even .entry-content-wrapper{
  grid-template-columns:1fr 1fr;
  gap:56px;
}

/* Sur-titre en marge : une colonne etroite et fixe, le titre a
   cote. Un demi-demi laissait un vide de 40 % de la largeur a
   cote de deux mots. */
#top .df-split-aside .entry-content-wrapper{
  grid-template-columns:250px 1fr;
  gap:40px;
  align-items:start;
}

/* Un chapeau lateral qui precede sa grille : df-pad-top supprime
   le padding bas de la section, il faut donc redonner l air que la
   maquette pose en marge basse du chapeau. */
#top .df-pad-top.df-split-aside{ padding-bottom:44px; }

@media (max-width:900px){
  #top .df-split-aside .entry-content-wrapper{
    grid-template-columns:1fr;
    gap:12px;
  }
}


/* ------------------------------------------------------------
   Chapeau de section
   ------------------------------------------------------------
   À poser sur un Text Block, ou sur la colonne qui le contient.
   ------------------------------------------------------------ */

/* float:none est indispensable.
   Posé sur une colonne, df-head hérite du .flex_column{float:left}
   d Enfold — et margin:0 auto ne centre pas un élément flottant.
   Dans les sections en grille le socle désarme déjà les flottants,
   mais un chapeau dans sa propre section n en bénéficie pas. */
#top .df .df-head{
  float:none;
  max-width:780px;
  margin:0 auto var(--df-head-mb);
  text-align:center;
}
#top .df .df-head p{
  font-size:var(--df-body-lg);
}
/* Le second selecteur est indispensable, et il doit etre PLUS
   specifique, pas seulement egal : plus bas dans ce fichier,
   « .entry-content-wrapper .flex_column.df-head » recentre le
   chapeau avec trois classes. A egalite, c est cette regle-la qui
   l emportait, puisqu elle vient apres. On empile donc df-head et
   df-head-left sur le meme element — quatre classes — et l ordre
   des blocs cesse d avoir prise. */
#top .df .df-head-left,
#top .entry-content-wrapper .flex_column.df-head.df-head-left{
  margin-left:0;
  margin-right:auto;
  text-align:left;
}

/* ------------------------------------------------------------
   Un chapeau posé sur une colonne, à l intérieur d une grille.
   ------------------------------------------------------------
   Il traverse toute la largeur et n est PAS une cellule : ni
   bordures, ni padding de cellule, ni fond au survol. Les règles
   de grille et de cellule le visent sinon comme les autres, et
   le margin:0 du socle annulerait son centrage.

   Le cadre de .df-cells démarre néanmoins au-dessus du titre.
   Pour le rendu des maquettes, mets plutôt le chapeau dans sa
   propre Color Section : df df-pad-top au-dessus, df df-pad-bottom ici.
   ------------------------------------------------------------ */
#top .entry-content-wrapper .flex_column.df-head,
#top .df-cells .entry-content-wrapper .flex_column.df-head,
#top .df-cells-2 .entry-content-wrapper .flex_column.df-head,
#top .df-cells-4 .entry-content-wrapper .flex_column.df-head,
#top .df-cells-5 .entry-content-wrapper .flex_column.df-head{
  grid-column:1 / -1;
  border:0;
  padding:0;
  background:none;
  max-width:780px;
  margin:0 auto var(--df-head-mb);
}
#top .df-cells .entry-content-wrapper .flex_column.df-head:hover,
#top .df-cells-2 .entry-content-wrapper .flex_column.df-head:hover,
#top .df-cells-4 .entry-content-wrapper .flex_column.df-head:hover,
#top .df-cells-5 .entry-content-wrapper .flex_column.df-head:hover{
  background:none;
}

/* Le chapeau garde la typographie de section, pas celle des
   cellules : le titre ne doit pas passer en 15px ink. */
#top .df-cells .flex_column.df-head p,
#top .df-cells-2 .flex_column.df-head p,
#top .df-cells-4 .flex_column.df-head p,
#top .df-cells-5 .flex_column.df-head p{
  font-size:var(--df-body-lg);
  color:var(--df-ink-2);
}


/* ------------------------------------------------------------
   Cellules numérotées
   ------------------------------------------------------------
   Posée sur la Color Section, cette classe traite la première
   ligne de chaque colonne comme une étiquette. Un seul Text
   Block par cellule suffit donc : le client tape le numéro sur
   la première ligne, le texte en dessous, et rien d autre.
   ------------------------------------------------------------ */

#top .df-numbered .entry-content-wrapper .flex_column .avia_textblock p:first-child{
  font-family:var(--df-font-ui);
  font-size:var(--df-eyebrow);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--df-grey);
  line-height:1.4;
  margin:0 0 16px;
}
#top .df-numbered-gold .entry-content-wrapper .flex_column .avia_textblock p:first-child{
  color:var(--df-gold-ink);
}

/* Le chapeau ne doit pas être numéroté */
#top .df-numbered .entry-content-wrapper .flex_column.df-head .avia_textblock p:first-child{
  font-family:var(--df-font-text);
  font-size:var(--df-body-lg);
  letter-spacing:normal;
  text-transform:none;
  color:var(--df-ink-2);
}


/* ------------------------------------------------------------
   Liste à filets — le motif « Technologie »
   ------------------------------------------------------------ */

#top .df .df-ruled p,
#top .df .df-ruled li{
  padding:22px 0;
  margin:0;
  border-top:1px solid var(--df-line);
  font-size:var(--df-body);
  color:var(--df-ink);
  list-style:none;
}
#top .df .df-ruled ul{
  margin:0;
  padding:0;
}


/* ------------------------------------------------------------
   Utilitaires
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   df-tier — le palier, filet compris
   ------------------------------------------------------------
   Le motif .tier des maquettes. Le filet de separation doit
   s arreter aux bords du conteneur, pas traverser l ecran : il
   est donc porte par le contenu, et non par la Color Section
   comme le fait df-rule.

   Le rythme vertical suit le meme chemin — d ou df-sec-flush sur
   la section. Le filet tombe ainsi pile entre le palier
   precedent et le suivant, a egale distance des deux.

     Color Section  df df-sec-flush df-tier df-align-center df-split
   ------------------------------------------------------------ */
#top .df-tier .entry-content-wrapper{
  border-top:1px solid var(--df-line);
  padding-top:var(--df-tier-y, 56px);
  padding-bottom:var(--df-tier-y, 56px);
}


/* Mesure de ligne — a poser sur une colonne ou un Text Block.
   --df-measure se regle au cas par cas si besoin. */
#top .df .df-measure{
  max-width:var(--df-measure, 34ch);
}
#top .df .df-measure-lg{ --df-measure:46ch; }
#top .df .df-measure-sm{ --df-measure:24ch; }

/* Alignement d une colonne dans sa rangee. Utile des qu une
   grille a des rangees plus hautes que leur contenu. */
#top .df .flex_column.df-self-start{  align-self:start; }
#top .df .flex_column.df-self-center{ align-self:center; }
#top .df .flex_column.df-self-end{    align-self:end; }

/* Une colonne qui traverse toute la grille — un visuel pleine
   largeur sous une rangee de cartes, un bouton centre en pied. */
#top .entry-content-wrapper .flex_column.df-span-all{
  grid-column:1 / -1;
}

#top .df .df-center{ text-align:center; }

/* Alignement vertical du contenu d une section en grille. Le socle
   pose align-items:start ; df-align-end fait reposer les colonnes
   sur la meme ligne de base basse — le rapport des bandeaux de
   tete, ou le titre s aligne sur le bas du visuel. */
#top .df-align-end .entry-content-wrapper{   align-items:end; }
#top .df-align-center .entry-content-wrapper{ align-items:center; }
#top .df .df-right{  text-align:right; }
#top .df .df-narrow{ max-width:840px; margin-left:auto; margin-right:auto; }


/* ============================================================
   Ruptures — 1050 px, celle des maquettes validées,
   puis 700 px pour le repli final.
   ============================================================ */

@media (max-width:1050px){

  #top .df-grid-4 .entry-content-wrapper,
  #top .df-cells-5 .entry-content-wrapper{ grid-template-columns:repeat(2,1fr); }

  #top .df-cells .entry-content-wrapper,
  #top .df-cells-4 .entry-content-wrapper{ grid-template-columns:repeat(2,1fr); }

  #top .df-grid-3 .entry-content-wrapper{ grid-template-columns:repeat(2,1fr); }

  #top .df-split .entry-content-wrapper,
  #top .df-split-even .entry-content-wrapper,
  #top .df-split-wide .entry-content-wrapper,
  #top .df-split-reverse .entry-content-wrapper{
    grid-template-columns:1fr;
    gap:28px;
  }

  /* En colonne unique, le sens inverse n a plus lieu d etre : sans
     cela le visuel resterait avant le texte sur mobile, alors que
     la maquette remet le texte en premier. */
  #top .df-split-reverse .entry-content-wrapper{ direction:ltr; }

  #top .df-sec{ padding:var(--df-sec-y-sm) 0; }
  #top .df-pad-top{    padding-top:var(--df-sec-y-sm); }
  #top .df-pad-bottom{ padding-bottom:var(--df-sec-y-sm); }

  /* En rangée, les filets verticaux redeviennent horizontaux */
  #top .df-cells-row .entry-content-wrapper{ border-left:1px solid var(--df-line); }
  #top .df-cells-row .entry-content-wrapper .flex_column{ border-bottom:1px solid var(--df-line); }
}

@media (max-width:700px){

  #top .df-grid-2 .entry-content-wrapper,
  #top .df-grid-3 .entry-content-wrapper,
  #top .df-grid-4 .entry-content-wrapper,
  #top .df-cells .entry-content-wrapper,
  #top .df-cells-2 .entry-content-wrapper,
  #top .df-cells-4 .entry-content-wrapper,
  #top .df-cells-5 .entry-content-wrapper{
    grid-template-columns:1fr;
  }

  #top .df-cells-row .entry-content-wrapper .flex_column:last-child{
    border-right:1px solid var(--df-line);
  }

  #top .df-sec{ padding:52px 0; }
  #top .df-pad-top{    padding-top:52px; }
  #top .df-pad-bottom{ padding-bottom:52px; }
  #top .df .df-head{ margin-bottom:36px; }
}


/* ============================================================
   Vitrine — une grande carte flanquée de deux plus petites
   ------------------------------------------------------------
   Le bloc « écosystème » de l accueil. Enfold ne permet pas
   d imbriquer des colonnes : on passe donc par une grille de
   deux rangées, dont la première colonne occupe les deux.

   ALB : trois colonnes (les largeurs choisies n importent pas).
     Color Section : df df-sec df-showcase
     Colonne 1     : df-feature df-card df-card-night df-card-lg
     Colonnes 2, 3 : df-card df-card-lg
   ============================================================ */

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

/* C est la VEDETTE qui dicte la hauteur, et l espace excedentaire
   va dans la GOUTTIERE, pas dans les cartes.

   Les deux cartes de droite donnent la hauteur du bloc ; la
   vedette, etiree sur les deux rangees, la rejoint. Son image
   garde ses proportions naturelles et l espace libre reste sous
   elle, dans la carte.

   Ni object-fit ni hauteur imposee sur l image : c est ce qui la
   recadrait dans les versions precedentes. */
#top .df-showcase .entry-content-wrapper{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  grid-template-rows:auto auto;
  gap:var(--df-gap);
  align-items:stretch;
}


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

/* La vedette occupe les deux rangees et S ETIRE pour les remplir.
   Ce sont les cartes de droite qui donnent la hauteur ; la vedette
   la rejoint, avec l espace libre sous son image.
   align-self:stretch et non start : c est toute la difference
   entre une carte qui s aligne en bas et une qui s arrete a la
   hauteur de son contenu. */
#top .df-showcase .entry-content-wrapper .flex_column.df-feature{
  grid-row:1 / -1;
  align-self:stretch;
}

/* L image de la vedette s affiche entiere, a sa hauteur naturelle.
   Plus de flex:1 ni de object-fit:cover — c est ce recadrage qui
   mangeait le coin superieur gauche. */
#top .df-showcase .flex_column.df-feature .avia-image-container{
  margin-top:22px;
}
/* L image garde ses proportions naturelles. Ni hauteur imposee ni
   object-fit : c est ce qui la deformait ou la recadrait. */
#top .df-showcase .flex_column.df-feature img{
  width:100%;
  height:auto;
}

@media (max-width:1050px){
  #top .df-showcase .entry-content-wrapper{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    gap:28px;
  }

  #top .df-showcase .entry-content-wrapper .flex_column.df-feature{
    grid-row:auto;
  }
}


/* ============================================================
   Bandeau clients — trois niveaux empiles
   ------------------------------------------------------------
     1  le libelle
     2  la bande de logos, sur toute la largeur
     3  le lien

   Le montage precedent logeait libelle et lien dans une colonne a
   gauche : les logos n avaient plus que la moitie de la page et
   plafonnaient a 40px de haut. En leur donnant la ligne entiere,
   neuf logos tiennent a 88px.

   ALB : trois colonnes 1/1.
     Color Section  df df-sec-flush df-rule df-rule-bottom df-logos
     Colonne 1/1    df-logos-label   Text Block en df-eyebrow
     Colonne 1/1    df-logos-items   l element Galerie
     Colonne 1/1    df-logos-link    Text Block, lien en df-link-gold
   ============================================================ */

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

/* Bande pleine largeur : le .container d Enfold est plafonne a la
   largeur du site, on le libere pour cette section seulement. Trois
   id pour passer devant la regle du theme. */
#top .df-logos .container,
#top #wrap_all #main .df-logos .container{
  max-width:none;
  width:100%;
  padding-left:var(--df-logos-marge, 40px);
  padding-right:var(--df-logos-marge, 40px);
}
#top .df-logos .entry-content-wrapper{
  display:block;
  padding:44px 0;
}
#top .df-logos .entry-content-wrapper .flex_column{
  float:none;
  width:auto;
  min-width:0;
  margin:0;
}
/* Les trois niveaux se centrent et se touchent : l espacement
   vient du rythme general entre elements ALB, pas de marges
   propres au composant. */
#top .df-logos .entry-content-wrapper .flex_column{
  text-align:center;
}
/* Le libelle etait un sur-titre de 11 px, comme dans la maquette.
   Il porte en fait le nom de la section : il passe au calibre d un
   h3, en encre. La regle bat df-eyebrow si la classe est restee sur
   le Text Block — inutile de l enlever dans le builder. */
#top .df-logos .entry-content-wrapper .flex_column.df-logos-label{
  margin-bottom:0;
}
#top #wrap_all .df-logos .df-logos-label,
#top #wrap_all .df-logos .df-logos-label p{
  font-family:var(--df-font-ui);
  font-size:var(--df-h3);
  font-weight:400;
  letter-spacing:-.02em;
  text-transform:none;
  line-height:1.3;
  color:var(--df-ink);
  margin:0;
}
#top .df-logos .entry-content-wrapper .flex_column.df-logos-link{
  margin-top:0;
}

/* --df-logo-client-h : hauteur maximale des logos, seule valeur a
   regler. La largeur suit le ratio de chaque fichier.

   Une hauteur commune plutot qu une largeur commune : c est ce qui
   pose des logos de proportions differentes sur la meme ligne
   optique. Neuf fichiers en 495x400 font ~124px de large a 100px de
   haut, soit 1116px. Les gouttieres se logent dans les 52px qui
   restent sur 1168 : c est tres juste, un dixieme logo ou un
   fichier panoramique les fera repasser a la ligne. */
#top .df-logos{
  /* Largeur de reference d un logo. C est elle qui commande : les
     fichiers sont normalises sur un meme canevas, la hauteur suit
     donc toute seule et reste identique d un logo a l autre. */
  --df-logo-client-w:180px;
  --df-logos-gap:10px;
  --df-logos-marge:40px;
  --df-logos-rythme:48px;
  /* Garde-fou : un logo qui ne serait pas passe par le gabarit ne
     doit pas faire exploser la hauteur de la bande. */
  --df-logo-client-h:90px;
}


/* ------------------------------------------------------------
   La bande de logos
   ------------------------------------------------------------
   Enfold rend sa galerie en flottants
   (.avia-gallery-thumb a{float:right}) avec des largeurs calculees
   sur le nombre de colonnes choisi. On la repasse en rangee
   souple : le reglage « colonnes » de la galerie devient sans effet.
   ------------------------------------------------------------ */

/* L air autour de la rangee. Pose ici et nulle part ailleurs : une
   marge basse sur le titre et une marge haute sur le lien auraient
   fusionne par collapse, et le reglage serait devenu illisible. */
#top .df-logos .avia-gallery{
  width:auto;
  margin:var(--df-logos-rythme, 48px) 0;
}
/* Une seule rangee, quelle que soit la largeur d ecran : les logos
   retrecissent au lieu de passer a la ligne. flex-shrink fait le
   travail, mais seulement si min-width tombe a zero — sans lui, la
   taille intrinseque de l image sert de plancher et la rangee
   deborde. */
#top .df-logos .avia-gallery .avia-gallery-thumb{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:var(--df-logos-gap, 10px);
}
#top #wrap_all .df-logos .avia-gallery .avia-gallery-thumb a{
  float:none;
  flex:0 1 var(--df-logo-client-w, 180px);
  width:auto;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
  border:0;
  background:none;
}
#top .df-logos .avia-gallery .avia-gallery-thumb img{
  height:auto;
  width:100%;
  max-height:var(--df-logo-client-h);
  max-width:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
}


/* ------------------------------------------------------------
   Les seuils de la bande lui sont propres
   ------------------------------------------------------------
   Neuf logos de 180 px avec 10 px de gouttiere et 40 px de marge
   demandent environ 1780 px. En dessous, ils retrecissent — c est
   voulu, mais seulement jusqu a un point. A 1280 px chacun serait
   tombe sous 130 px : la rangee unique cesse alors d avoir un
   sens et on repasse en grille souple, avec un calibre plus
   petit mais lisible.

   Ce seuil n est pas celui du reste du systeme (1050 px) : il
   depend du nombre de logos, pas du format d ecran.
   ------------------------------------------------------------ */

@media (max-width:1280px){
  #top .df-logos{
    --df-logo-client-w:150px;
    --df-logos-marge:28px;
    --df-logos-rythme:36px;
  }
  #top .df-logos .avia-gallery .avia-gallery-thumb{
    flex-wrap:wrap;
    gap:26px 30px;
  }
  #top #wrap_all .df-logos .avia-gallery .avia-gallery-thumb a{
    flex:0 0 var(--df-logo-client-w, 150px);
  }
}

@media (max-width:700px){
  #top .df-logos{
    --df-logo-client-w:120px;
    --df-logos-marge:20px;
    --df-logos-rythme:28px;
  }
  #top .df-logos .avia-gallery .avia-gallery-thumb{ gap:20px 22px; }
}

/* Un element Image plutot que la Galerie */
#top .df-logos .avia-image-container{ margin:0; }
#top .df-logos .avia-image-container img{
  height:auto;
  width:auto;
  max-height:var(--df-logo-client-h);
  max-width:100%;
}

/* Vignette de previsualisation et grande image : sans objet ici */
#top .df-logos .big-prev-fake,
#top .df-logos .avia-gallery-big-wrapper{ display:none; }

/* Des noms en toutes lettres plutot que des logos */
#top .df-logos p{
  margin:0;
  font-size:14.5px;
  color:var(--df-ink-2);
}

@media (max-width:1050px){
  #top .df-logos .avia-gallery .avia-gallery-thumb{
    justify-content:center;
    gap:16px 24px;
  }
  #top .df-logos{ --df-logo-client-h:64px; }
}


/* ------------------------------------------------------------
   Respiration ponctuelle
   ------------------------------------------------------------
   Le rythme normal entre deux elements empiles est de 22px. Pour
   detacher franchement un visuel ou une rangee, df-mt-lg passe a
   40px. Un seul cran volontairement : au-dela, c est une section.
   ------------------------------------------------------------ */

#top .df .flex_column > .df-mt-lg,
#top .df .entry-content-wrapper .flex_column.df-mt-lg{ margin-top:40px; }


/* ------------------------------------------------------------
   df-steps — un mode d emploi numerote
   ------------------------------------------------------------
   Le motif « Automatisation et alertes » : une liste ordonnee dont
   chaque rang porte son numero en or, sur deux chiffres.

     Text Block  df-steps
     contenu     <ol><li>...</li></ol>

   Le numero vient d un compteur CSS : reordonner les items dans
   l editeur suffit, il n y a rien a renumeroter a la main.
   ------------------------------------------------------------ */

#top .df .df-steps ol{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:df-step;
}
#top .df .df-steps li{
  counter-increment:df-step;
  display:grid;
  grid-template-columns:28px 1fr;
  gap:16px;
  margin:0;
  padding:16px 0;
  border-top:1px solid var(--df-line);
  font-size:var(--df-body);
  line-height:1.55;
  color:var(--df-ink);
  list-style:none;
}
#top .df .df-steps li::before{
  content:counter(df-step, decimal-leading-zero);
  font-family:var(--df-font-ui);
  font-size:var(--df-eyebrow);
  letter-spacing:.1em;
  color:var(--df-gold-ink);
  line-height:1.9;
}


/* ------------------------------------------------------------
   df-deflist — terme a gauche, definition a droite
   ------------------------------------------------------------
   Le motif .ulist : des rangees a filets ou le terme occupe une
   colonne fixe. Ecrit avec une liste a puces ordinaire, le terme
   en gras — l editeur d Enfold ne produit pas de <dl>.

     Text Block  df-deflist
     contenu     <ul><li><b>Terme</b> Definition.</li></ul>
   ------------------------------------------------------------ */

#top .df .df-deflist ul{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--df-line);
}
#top .df .df-deflist li{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:30px;
  margin:0;
  padding:20px 0;
  border-bottom:1px solid var(--df-line);
  font-size:14.5px;
  line-height:1.55;
  color:var(--df-ink-2);
  list-style:none;
}
#top .df .df-deflist li b,
#top .df .df-deflist li strong{
  font-weight:400;
  font-size:15px;
  color:var(--df-ink);
}

@media (max-width:800px){
  #top .df .df-deflist li{ grid-template-columns:1fr; gap:6px; }
}


/* ------------------------------------------------------------
   df-rows — des rangees a filets, rang a gauche
   ------------------------------------------------------------
   Le motif .creed : une suite de rangees separees par un filet,
   ou un rang court (un numero, une annee) occupe une colonne
   etroite a gauche du titre et du texte.

     Color Section  df df-sec df-rows
     Colonne 1/1    Text Block  <p>01</p>
                    Text Block  titre et texte
     Colonne 1/1    ... rangee suivante

   Chaque COLONNE est une rangee ; les deux Text Blocks qu elle
   contient se rangent d eux-memes cote a cote. Pas de wrapper
   supplementaire a poser dans l editeur.
   ------------------------------------------------------------ */

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

#top .df-rows .entry-content-wrapper{
  display:block;
  border-top:1px solid var(--df-line);
}
#top .df-rows .entry-content-wrapper > .flex_column{
  float:none;
  width:auto;
  min-width:0;
  margin:0;
  display:grid;
  grid-template-columns:var(--df-rows-rang, 64px) 1fr;
  gap:34px;
  padding:30px 0;
  border-bottom:1px solid var(--df-line);
  transition:background var(--df-t);
}
#top .df-rows .entry-content-wrapper > .flex_column:hover{ background:var(--df-alt); }

/* Les deux blocs sont cote a cote : le rythme vertical de 22px
   n a plus lieu d etre entre eux. */
#top .df-rows .entry-content-wrapper > .flex_column > *:not(style) ~ *:not(style){
  margin-top:0;
}
#top .df-rows h3{ margin-bottom:10px; }

@media (max-width:800px){
  #top .df-rows .entry-content-wrapper > .flex_column{
    grid-template-columns:1fr;
    gap:10px;
  }
}