/* ══════════════════════════════════════════════════════════════════════
   Alignements et justification, relevés à l'œil par Quentin le
   18/08/2026 et mesurés un par un avant correction
   (`131-diag-alignements.mjs`).

   Cinquième feuille, chargée après « elements-cliente.css », pour la
   même raison que les précédentes : elle se retire d'un bloc.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Icône et texte des lignes de coordonnées ───────────────────────
   Mesuré : l'icône était 7,2 px trop haute, dans l'encadré « votre
   référente handicap » comme sur la page Contact. Le conteneur est bien
   en « display:flex; align-items:center », mais un <svg> ne se centre
   pas comme un élément ordinaire : il faut le lui dire explicitement.
   Le padding-bas du paragraphe agrandissait en plus la ligne, ce qui
   décalait les deux enfants dans des directions opposées. */
.rv-coord{ align-items:center; }
.rv-coord > *{ align-self:center; }
/* 🔴 La cause, trouvée en lisant le style calculé et non en devinant :
   l'icône porte une MARGE BASSE de 14,4 px, héritée du réglage général
   des icônes. « align-items:center » centre la boîte MARGES COMPRISES :
   18,4 + 14,4 = 32,8, soit exactement la hauteur de la ligne. L'icône
   remplissait donc sa case et se retrouvait calée en haut, alors que
   tout, dans le style calculé, annonçait un centrage correct. */
.rv-coord .rv-icone-inline,
.rv-coord .rv-icone{
  align-self:center;
  flex:0 0 auto;
  margin:0 !important;
}

/* ── 2. Libellés des indicateurs chiffrés ──────────────────────────────
   Mesuré : « .rv-compteur » était bien en text-align:center, mais le
   libellé retombait à gauche, capté par la règle de justification du
   17/08. Un seul mot de plus et le déséquilibre se voit. */
.rv-compteur .rv-libelle,
.rv-compteur .rv-chiffre{
  text-align:center !important;
  text-align-last:center !important;
  hyphens:none;
}

/* ── 3. La note sous les indicateurs ───────────────────────────────────
   Mesuré : margin-top = 0. Elle touchait le bas des cartes, si bien
   qu'on la lisait comme le contenu de la dernière. Elle est desserrée,
   ramenée à la largeur de la rangée, et centrée sur ses deux lignes. */
.rv-compteurs + p,
.rv-compteurs + .rv-legende{
  margin-top:1.6rem !important;
  max-width:56rem;
  margin-left:auto;
  margin-right:auto;
  text-align:center !important;
  text-align-last:center !important;
  line-height:1.6;
  hyphens:none;
}

/* ── 4. Justification du texte courant ─────────────────────────────────
   Demandé pour tout le site. Restent exclus : les titres, les libellés,
   les cellules de tableau, les légendes centrées et tout ce qui est
   déjà centré — justifier trois mots crée une ligne trouée.
   La césure est activée en même temps : sans elle, une colonne étroite
   se creuse de rivières blanches. */
/* ⚠️ Le « !important » est nécessaire : `style.css` interdisait
   explicitement la justification dans les cartes et les étapes
   (« sur une colonne de trois mots, elle fabrique des rivières
   blanches »). La remarque reste vraie, d'où la césure automatique
   activée en même temps, qui est ce qui manquait à l'époque. */
.rv-etapes li > p,
.rv-etapes p,
.rv-c p,
.rv-carte p,
.rv-cas p,
.rv-doc-desc,
.rv-carte-article-extrait,
.rv-encadre p,
.rv-temoignage-texte p,
.rv-cpf-texte p{
  /* 25/08/2026 : plus aucune justification sur le site. La cliente la
     trouve moins lisible que le drapeau à gauche, et c'est aussi ce que
     recommandent les référentiels d'accessibilité (RGAA 10.3, WCAG 1.4.8)
     pour les personnes dyslexiques : les rivières blanches d'un texte
     justifié cassent le suivi de la ligne. La césure part avec elle, elle
     n'avait de sens que pour rattraper la justification. */
  text-align:left !important;
  hyphens:manual !important;
  -webkit-hyphens:manual !important;
}
/* Sous 480 px, la justification perd toujours : trop peu de mots par
   ligne. Règle déjà posée le 17/08, redite ici pour les sélecteurs
   ci-dessus. */
