/* ─────────────────────────────────────────────────────────────────────────────
   PAGES LÉGALES — CGU, confidentialité, cookies — ET LE BANDEAU DE TITRE PARTAGÉ.

   Deux préoccupations dans un même fichier, distinguées par leur classe :
   `.faf-titre` habille le bandeau de titre du gabarit Theme Builder — un gris froid
   #EBE5E2 qui n'est nulle part dans la charte — et sert à toute page qui l'utilise,
   légale ou non (les cahiers de tests, par exemple). `.faf-legal` habille le CORPS
   des pages légales, qui n'intéresse qu'elles.

   Ces trois pages n'ont jamais été refaites : elles sortent du gabarit Elementor
   par le widget « contenu de l'article », en h2/h3/p/ul bruts, avec la typographie
   par défaut du kit. À côté du reste du site v3 elles ont l'air d'un autre site —
   et ce sont justement les pages qu'on lit quand on se demande à qui on a affaire.

   AUCUN CONTENU N'EST TOUCHÉ. Pas de reconstruction Elementor, pas de réécriture :
   le texte reste éditable là où Marie a l'habitude de le trouver, et cette feuille
   ne fait que l'habiller. C'est aussi ce qui la rend réversible d'une ligne.

   SPÉCIFICITÉ — la raison de ces sélecteurs à rallonge. Elementor imprime pour ce
   widget un CSS personnalisé en `.elementor-62 .elementor-element.elementor-xxx h2`,
   soit (0,3,1). Un sélecteur plus court perdrait sur les marges sans qu'on
   comprenne pourquoi. `body.faf-legal … .elementor-widget-container h2` monte à
   (0,3,2) et passe devant, sans un seul `!important`.

   Les jetons viennent de faf-tokens.css, chargé en dépendance.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Le titre ──────────────────────────────────────────────────────────────── */

/* La section du titre porte un gris froid (#EBE5E2) posé dans le gabarit Elementor,
   partagé par d'autres pages : on ne le change pas là-bas, on le remplace ICI, pour
   ces trois pages seulement. Le dégradé est celui des hero d'article — la page
   s'ouvre comme les autres du site, au lieu de démarrer sur un gris de bureau.

   `:has()` sert à désigner la section par ce qu'elle CONTIENT : son identifiant
   Elementor changerait au premier remaniement du gabarit, pas le fait qu'elle porte
   le titre. Et il apporte la spécificité qui manquait — la règle d'Elementor est en
   (0,3,0), celle-ci monte à (0,3,1). */
body.faf-titre .elementor-section:has(.elementor-widget-theme-post-title) {
  background: radial-gradient(120% 100% at 82% 0%, var(--nude), var(--sand) 60%, var(--paper));
}

body.faf-titre .elementor-widget-theme-post-title {
  text-align: center;
  padding: 18px 0 6px;
}

/* Un cran de plus que le sélecteur qu'on croirait suffisant : Elementor écrit
   `.elementor-62 .elementor-element.elementor-element-xxx .elementor-heading-title`,
   soit (0,4,0). Sans `.elementor-widget-container` au milieu, ce titre restait à 65px
   dans le sable du kit — vérifié en ligne avant correction. */
body.faf-titre .elementor-widget-theme-post-title .elementor-widget-container .elementor-heading-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.1;
  color: var(--clay-deep);
  margin: 0;
}

/* Le séparateur du gabarit devient un filet court et centré, à la terre.

   Par la VARIABLE et non par `border-top-color` : Elementor dessine ce trait avec
   `border-block-start: var(--divider-border-width) … var(--divider-color)`, une
   propriété logique qui, à spécificité égale, passe après la propriété physique.
   Le trait restait noir — constaté en ligne avant correction.

   Et sur le WIDGET avec sa double classe : Elementor pose `--divider-color:#000`
   en `.elementor-330 .elementor-element.elementor-element-xxx`, soit (0,3,0). Une
   classe de plus ici, sinon la variable reste noire elle aussi. */
body.faf-titre .elementor-widget.elementor-widget-divider {
  --divider-color: var(--nude-deep);
}

body.faf-titre .elementor-widget-divider .elementor-divider-separator {
  max-width: 90px;
  margin: 0 auto;
}

