/* =====================================================================
   DealFabric — Document annote
   =====================================================================
   Maquette : Refonte/Pages/A propos/Politique de confidentialité/
              politique-confidentialite-3-versions.html, version 3.

   Une colonne de marge etroite et collante porte le numero de section,
   son titre et un repere de lecture ; le corps du texte reste propre et
   se lit d une traite. Pour les textes longs et normatifs : politique
   de confidentialite, mentions legales, CGU.

     Color Section  df df-sec df-doc
     Colonne 1/1    df-doc-bl          une SECTION du document
       Text Block   df-doc-mar         la marge
       Text Block   df-doc-txt         le corps

   Chaque COLONNE est une section du document ; les deux Text Blocks
   qu elle contient se rangent d eux-memes cote a cote. Meme mecanique
   que df-rows — c est la seule qui evite les rangees en flottants,
   dont la hauteur inegale fait remonter la rangee suivante.
   ===================================================================== */

#top .df-doc{
  --df-doc-w:      980px;   /* mesure du document entier */
  --df-doc-mar-w:  150px;   /* largeur de la colonne de marge */
  --df-doc-gap:    44px;
  --df-doc-txt-w:  700px;   /* mesure de lecture du corps */
  --df-doc-y:      36px;    /* respiration d une section */
}

/* Les neutralisations habituelles avant de passer en grille : la table
   d egalisation, le calage de fin de rangee, et les deux clearfix. */
#top .df-doc .flex_column_table{ display:contents; }
#top .df-doc .av-flex-placeholder{ display:none; }
#top .df-doc .entry-content-wrapper::before,
#top .df-doc .entry-content-wrapper::after{ display:none; }

/* Celui de la COLONNE, et il n est pas optionnel : grid.css donne
   « content:'\0020' » a .flex_column::before ET ::after. Inoffensifs
   tant que la colonne est un bloc, ils deviennent de VRAIS items des
   qu elle passe en grille. Le ::before prenait alors la premiere
   cellule, la marge glissait dans la seconde et le corps du texte
   tombait a la ligne suivante, dans les 150px de la marge.
   Mesure a l appui : marge a x=427 sur 752px, texte a x=233 sur 150. */
#top .df .flex_column.df-doc-bl::before,
#top .df .flex_column.df-doc-bl::after{ display:none; }

#top .df-doc .entry-content-wrapper{
  display:block;
  max-width:var(--df-doc-w);
  margin-left:auto;
  margin-right:auto;
}

/* Une section du document. */
#top .df-doc .entry-content-wrapper > .flex_column.df-doc-bl{
  float:none;
  width:auto;
  min-width:0;
  margin:0;
  padding:var(--df-doc-y) 0;
  border-top:1px solid var(--df-line);

  display:grid;
  grid-template-columns:var(--df-doc-mar-w) 1fr;
  gap:var(--df-doc-gap);
  align-items:start;
}
#top .df-doc .entry-content-wrapper > .flex_column.df-doc-bl:first-child{
  border-top:0;
  padding-top:0;
}
/* Cote a cote, les deux blocs n ont plus a respecter le rythme
   vertical de 22px que le design system met entre freres. */
#top .df-doc .entry-content-wrapper > .flex_column.df-doc-bl > *:not(style) ~ *:not(style){
  margin-top:0;
}

/* La marge reste en vue pendant qu on lit la section.
   :first-of-type et non :first-child : Enfold intercale un <style>. */
#top .df-doc .entry-content-wrapper > .flex_column.df-doc-bl > .av_textblock_section:first-of-type{
  position:sticky;
  top:calc(var(--df-navh, 102px) + 8px);
}


/* ---------------------------------------------------------------
   La marge
   --------------------------------------------------------------- */
#top #wrap_all .df .df-doc-mar h2{
  font-family:var(--df-font-ui);
  font-size:19px;
  font-weight:400;
  line-height:1.25;
  letter-spacing:var(--df-ls-title);
  color:var(--df-ink);
  margin:0;
}
#top .df .df-doc-mar p{
  margin:10px 0 0;
  font-family:var(--df-font-ui);
  font-size:12.5px;
  line-height:1.5;
  color:var(--df-grey);
}
/* Le numero de section. df-eyebrow-gold existe deja et dit la meme
   chose : on ne redefinit que l ecart, la maquette le serrant. */