@media (max-width:480px){
  .rv-etapes li > p,
  .rv-etapes p,
  .rv-c p,
  .rv-carte p,
  .rv-cas p,
  .rv-doc-desc,
  .rv-carte-article-extrait,
  .rv-encadre p,
  .rv-temoignage-texte p,
  .rv-cpf-texte p{ text-align:left !important; }
}

/* ── 5. Réalisations : une seule colonne, centrée ──────────────────────
   Mesuré : l'en-tête et le récit occupaient les 1 152 px de la colonne,
   mais le témoignage était bridé à 52 rem ET calé à gauche. Trois
   largeurs différentes empilées, toutes alignées à gauche. Le bloc
   entier passe à 52 rem et se centre : l'en-tête, le récit, la citation
   et le marqueur partagent enfin le même axe. */
.rv-cas{
  max-width:52rem;
  margin-left:auto;
  margin-right:auto;
}
.rv-cas > p,
.rv-temoignage-large{
  max-width:none;
  margin-left:0;
  margin-right:0;
}

/* ── 6. Cartes d'articles : la date toujours en bas ────────────────────
   Les trois cartes ont la même hauteur, mais le pied remontait dès
   qu'un titre tenait sur une ligne de moins. Il est poussé en bas. */
.rv-carte-article-corps{
  display:flex;
  flex-direction:column;
  min-height:0;
}
.rv-carte-article-corps > .rv-legende{
  margin-top:auto;
  padding-top:1rem;
}

/* ── 7. Cases à cocher des formulaires ─────────────────────────────────
   Mesuré : la case et son libellé étaient décalés, la case portant sa
   propre marge et le libellé une autre. Les deux sont remis sur le même
   axe, et la case garde sa taille quoi qu'il arrive. */
.forminator-ui .forminator-checkbox,
.forminator-checkbox{
  display:flex !important;
  align-items:center !important;
}
.forminator-ui .forminator-checkbox-box,
.forminator-checkbox-box{
  align-self:center !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  flex:0 0 auto;
}
.forminator-ui .forminator-checkbox-label,
.forminator-checkbox-label{
  align-self:center !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  line-height:1.45;
}

/* ── 8. Le chevron des entrées de menu à sous-menu ─────────────────────
   Mesuré : le lien a une ligne de 14 px calée en haut de sa boîte, le
   chevron de Divi est en position absolue à « top: 6px » avec une ligne
   de 16 px, soit un centre 7 px plus bas que celui du texte. Divi
   n'expose aucun réglage : il faut le repositionner. */
#top-menu li.menu-item-has-children > a::after,
.et-menu li.menu-item-has-children > a::after{
  top:0 !important;
  height:14px;
  line-height:14px !important;
  display:flex;
  align-items:center;
}

/* ── 9. Le bandeau d'appel grisé, et son bouton mort ───────────────────
   🔴 Signalé « le bas de page est tout grisé et on peut rien faire ».
   Mesuré avec `elementFromPoint` au centre du bouton : c'est la SECTION
   qui répond, pas le lien. Le voile décoratif « .rv-appel::before »
   (position absolue, inset 0, dégradé opaque à 94 %) est peint AU-DESSUS
   du contenu et avale les clics.

   Pourquoi seulement là : la règle de remontée existait, mais elle ne
   vise que « .rv-appel > .et_pb_row ». Dans les gabarits du Theme
   Builder, le contenu est enveloppé dans « .rv-largeur » : le sélecteur
   ne mordait pas, le contenu restait sous le voile.

   Deux ceintures plutôt qu'une :
     · un décor ne prend JAMAIS le clic ;
     · le contenu remonte quel que soit son enveloppe. */
.rv-appel::before,
.rv-hero-photo::before,
.rv-hero-photo::after,
.rv-bandeau-chiffres::before{
  pointer-events:none !important;
}
.rv-appel > .et_pb_row,
.rv-appel > .rv-largeur,
.rv-appel > div,
.rv-bandeau-chiffres > .et_pb_row,
.rv-bandeau-chiffres > .rv-largeur,
.rv-bandeau-chiffres > div{
  position:relative;
  z-index:1;
}