/* ── Le corps ──────────────────────────────────────────────────────────────── */

/* Le papier, pas le blanc. Le reste du site v3 pose son texte long sur crème — les
   articles du carnet, les pages de service — et le blanc pur d'ici créait un ressaut
   net juste sous le dégradé du titre. Même désignation par le contenu que plus haut,
   pour la même raison. */
body.faf-legal .elementor-section:has(.elementor-widget-theme-post-content) {
  background: var(--paper);
}

/* La section du séparateur est transparente : sans elle, une bande blanche du corps de
   page s'intercale entre le dégradé du titre et le contenu. Elle relève du bandeau de
   titre — d'où `.faf-titre`, qui la couvre aussi sur les cahiers de tests. */
body.faf-titre .elementor-section:has(.elementor-widget-divider) {
  background: var(--paper);
}


body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--text);
}

body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container > :first-child {
  margin-top: 0;
}

body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container p {
  margin: 0 0 20px;
}

/* Le premier paragraphe porte la couleur pleine : il sert de chapeau, même quand
   la page n'en a pas prévu un. */
body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container > p:first-of-type {
  color: var(--ink);
}

body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(25px, 2.8vw, 31px);
  line-height: 1.2;
  color: var(--clay-deep);
  margin: 52px 0 16px;
  padding-top: 18px;
  position: relative;
  scroll-margin-top: 110px;
}

/* Un filet court au-dessus du titre plutôt qu'un trait pleine largeur : il sépare
   sans couper, et se lit comme un signe, pas comme une frontière. */
body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 2px;
  background: var(--sienna);
  border-radius: 2px;
}

body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
  margin: 32px 0 8px;
}

body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container h4,
body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container h5 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sienna);
  margin: 26px 0 8px;
}

body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container strong {
  color: var(--ink);
  font-weight: 600;
}

body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container a {
  color: var(--teal-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container a:hover {
  color: var(--clay-deep);
}

/* ── Les listes ────────────────────────────────────────────────────────────── */

body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container ul {
  list-style: none;
  padding: 0;
  margin: 22px 0;
}

body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
}

/* La même goutte que dans les articles : une feuille penchée, pas une puce. */
body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 11px;
  height: 11px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
  background: rgba(88, 172, 159, .12);
  border: 1.5px solid var(--teal);
}

body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container ol {
  margin: 22px 0;
  padding-left: 22px;
}

body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container ol li {
  margin-bottom: 12px;
  padding-left: 6px;
}

body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container ol li::marker {
  color: var(--clay);
  font-family: var(--display);
  font-weight: 600;
}

/* ── Citations et tableaux ─────────────────────────────────────────────────── */

body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container blockquote {
  margin: 30px 0;
  padding: 4px 0 4px 26px;
  border-left: 2px solid var(--sienna);
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5;
  color: var(--clay-deep);
}

/* Complianz peut poser un tableau de cookies dans ces pages. Il n'y en a pas
   aujourd'hui ; ces règles sont là pour que le jour où on l'active, la page ne
   s'ouvre pas sur un tableau de navigateur nu. `display:block` porte le
   défilement horizontal : sans conteneur à ajouter — on ne touche pas au
   contenu — c'est le seul moyen d'éviter que la page entière parte en largeur. */
body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14.5px;
  background: var(--cream);
  border: 1px solid var(--nude-deep);
  border-radius: 14px;
}

body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container th,
body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container th {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--clay-deep);
  background: var(--sand);
}

body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container tr:last-child td {
  border-bottom: 0;
}

/* Le kit Elementor raye les tableaux d'un gris froid, qui tire au bleu sur du crème.
   Une rayure chaude à la place — assez pour suivre une ligne des yeux, pas assez pour
   qu'on la remarque. */
body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container tbody tr {
  background: transparent;
}

body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container tbody tr:nth-child(even) {
  background: rgba(237, 224, 206, .38);
}

/* ── Le panneau de consentement de Complianz ───────────────────────────────────

   Le raccourci `[cmplz-manage-consent]` pose sur la page un panneau où le choix se
   reprend catégorie par catégorie — bien mieux qu'un lien qui rouvre le bandeau. Mais
   il arrive avec le gris de l'extension. On l'habille : c'est le seul endroit du site
   où quelqu'un revient exprès pour changer d'avis, il ne doit pas avoir l'air d'un
   corps étranger. */