#top .df .df-doc-mar .df-eyebrow{ margin-bottom:8px; }


/* ---------------------------------------------------------------
   Le corps
   --------------------------------------------------------------- */
#top .df-doc-txt{ max-width:var(--df-doc-txt-w); }

#top #wrap_all .df .df-doc-txt h3{
  margin:26px 0 12px;
  font-family:var(--df-font-ui);
  font-size:17px;
  font-weight:400;
  line-height:1.3;
  letter-spacing:var(--df-ls-title);
  color:var(--df-ink);
}
#top #wrap_all .df .df-doc-txt h3:first-child{ margin-top:0; }
#top #wrap_all .df .df-doc-txt h3 em{
  font-style:normal;
  font-size:13.5px;
  color:var(--df-gold-ink);
  margin-right:9px;
}

/* Les definitions. Un terme, sa definition — le motif revient dans
   tous les textes normatifs. */
#top .df .df-doc-txt dl{ margin:0; }
#top .df .df-doc-txt dt{
  margin-top:18px;
  font-family:var(--df-font-ui);
  font-size:15.5px;
  font-weight:500;
  color:var(--df-ink);
}
#top .df .df-doc-txt dd{
  margin:6px 0 0;
  font-family:var(--df-font-text);
  font-size:15.5px;
  line-height:1.68;
  color:var(--df-ink-2);
}

/* Liste reglee. Variante numerotee : le compteur CSS, pour que la
   numerotation suive les ajouts et les retraits sans ressaisie. */
/* ul.df-doc-pts et non .df-doc-pts seul : 01-enfold-reset pose
   « #top .df .avia_textblock ul{margin:0 0 1.1em 1.2em} », qui vaut
   une specificite de plus par son selecteur de type. Sans le ul, la
   liste gardait le retrait de 1.2em du texte courant. */
#top .df .avia_textblock ul.df-doc-pts{
  list-style:none;
  margin:12px 0 0;
  padding:0;
}
#top .df .avia_textblock ul.df-doc-pts li{
  display:grid;
  grid-template-columns:1fr;
  margin:0;
  padding:11px 0;
  border-top:1px solid var(--df-line);
  font-family:var(--df-font-text);
  font-size:15.5px;
  line-height:1.6;
  color:var(--df-ink-2);
}
#top .df .avia_textblock ul.df-doc-pts-num{ counter-reset:df-doc-p; }
#top .df .avia_textblock ul.df-doc-pts-num li{
  grid-template-columns:34px 1fr;
  gap:10px;
}
#top .df .avia_textblock ul.df-doc-pts-num li::before{
  counter-increment:df-doc-p;
  content:counter(df-doc-p, decimal-leading-zero);
  margin-top:4px;
  font-family:var(--df-font-ui);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--df-grey);
}

/* L encadre d adresse, et le bloc de contact de fin. */
#top .df .df-doc-addr{
  margin:12px 0;
  padding:18px 22px;
  background:var(--df-alt);
  border-radius:var(--df-r-md);
  font-family:var(--df-font-text);
  font-size:15.5px;
  color:var(--df-ink);
}

#top .df .df-doc-end{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
  align-items:center;
  margin-top:20px;
  padding:40px 44px;
  background:var(--df-alt);
  border-radius:var(--df-r-lg);
}
#top .df .df-doc-end p{
  margin:0;
  font-size:16px;
  color:var(--df-ink);
}
#top .df .df-doc-end a{
  display:block;
  margin-top:8px;
  font-size:18px;
  color:var(--df-link);
}


@media (max-width:1000px){
  #top .df-doc .entry-content-wrapper > .flex_column.df-doc-bl{
    grid-template-columns:1fr;
    gap:16px;
  }
  #top .df-doc .entry-content-wrapper > .flex_column.df-doc-bl > .av_textblock_section:first-of-type{
    position:static;
  }
  #top .df .df-doc-end{
    grid-template-columns:1fr;
    padding:28px 24px;
  }
}