/* ── 10. Pied de page : pas de justification en colonne étroite ────────
   Les colonnes du pied font 240 px. Justifié, « Référente : Rodrine
   Joseph, » s'étale sur toute la largeur avec des blancs de trois
   caractères entre les mots. Le texte y revient à gauche, et les listes
   de liens s'alignent avec lui. */
#footer-widgets .footer-widget p,
#footer-widgets .footer-widget li,
#footer-widgets .footer-widget div,
.et-l--footer p,
.et-l--footer li{
  text-align:left !important;
  text-align-last:left !important;
  hyphens:manual;
}
/* Les icônes du pied suivent la même règle que celles des coordonnées. */
.et-l--footer .rv-coord,
#footer-widgets .rv-coord{ align-items:center; }
.et-l--footer .rv-coord .rv-icone,
#footer-widgets .rv-coord .rv-icone{ align-self:center; margin:0 !important; }

/* ── 11. Une exception à la justification : les colonnes étroites ──────
   La colonne latérale de la page Contact fait 18 rem. « Sous 48 heures
   ouvrées, par le moyen que vous préférez » y tient sur deux lignes :
   justifiée, la première s'étire avec des blancs de trois caractères.
   Une justification demande environ quarante signes par ligne pour ne
   pas se creuser ; en dessous, elle dessert le texte qu'elle range. */
.rv-contact-infos p,
.rv-contact-infos li{
  text-align:left !important;
  text-align-last:left !important;
}

/* ── 12. Titres de cartes : le texte qui suit part à la même hauteur ───
   Mesuré sur la page Bilan : dans une rangée de quatre cartes, deux
   titres tiennent sur une ligne (35 px) et deux sur deux lignes (60 px).
   Les icônes sont bien alignées, les titres commencent bien au même
   endroit, mais le paragraphe qui suit décroche d'une ligne entière.
   Une rangée flex ne sait pas synchroniser ses lignes internes : on
   réserve donc deux lignes au titre, dans SON propre interlignage.
   L'unité « lh » vaut exactement une ligne de l'élément, ce qui évite
   d'écrire une valeur en pixels qui se périmerait au premier changement
   de police. */
.rv-c h2,
.rv-c h3,
.rv-carte h2,
.rv-carte h3{
  min-height:2lh;
}
/* Au téléphone les cartes s'empilent : réserver deux lignes n'aligne
   plus rien et creuse un blanc sous les titres courts. */
@media (max-width:600px){
  .rv-c h2, .rv-c h3, .rv-carte h2, .rv-carte h3{ min-height:0; }
}

/* ── 13. Case à cocher : alignement optique, pas géométrique ───────────
   Mesuré au pixel sur une capture en densité triple : la case et la
   boîte de ligne du texte ont exactement le même centre, mais l'ENCRE
   du texte est 0,83 px plus bas que celle de la case. L'oeil compare
   deux taches d'encre, pas deux boîtes.

   ⚠️ Une marge ne corrige rien ici : elle agrandit la ligne, donc les
   deux enfants redescendent ensemble et l'écart reste le même. Il faut
   un décalage qui ne touche PAS la mise en page, c'est-à-dire une
   translation. Mesuré après correction : écart nul. */
.forminator-ui .forminator-checkbox-box,
.forminator-checkbox-box{
  transform:translateY(.83px);
}

/* ── 14. La recherche ──────────────────────────────────────────────────
   Celle de Divi : un champ sans fond, sans bord, sans repère, deux
   traits verticaux qui traversent l'en-tête et une croix nue. Elle est
   habillée à la charte : champ en pastille ivoire, loupe dessinée en
   fond, anneau de focus terracotta, croix en bouton rond.

   ⚠️ Les deux traits verticaux ne viennent d'aucune bordure déclarée :
   ils sont peints par des pseudo-éléments de Divi. On les éteint plutôt
   que de chercher lequel, et on repeint tout. */
