/* ============================================================
   DealFabric DS — Composant · Hero
   ------------------------------------------------------------
   Disposition de la maquette a jour, qui remplace celle du
   fichier valide :

     rangee 1   texte principal a gauche · accroche + CTA a droite
     rangee 2   le visuel, centre, pleine largeur
     rangee 3   mention + logos a gauche · points cles a droite

   ALB : Color Section + cinq colonnes.
     Color Section  df df-sec df-hero
     Colonne 1/2    df-hero-lead
     Colonne 1/2    df-hero-side
     Colonne 1/1    df-hero-visual
     Colonne 1/2    df-hero-foot
     Colonne 1/2    df-hero-keys
   ============================================================ */

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

#top .df-hero .entry-content-wrapper{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:start;
  column-gap:56px;
  row-gap:0;
}
#top .df-hero .entry-content-wrapper .flex_column{
  float:none;
  width:auto;
  min-width:0;
  margin:0;
}

/* ------------------------------------------------------------
   Echelle typographique du hero : deux pixels au-dessus du reste
   du site. Redefinie en local, le reste des pages n en herite pas.
   ------------------------------------------------------------ */
#top .df-hero{
  --df-h1:clamp(36px, 4.4vw, 58px);
  --df-body:17.5px;
  --df-body-lg:18.5px;
  --df-small:15.5px;
  --df-eyebrow:13px;
}


/* ------------------------------------------------------------
   Rangee 1 · le texte
   ------------------------------------------------------------ */

/* align-self:end sur les deux blocs de la rangee 1 : ils se calent
   sur leur bord BAS, quelle que soit la hauteur de chacun. La
   grille reste en align-items:start pour les rangees suivantes. */
#top .df-hero .flex_column.df-hero-lead{
  grid-column:1;
  grid-row:1;
  align-self:end;
}
/* Le bloc de droite se cale sur le BORD DROIT de la page, et non
   sur le bord gauche de sa colonne : margin-left:auto le pousse,
   la mesure le fait tomber sur quatre lignes comme la maquette. */
#top .df-hero .flex_column.df-hero-side{
  grid-column:2;
  grid-row:1;
  align-self:end;
  max-width:32ch;
  margin-left:auto;
}

#top .df-hero .df-hero-lead h1{ max-width:14ch; }
#top .df-hero .df-hero-lead p{ margin-top:18px; max-width:34ch; }
#top .df-hero .df-hero-side p{ max-width:none; }

/* Mise en valeur dans le texte — a mettre en gras dans l editeur.
   L or de la charte (#C8A45E) est INTERDIT en texte sur fond clair,
   son contraste tombe a 2,1:1. On sert l or lisible, #8A6C32, qui
   passe a 4,9:1 pour un rendu tres proche. */
#top #wrap_all .df-hero strong,
#top #wrap_all .df-hero b{
  color:var(--df-gold-ink);
  font-weight:400;
}

#top .df-hero .df-hero-side .avia-button-wrap,
#top .df-hero .df-hero-side .df-btn{ margin-top:26px; }


/* ------------------------------------------------------------
   Rangee 2 · le visuel
   ------------------------------------------------------------ */

/* Le visuel remonte de 40px pour venir sous le texte. Sa boite
   couvre alors toute la largeur, y compris le bouton — et meme
   transparente, elle en intercepte les clics.
   z-index:0 le place sous les colonnes de texte, qui passent a 1.
   Les elements de grille se superposent sans creer de contexte
   d empilement tant qu on ne leur donne pas de position. */
#top .df-hero .flex_column.df-hero-visual{
  grid-column:1 / -1;
  grid-row:2;
  margin:-40px 0 0;
  position:relative;
  z-index:0;
}
#top .df-hero .flex_column.df-hero-lead,
#top .df-hero .flex_column.df-hero-side{
  position:relative;
  z-index:1;
}
#top .df-hero .df-hero-visual .avia-image-container{
  margin:0;
  text-align:center;
}
#top .df-hero .df-hero-visual img{
  width:auto;
  max-width:min(560px, 80%);
  height:auto;
  margin:0 auto;
}


/* ------------------------------------------------------------
   Rangee 3 · mention, logos, points cles
   ------------------------------------------------------------ */