body.faf-legal #cmplz-manage-consent-container {
  margin: 24px 0;
  background: #fff;
  border: 1px solid var(--nude-deep);
  border-radius: 14px;
  overflow: hidden;
}

body.faf-legal #cmplz-manage-consent-container .cmplz-category {
  background: transparent;
  border-bottom: 1px solid var(--line);
  padding: 4px 14px;
}

body.faf-legal #cmplz-manage-consent-container .cmplz-category:last-child {
  border-bottom: 0;
}

body.faf-legal #cmplz-manage-consent-container .cmplz-category-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

body.faf-legal #cmplz-manage-consent-container .cmplz-always-active {
  color: var(--teal-dark);
  font-weight: 600;
}

body.faf-legal #cmplz-manage-consent-container .cmplz-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ── Téléphone ─────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container {
    font-size: 16px;
    line-height: 1.75;
    /* La colonne d'Elementor ne pose que 10px de remplissage : le texte touchait
       presque le bord de l'écran. La marge est prise ici plutôt que sur la colonne,
       pour ne rien changer aux autres pages qui partagent le gabarit. */
    padding: 0 18px;
  }

  body.faf-legal .elementor-widget-theme-post-content .elementor-widget-container h2 {
    margin-top: 40px;
  }

  /* 80px en haut ET en bas du titre, plus la section du séparateur : près de
     300 px de vide avant la première phrase, sur un écran qui en fait 844. */
  body.faf-titre .elementor-section:has(.elementor-widget-theme-post-title) {
    padding-top: 44px;
    padding-bottom: 24px;
  }

  body.faf-legal .elementor-section:has(.elementor-widget-theme-post-content) {
    padding-bottom: 56px;
  }
}

/* ── La section qui accueille un cahier de test ────────────────────────────────
   Le test est rendu par un shortcode dans une section Elementor restée blanche : le
   bandeau de titre passait au sable, puis la page redevenait blanche sous la carte.
   Ce ressaut est ce qui datait le plus l'écran. */

body.faf-titre .elementor-section:has(.elementor-widget-shortcode) {
  background: var(--paper);
}

/* ── LES CAHIERS DE TESTS ──────────────────────────────────────────────────────

   PAS DE BANDEAU DE TITRE. Le gabarit Theme Builder est partagé : la même section
   `theme-post-title` sert les pages légales, où elle est le seul titre, et les
   cahiers, où le hero du test porte déjà le sien. On ne la supprime donc pas — on
   la retire ICI seulement. Le `<h1>` reste unique sur la page : celui du hero.

   ET PAS DE BOÎTE. Le gabarit enferme le contenu dans un conteneur de 1140px avec
   un rembourrage de colonne ; le test s'y retrouvait plus étroit et plus marginé
   que les pages du site, dont les sections vont d'un bord à l'autre. On rend la
   largeur à la section qui porte le cahier.
   ──────────────────────────────────────────────────────────────────────────── */

body.faf-cahier .elementor-section:has(.elementor-widget-theme-post-title),
/* Le séparateur du gabarit soulignait un titre qui n'existe plus sur un cahier : il ne
   restait qu'une bande transparente de 69px — donc blanche — collée sous l'en-tête. */
body.faf-cahier .elementor-section:has(.elementor-widget-divider) {
  display: none;
}

body.faf-cahier .elementor-section:has(.elementor-widget-shortcode) {
  background: var(--paper);
}

body.faf-cahier .elementor-section:has(.elementor-widget-shortcode) {
  /* Le gabarit pose un rembourrage latéral : le cahier s'en trouvait plus étroit que
     les sections des pages du site, qui vont d'un bord à l'autre. */
  padding-left: 0;
  padding-right: 0;
}

body.faf-cahier .elementor-section:has(.elementor-widget-shortcode) > .elementor-container {
  max-width: 100%;
}

body.faf-cahier .elementor-section:has(.elementor-widget-shortcode) .elementor-widget-wrap {
  padding: 0;
}