.et_search_outer{
  background:#FFFFFF;
}
.et_search_outer .container,
.et_search_outer .et-search-form,
.et_search_outer .et_close_search_field{
  border:0 !important;
}
.et_search_outer .container::before,
.et_search_outer .container::after,
.et_search_outer .et-search-form::before,
.et_search_outer .et-search-form::after{
  content:none !important;
}
.et_search_outer .container{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:1rem;
  padding:0 1.5rem !important;
}
.et_search_outer .et-search-form{
  position:relative;
  flex:1 1 auto;
  max-width:34rem !important;
  /* ⚠️ Divi place le champ en position ABSOLUE dans un formulaire de
     hauteur nulle : sans ces deux lignes, le fond et la bordure se
     peignent sur une pastille de 2 px de haut, et le texte flotte
     à côté. Le formulaire redevient une boîte, le champ y rentre. */
  display:flex !important;
  align-items:center;
  height:auto !important;
  background:var(--rv-neutre, #FAF6EF) !important;
  border:1px solid var(--rv-trait, #D9E2E4) !important;
  border-radius:999px;
  transition:border-color .25s cubic-bezier(.32,.72,0,1), box-shadow .25s cubic-bezier(.32,.72,0,1);
}
/* L'anneau de focus est porté par le formulaire, pas par le champ :
   le contour par défaut du navigateur dessinait un rectangle dur autour
   d'une pastille arrondie. Il est retiré ET remplacé, jamais retiré
   seul : un champ sans repère de focus est inutilisable au clavier. */
.et_search_outer .et-search-form:focus-within{
  border-color:var(--rv-terracotta-fort, #A55E31) !important;
  box-shadow:0 0 0 3px rgba(165,94,49,.32);
}
.et_search_outer input.et-search-field:focus,
.et_search_outer input.et-search-field:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}
/* La loupe, dessinée en fond : aucune requête, aucune police d'icônes. */
.et_search_outer .et-search-form::before{
  content:'' !important;
  position:absolute;
  left:1.15rem;
  top:50%;
  width:1.05rem;
  height:1.05rem;
  transform:translateY(-50%);
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5563' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%3E%3C/svg%3E");
  pointer-events:none;
}
.et_search_outer input.et-search-field{
  position:static !important;
  width:100%;
  height:auto !important;
  padding:.85rem 1.2rem .85rem 3rem !important;
  font-family:var(--rv-sans, Inter, sans-serif) !important;
  font-size:1rem !important;
  line-height:1.4;
  color:var(--rv-encre, #2E3538) !important;
  background:transparent !important;
  border:0 !important;
  border-radius:999px;
  box-shadow:none !important;
}
/* La croix native que certains navigateurs ajoutent aux champs de type
   « search » ferait doublon avec le bouton de fermeture. */
.et_search_outer input.et-search-field::-webkit-search-cancel-button{
  -webkit-appearance:none;
  appearance:none;
}
.et_search_outer input.et-search-field::placeholder{
  color:var(--rv-gris, #5C6A6E);
  opacity:1;
}
/* La croix de Divi vient d'une police d'icônes posée en ::before. On
   l'éteint et on la redessine en SVG, comme les 31 autres icônes du
   site : même trait, même couleur, aucune police à charger. */
.et_search_outer .et_close_search_field::before{ content:none !important; }
/* ⚠️ Divi calcule en JavaScript une marge horizontale de 251 px sur la
   croix pour la centrer à la main. Dans un conteneur flex, elle repousse
   le bouton à 270 px du champ. */
.et_search_outer .et_close_search_field{
  position:relative !important;
  margin:0 !important;
  cursor:pointer;
  flex:0 0 auto;
  width:2.6rem;
  height:2.6rem;
  border-radius:50%;
  background:var(--rv-neutre, #FAF6EF);
  transition:background-color .25s cubic-bezier(.32,.72,0,1), transform .25s cubic-bezier(.32,.72,0,1);
}
.et_search_outer .et_close_search_field:hover{
  background:rgba(165,94,49,.14);
  transform:scale(1.06);
}
.et_search_outer .et_close_search_field::after{
  content:'' !important;
  position:absolute;
  inset:0;
  margin:auto;
  width:1rem;
  height:1rem;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5563' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5 5 19'/%3E%3C/svg%3E");
}
@media (max-width:600px){
  .et_search_outer .container{ gap:.6rem; padding:0 1rem !important; }
  .et_search_outer .et_close_search_field{ width:2.2rem; height:2.2rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   15. Bandeau de consentement (Complianz)
   ──────────────────────────────────────────────────────────────────────
   Mesuré le 20/08/2026 : `.cmplz-buttons` est en `display:flex` avec
   `align-items:normal`, c'est-à-dire ÉTIRÉ. Les trois boutons prenaient
   donc toute la hauteur du texte à côté — 159 px de haut pour deux mots.
   Un bouton haut comme un paragraphe ne se lit plus comme un bouton.

   On les recentre et on leur rend une hauteur de bouton. Rien d'autre
   n'est touché : la CNIL demande que refuser soit aussi simple
   qu'accepter, les trois gardent donc la même taille et la même ligne.
   ══════════════════════════════════════════════════════════════════ */
#cmplz-cookiebanner-container .cmplz-buttons{
  align-items:center !important;
  gap:.6rem;
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn{
  min-height:0 !important;
  padding:.85rem 1rem !important;
  line-height:1.25 !important;
  align-self:center !important;
}
/* Le lien « Gérer mon consentement » du pied de page est un lien, pas un
   bouton : il ne doit pas hériter du soulignement au survol des liens de
   crédits, ni sauter de ligne au milieu. */
#footer-info a.cmplz-manage-consent{ white-space:nowrap; }


/* ══════════════════════════════════════════════════════════════════════
   §16. Retour du 25/08/2026
   ══════════════════════════════════════════════════════════════════════ */

/* La phrase d'introduction Qualiopi de la page Formations, en bleu
   pétrole comme demandé. Contraste mesuré : 8,06:1 sur l'ivoire. */
.rv-qualiopi-intro{
  color:var(--rv-petrole, #0B5563);
  font-family:var(--rv-titre, 'Fraunces', Georgia, serif);
  font-size:clamp(1.15rem, 1rem + .5vw, 1.42rem);
  line-height:1.45;
  max-width:44rem;
  margin:1.2rem auto .6rem;
}

/* La carte des trois territoires. Le SVG porte son propre viewBox ; on ne
   lui impose qu'une largeur maximale, la hauteur suit. */
/* ⚠️ Une largeur EXPLICITE, pas 100 %. Le conteneur `.rv-bloc-guyane >
   div:first-child` est en `flex:0 0 auto` : un SVG en largeur relative s'y
   réduit à rien, et la carte sortait à 180 px de large avec des libellés
   illisibles. L'ancienne carte de la Guyane portait déjà un clamp pour la
   même raison. */
.rv-carte-territoires{
  width:clamp(17rem, 34vw, 27rem);
  height:auto;
  display:block;
  color:var(--rv-petrole, #0B5563);
}
.rv-carte-territoires text{ font-family:var(--rv-texte, Inter, system-ui, sans-serif); }

/* Les quatre volets de la fonction RH : deux colonnes, texte à gauche. */
.rv-grille-2 > .rv-c > p{ text-align:left; }

/* Cartes de recherche sans image à la une : le corps prend toute la
   carte, avec un filet de charte en tête pour que la rangée garde un
   rythme visuel malgré l'absence de photo. La règle vit ici et non dans
   style.css parce qu'elle corrige un défaut relevé le 25/08/2026. */
.rv-carte-article-nue{ border-top:4px solid var(--rv-terracotta, #C97C4B); }
.rv-carte-article-nue .rv-carte-article-corps{ padding-top:1.05rem; }
.rv-etiquette-page{
  color:var(--rv-gris, #5C6A6E);
  font-size:.74rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* Le logo au téléphone : 97 px de large, sous le plancher de 120 px que
   fixe la charte. Le nouveau logo du 25/08/2026 est plus large que haut
   dans un rapport de 2,24 contre 2,46 : à hauteur égale il perd 9 % de
   largeur, et passe sous le seuil.
   ⚠️ On ne touche PAS à la hauteur du logo de bureau : elle est calculée
   en JavaScript par Divi depuis menu_height et logo_height, et l'imposer
   en CSS fait tomber le logo sous le menu. Sur le menu mobile, ce calcul
   ne s'applique pas : la règle ci-dessous n'entre donc en conflit avec
   rien. Vérifié en mesurant la hauteur de l'en-tête avant et après. */
@media (max-width:980px){
  #main-header #logo{ max-height:none; height:56px; width:auto; }
}

/* Les grilles de cartes collaient au texte qui les introduit : écart
   mesuré à 0 px sur les trois largeurs, sur toutes les pages. Le filet
   terracotta du haut des cartes touchait les jambages du paragraphe. */
.rv-grille{ margin-top:1.7rem; }


/* ══════════════════════════════════════════════════════════════════════
   Retour du 01/09/2026 au soir, après mise en ligne
   ══════════════════════════════════════════════════════════════════════ */

/* ────────── 15. Le bouton grandissait au survol ──────────
   Mesuré : 265,4 × 60,2 au repos, 269,4 × 64,2 au survol, et le bouton
   remontait de 2 px. Cause lue sur les rectangles, pas sur les
   propriétés déclarées : `border-width` passe de 0 à 2px. C'est Divi qui
   l'impose dans son CSS généré ; le `border:0` du thème enfant ne gagne
   qu'à l'état de repos.

   La parade n'est pas de remettre 0 au survol — Divi le réécrirait au
   prochain enregistrement de page — mais de poser une bordure
   TRANSPARENTE de 2px dès le repos : la boîte ne change alors plus
   jamais de taille, seul le fond change. Le padding est réduit d'autant
   pour que le bouton garde exactement ses dimensions actuelles. */
/* ⚠️ Deux propriétés changent au survol, pas une. Après avoir neutralisé
   la bordure, la mesure a montré `padding 13.12px 27.2px → 15px 38px` :
   Divi écrit AUSSI un padding de survol, et son sélecteur généré
   (`body #page-container … .et_pb_button:hover`) bat un `.et_pb_button`
   nu, même avec !important. Il faut donc l'égaler en spécificité.
   Corriger une cause et s'arrêter là aurait laissé le bouton bouger. */
/* ⚠️ Le padding NE SE REDÉCLARE PAS en `em`. Premier essai :
   `calc(.85em - 2px) calc(2em - 2px)` — les valeurs du thème. Résultat
   mesuré : le bouton passe de 265 × 60 à 291 × 68, en permanence. La
   valeur horizontale réellement appliquée avant intervention n'était pas
   `2em` (elle valait 27,2 px pour une police de 20 px, soit 1,36em) :
   une autre règle l'écrasait déjà. Redéclarer en `em` a donc changé la
   taille de tous les boutons du site, sans que personne l'ait demandé.

   On repose donc les valeurs RELEVÉES au repos avant toute intervention
   — 13,12 px et 27,2 px — moins les 2 px de bordure, pour que le bouton
   garde exactement ses dimensions d'origine. Une valeur mesurée vaut
   mieux qu'une valeur recalculée. */
body #page-container .et_pb_button,
body #page-container .et_pb_button:hover,
body #page-container .et_pb_button:focus,
body #page-container input[type=submit],
.et_pb_button,
.et_pb_button:hover,
.et_pb_button:focus,
input[type=submit]{
  border:2px solid transparent !important;
  padding:11.12px 25.2px !important;
}
/* Le bouton secondaire dessine son contour avec `box-shadow: inset`, pas
   avec une bordure : il n'était pas concerné, et il ne doit pas hériter
   d'une bordure qui doublerait le trait. */
.rv-bouton-secondaire.et_pb_button,
.rv-bouton-secondaire.et_pb_button:hover{ border-color:transparent !important; }

/* ────────── 16. Case de consentement décalée du bouton ──────────
   Sur Livret d'accueil et sur Contact, la case dessinée commençait 12 px
   à droite du bord gauche du bouton d'envoi. L'étiquette, elle, était
   bien alignée : c'est son `padding-left:12px` qui poussait la case.
   Le décalage ne se voit pas en comparant les étiquettes, seulement en
   comparant la case DESSINÉE (`.forminator-checkbox-box`) au bouton. */
.forminator-ui .forminator-checkbox{ padding-left:0 !important; }
/* L'étiquette garde son retrait par rapport à la case, sinon le texte
   viendrait coller au carré. */
.forminator-ui .forminator-checkbox-label{ padding-left:.55rem; }

/* ────────── 16 bis. La case et son texte à la même hauteur ──────────
   Mesuré : centre de la case à 2548,5 px, centre du texte à 2538,9 px,
   soit **9,6 px** d'écart. Le texte flottait au-dessus de la case.

   Deux causes, et il faut les deux :
   · le conteneur est en `align-items:flex-start`, donc chacun se cale en
     haut de sa propre boîte, qui n'ont pas la même hauteur (37,6 px
     contre 20) ;
   · l'étiquette de la case porte un `padding-top:8.8px`, qui pousse le
     carré vers le bas DANS sa boîte.

   ⚠️ `align-items:center` seul n'aurait pas suffi : il centre la boîte
   **marges et rembourrage compris**, donc le carré serait resté 8,8 px
   plus bas que le centre. Le padding doit tomber d'abord. */
.forminator-ui .forminator-checkbox,
.forminator-ui label.forminator-checkbox{
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.forminator-ui .forminator-field-consent,
.forminator-ui .forminator-checkbox__wrapper,
.forminator-ui .forminator-field > .forminator-checkbox__container{
  align-items:center !important;
}
/* Le conteneur réel n'a pas de classe stable : on vise le parent direct
   d'une étiquette de case, ce qui marche quel que soit son nom. */
.forminator-ui div:has( > label.forminator-checkbox ){
  align-items:center !important;
}

/* ────────── 17. WhatsApp passe à gauche ──────────
   Le bandeau de consentement occupe toute la largeur du bas de l'écran
   (mesuré : 1420 × 215 px à partir de x=10) : les deux se chevauchaient.
   Le bouton passe à gauche, et surtout il S'EFFACE tant que le bandeau
   est affiché — à droite comme à gauche, il serait recouvert. Il revient
   dès que le visiteur a répondu. */
/* ⚠️ Ce bloc a d'abord EFFACÉ le bouton tant que le bandeau de
   consentement s'affichait. Personne ne l'avait demandé, et comme le
   bandeau reste tant que le visiteur n'a pas répondu, le bouton était
   simplement invisible à l'arrivée sur le site. La demande était : « en
   bas à gauche au lieu d'en bas à droite ». Rien de plus.
   Une idée d'amélioration qui n'a pas été demandée est une régression. */
.rv-whatsapp{ right:auto; left:1.1rem; }

/* Le bandeau de consentement reste PLEINE LARGEUR, et c'est le bouton
   WhatsApp qui se range au-dessus de lui tant qu'il est affiché.

   ⚠️ La carte en bas à droite a été essayée et abandonnée. Complianz
   pose bien la classe `cmplz-bottom-right`, mais son CSS garde la
   pleine largeur (1420 px mesurés sur une fenêtre de 1440), et surtout
   la zone des boutons reste en `flex-direction:row; nowrap` : dans une
   carte de 480 px elle mesurait **769 px** et « Tout accepter » sortait
   du cadre. Forcer la colonne sur la zone n'a pas suffi — son parent est
   lui aussi en ligne. Chaque correctif en appelait un autre : repeindre
   de bout en bout le bandeau d'une extension qu'on ne maîtrise pas est
   une dette, pas une solution.

   Remonter le bouton coûte une règle et ne dépend d'aucune version du
   plugin. La hauteur du bandeau est mesurée à 215 px sur grand écran ;
   la marge est prise large. */
/* ⚠️ Le marqueur est `cmplz-show`, PAS l'absence de `cmplz-hidden`.
   Premier essai avec `:not(.cmplz-hidden)` : le bouton restait remonté
   APRÈS l'acceptation, parce que Complianz ne pose pas `cmplz-hidden`
   en refermant — il retire simplement `cmplz-show` et laisse le bandeau
   en `display:none`. Mesuré : bouton à 247 px du bas alors que le
   bandeau avait disparu. Tester une classe qu'on n'a pas vue à l'écran
   est une supposition ; celle-ci était fausse. */
body:has( #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show ) .rv-whatsapp{
  bottom:calc(215px + 2rem);
}
@media (max-width:900px){
  body:has( #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show ) .rv-whatsapp{
    bottom:auto;
    top:5.5rem;
  }
}

/* ────────── 16 bis. La case et son texte à la même hauteur ──────────
   Mesuré : centre de la case à 2548,5 px, centre du texte à 2538,9 px,
   soit **9,6 px** d'écart. Le texte flottait au-dessus de la case.

   Deux causes, et il faut les deux :
   · le conteneur est en `align-items:flex-start`, donc chacun se cale en
     haut de sa propre boîte, qui n'ont pas la même hauteur (37,6 px
     contre 20) ;
   · l'étiquette de la case porte un `padding-top:8.8px`, qui pousse le
     carré vers le bas DANS sa boîte.

   ⚠️ `align-items:center` seul n'aurait pas suffi : il centre la boîte
   **marges et rembourrage compris**, donc le carré serait resté 8,8 px
   plus bas que le centre. Le padding doit tomber d'abord. */
.forminator-ui .forminator-checkbox,
.forminator-ui label.forminator-checkbox{
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.forminator-ui .forminator-field-consent,
.forminator-ui .forminator-checkbox__wrapper,
.forminator-ui .forminator-field > .forminator-checkbox__container{
  align-items:center !important;
}
/* Le conteneur réel n'a pas de classe stable : on vise le parent direct
   d'une étiquette de case, ce qui marche quel que soit son nom. */
.forminator-ui div:has( > label.forminator-checkbox ){
  align-items:center !important;
}

/* ────────── 17. WhatsApp passe à gauche ──────────
   Le bandeau de consentement occupe toute la largeur du bas de l'écran
   (mesuré : 1420 × 215 px à partir de x=10) : les deux se chevauchaient.
   Le bouton passe à gauche, et surtout il S'EFFACE tant que le bandeau
   est affiché — à droite comme à gauche, il serait recouvert. Il revient
   dès que le visiteur a répondu. */
/* ⚠️ Ce bloc a d'abord EFFACÉ le bouton tant que le bandeau de
   consentement s'affichait. Personne ne l'avait demandé, et comme le
   bandeau reste tant que le visiteur n'a pas répondu, le bouton était
   simplement invisible à l'arrivée sur le site. La demande était : « en
   bas à gauche au lieu d'en bas à droite ». Rien de plus.
   Une idée d'amélioration qui n'a pas été demandée est une régression. */
.rv-whatsapp{ right:auto; left:1.1rem; }

/* Le bandeau de consentement passe en CARTE, en bas à droite, pour
   laisser le coin gauche au bouton WhatsApp. Sa position est réglée dans
   Complianz (`position = bottom-right`, table `cmplz_cookiebanners`), et
   la classe `cmplz-bottom-right` est bien servie — mais le CSS du plugin
   garde la pleine largeur : mesuré 1420 px sur une fenêtre de 1440.
   La largeur est donc posée ici, ce qui ne dépend d'aucune version du
   plugin. */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-bottom-right{
  max-width:min(30rem, calc(100vw - 2.2rem));
  left:auto !important;
  right:1.1rem !important;
  margin-left:auto;
}
/* 🔴 Les trois boutons restent sur UNE ligne quoi qu'il arrive : leur
   conteneur est en `flex-direction:row; flex-wrap:nowrap` et chaque
   bouton en `white-space:nowrap`. Dans une carte de 480 px, la zone des
   boutons mesurait **769 px** et sortait de 620 px hors du cadre :
   « Tout accepter » était coupé par le bord. Vu sur la capture, pas dans
   la mesure de position de la carte, qui ne regardait que le bandeau.
   En carte, ils passent donc en colonne, chacun pleine largeur. */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-bottom-right .cmplz-buttons{
  flex-direction:column !important;
  flex-wrap:wrap !important;
  align-items:stretch !important;
  width:100%;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-bottom-right .cmplz-buttons .cmplz-btn{
  width:100%;
  flex:0 0 auto !important;
  white-space:normal !important;
  text-align:center;
}

/* Sur un téléphone, une carte de 30 rem ne tient pas : le bandeau
   reprend toute la largeur, et le bouton WhatsApp se range au-dessus de
   lui plutôt que dessous. */
@media (max-width:700px){
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-bottom-right{
    max-width:none;
    left:1.1rem !important;
    right:1.1rem !important;
  }
  body:has( #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-bottom-right:not(.cmplz-hidden) ) .rv-whatsapp{
    bottom:auto;
    top:5.5rem;
  }
}