/* align-self:center : les deux blocs du bas se centrent l un par
   rapport a l autre. La mention et ses logos font deux lignes, les
   points cles une seule — sans cela ils se calent en haut et la
   ligne de coches flotte au-dessus du texte. */
#top .df-hero .flex_column.df-hero-foot{
  grid-column:1;
  grid-row:3;
  align-self:center;
}
#top .df-hero .flex_column.df-hero-keys{
  grid-column:2;
  grid-row:3;
  align-self:center;
}

/* Les logos partenaires : une rangee calee sur une hauteur
   commune, comme le bandeau clients. */
/* 14px sous la mention, et non les 22px du rythme general : la
   bande de logos forme un bloc avec le texte qui l introduit,
   elle n en est pas un element separe. */
#top .df .flex_column.df-hero-foot > *:not(style) ~ *:not(style){
  margin-top:14px;
}
#top .df-hero .df-hero-foot .avia-gallery{ margin:0; }
#top .df-hero .df-hero-foot .avia-gallery-thumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px 26px;
  margin-top:0;
}
#top #wrap_all .df-hero .df-hero-foot .avia-gallery-thumb a{
  float:none;
  width:auto;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  margin:0;
  padding:0;
  border:0;
}
/* padding:0 obligatoire : gallery.css sert
   « #top div .avia-gallery img{ padding:7px } ». Sur un logo de
   26px de haut, ces 7px de chaque cote reduisent la marque de
   moitie. Le bandeau clients le neutralisait deja, pas le hero. */
#top .df-hero .df-hero-foot .avia-gallery-thumb img{
  height:auto;
  width:auto;
  max-height:var(--df-hero-logo-h, 26px);
  max-width:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
}
#top .df-hero .df-hero-foot .big-prev-fake{ display:none; }

/* Points cles en rangee, coche or.
   df-checks empile ; ici la ligne est horizontale et alignee a
   droite, sous le CTA. */
/* nowrap : les trois points cles tiennent sur une ligne. Chaque
   libelle reste insecable, sinon un retour se ferait a l interieur
   d un item plutot qu entre eux. */
#top .df-hero .df-hero-keys ul{
  display:flex;
  justify-content:flex-end;
  flex-wrap:nowrap;
  gap:22px;
  margin:0;
  padding:0;
  list-style:none;
}
#top .df-hero .df-hero-keys li{
  position:relative;
  margin:0;
  padding-left:calc(var(--df-check-size, 22px) + 8px);
  font-family:var(--df-font-text);
  font-size:var(--df-small);
  line-height:1.5;
  color:var(--df-ink-2);
  white-space:nowrap;
}

/* Pastille : le SVG fourni, en masque plutot qu en image.
   Le masque ne retient que la FORME du fichier ; la couleur vient
   de background-color, donc du token --df-gold. Un
   background-image aurait fige le #C8A45E dans l URI, ou il
   faudrait le reecrire pour changer de teinte.

   Repli : sans support du masque, on retombe sur l image, ou la
   couleur du fichier s applique telle quelle.

   PIEGE : dans la version masque, le path doit porter un fill
   opaque. Le fill='none' de la balise <svg> est herite par ses
   enfants — sans fill sur le path, le trace ne rend rien, le
   masque est vide, et la pastille disparait entierement. */
#top .df-hero .df-hero-keys li::before{
  content:"";
  position:absolute;
  left:0;
  top:.1em;
  width:var(--df-check-size, 22px);
  height:var(--df-check-size, 22px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 21C13.1819 21 14.3522 20.7672 15.4442 20.3149C16.5361 19.8626 17.5282 19.1997 18.364 18.364C19.1997 17.5282 19.8626 16.5361 20.3149 15.4442C20.7672 14.3522 21 13.1819 21 12C21 10.8181 20.7672 9.64778 20.3149 8.55585C19.8626 7.46392 19.1997 6.47177 18.364 5.63604C17.5282 4.80031 16.5361 4.13738 15.4442 3.68508C14.3522 3.23279 13.1819 3 12 3C9.61305 3 7.32387 3.94821 5.63604 5.63604C3.94821 7.32387 3 9.61305 3 12C3 14.3869 3.94821 16.6761 5.63604 18.364C7.32387 20.0518 9.61305 21 12 21ZM11.768 15.64L16.768 9.64L15.232 8.36L10.932 13.519L8.707 11.293L7.293 12.707L10.293 15.707L11.067 16.481L11.768 15.64Z' fill='%23C8A45E'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

@supports (mask-image:none) or (-webkit-mask-image:none){
  #top .df-hero .df-hero-keys li::before{
    background-image:none;
    background-color:var(--df-gold);
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' clip-rule='evenodd' d='M12 21C13.1819 21 14.3522 20.7672 15.4442 20.3149C16.5361 19.8626 17.5282 19.1997 18.364 18.364C19.1997 17.5282 19.8626 16.5361 20.3149 15.4442C20.7672 14.3522 21 13.1819 21 12C21 10.8181 20.7672 9.64778 20.3149 8.55585C19.8626 7.46392 19.1997 6.47177 18.364 5.63604C17.5282 4.80031 16.5361 4.13738 15.4442 3.68508C14.3522 3.23279 13.1819 3 12 3C9.61305 3 7.32387 3.94821 5.63604 5.63604C3.94821 7.32387 3 9.61305 3 12C3 14.3869 3.94821 16.6761 5.63604 18.364C7.32387 20.0518 9.61305 21 12 21ZM11.768 15.64L16.768 9.64L15.232 8.36L10.932 13.519L8.707 11.293L7.293 12.707L10.293 15.707L11.067 16.481L11.768 15.64Z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' clip-rule='evenodd' d='M12 21C13.1819 21 14.3522 20.7672 15.4442 20.3149C16.5361 19.8626 17.5282 19.1997 18.364 18.364C19.1997 17.5282 19.8626 16.5361 20.3149 15.4442C20.7672 14.3522 21 13.1819 21 12C21 10.8181 20.7672 9.64778 20.3149 8.55585C19.8626 7.46392 19.1997 6.47177 18.364 5.63604C17.5282 4.80031 16.5361 4.13738 15.4442 3.68508C14.3522 3.23279 13.1819 3 12 3C9.61305 3 7.32387 3.94821 5.63604 5.63604C3.94821 7.32387 3 9.61305 3 12C3 14.3869 3.94821 16.6761 5.63604 18.364C7.32387 20.0518 9.61305 21 12 21ZM11.768 15.64L16.768 9.64L15.232 8.36L10.932 13.519L8.707 11.293L7.293 12.707L10.293 15.707L11.067 16.481L11.768 15.64Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:contain;
    mask-size:contain;
  }
}


/* ------------------------------------------------------------
   Ruptures
   ------------------------------------------------------------ */

@media (max-width:1050px){
  #top .df-hero .entry-content-wrapper{
    grid-template-columns:1fr;
    row-gap:28px;
  }
  /* Le visuel remonte en deuxieme position, juste apres le titre :
     sur mobile il porte le message plus vite qu un second bloc de
     texte. On reordonne par grid-row, sans toucher au DOM — donc
     sans deplacer les colonnes dans l ALB, et sans casser l ordre
     de lecture au clavier ni pour un lecteur d ecran. */
  #top .df-hero .flex_column.df-hero-lead,
  #top .df-hero .flex_column.df-hero-side,
  #top .df-hero .flex_column.df-hero-visual,
  #top .df-hero .flex_column.df-hero-foot,
  #top .df-hero .flex_column.df-hero-keys{
    grid-column:1;
    align-self:auto;
  }
  #top .df-hero .flex_column.df-hero-lead{   grid-row:1; }
  #top .df-hero .flex_column.df-hero-visual{ grid-row:2; }
  #top .df-hero .flex_column.df-hero-side{   grid-row:3; }
  #top .df-hero .flex_column.df-hero-foot{   grid-row:4; }
  #top .df-hero .flex_column.df-hero-keys{   grid-row:5; }
  #top .df-hero .flex_column.df-hero-side{
    max-width:none;
    margin-left:0;
  }
  #top .df-hero .df-hero-keys ul{ flex-wrap:wrap; }
  #top .df-hero .flex_column.df-hero-visual{ margin-top:0; }
  #top .df-hero .df-hero-visual img{ max-width:min(420px, 100%); }
  #top .df-hero .df-hero-keys ul{ justify-content:flex-start; }
  #top .df-hero .df-hero-lead h1{ max-width:none; }
}