/* --------------------------------------------------------------------------
   UZELIA — ajustements propres à WordPress et à Elementor.

   uzelia.css reste le fichier de référence, strictement identique à celui de
   la maquette : tout ce qui n'existe que sous WordPress s'écrit ici.

   Principe de la conversion : chaque section, chaque bloc de la maquette est
   confié à un conteneur ou à un widget Elementor, mais le balisage d'origine
   — la balise, les classes, les styles en ligne — reste à l'intérieur. C'est
   lui qui porte la mise en forme ; les enveloppes qu'Elementor ajoute autour
   s'effacent de la mise en page. Le rendu est donc celui de la maquette, tout
   en devenant modifiable bloc par bloc dans l'éditeur.

   Les mises en page des conteneurs (flex, grille, gouttières) sont réglées
   dans uzelia-elementor.css, qui est généré à partir de la charte.
   -------------------------------------------------------------------------- */

/* --- enveloppes ----------------------------------------------------------- */

/* L'enveloppe intérieure d'un widget ne doit jamais peser sur la mise en page. */
.elementor .elementor-widget-container { display: contents }

/* Les blocs marqués « uz-brut » contiennent le balisage d'origine : leur
   enveloppe disparaît entièrement, l'élément réel redevient l'enfant direct
   de sa section. Sans cela il s'intercalerait dans les grilles et ses marges
   seraient avalées. */
.elementor .elementor-widget.uz-brut { display: contents }

/* Elementor ajoute 20 px sous chaque widget : la charte gère déjà le rythme. */
.elementor .elementor-widget:not(:last-child) { margin-block-end: 0 }

/* Le cartouche de section est un vrai intertitre — un h2 — qui traverse la
   conversion à l'identique, à l'intérieur de son bloc. La charte le fait
   déborder jusqu'au bord de l'écran par une marge négative, au moyen d'un
   sélecteur « .wrap > .slabel » que le bloc intercalé empêche de mordre :
   on le redit ici. L'enveloppe étant transparente, le h2 reste bien l'enfant
   de la colonne du point de vue de la mise en page. */
.elementor .e-con.uz.wrap > .elementor-widget.uz-brut > .slabel:not(.slabel--center) {
  margin-inline: calc(50% - 50vw);
  padding-left: var(--cartouche);
  padding-right: var(--gutter);
}

/* La charte écrit « p:last-child { margin-bottom: 0 } » pour supprimer la
   marge du dernier paragraphe d'un bloc. Chaque paragraphe étant désormais
   seul dans son enveloppe Elementor, il se croit toujours « dernier » et
   perd sa marge. On la lui rend, avec la valeur exacte de la charte, dès
   qu'une autre enveloppe le suit.
   Tout se joue ici, en CSS : le balisage des paragraphes ne porte aucun
   repère invisible, si bien que l'éditeur de texte peut les remanier sans
   jamais dérégler la mise en page.
   La liste ci-dessous est recopiée de la charte, règle par règle, par
   build/marges.py : chaque paragraphe retrouve la marge de sa classe et de
   son contexte, pas une valeur moyenne. */
/* >>> marges des paragraphes — bloc produit par build/marges.py,
       remplacé à chaque construction : ne rien y écrire à la main. */
.elementor .elementor-widget.uz-brut:not(:last-child) > p:last-child { margin-bottom: 1.15em }   /* charte : p */
.elementor .elementor-widget.uz-brut:not(:last-child) > p.mega__note:last-child { margin-bottom: 0 }   /* charte : .mega__note */
.elementor .elementor-widget.uz-brut:not(:last-child) > p.hero__eyebrow:last-child { margin-bottom: clamp(16px,2vw,24px) }   /* charte : .hero__eyebrow */
.elementor .phead .elementor-widget.uz-brut:not(:last-child) > p.crumb:last-child { margin-bottom: 22px }   /* charte : .phead .crumb */
.elementor .manifest .elementor-widget.uz-brut:not(:last-child) > p:last-child { margin-bottom: 0 }   /* charte : .manifest p */
.elementor .duo__steps .elementor-widget.uz-brut:not(:last-child) > p:last-child { margin-bottom: 0 }   /* charte : .duo__steps p */
.elementor .steps .elementor-widget.uz-brut:not(:last-child) > p:last-child { margin-bottom: 0 }   /* charte : .steps p */
.elementor .elementor-widget.uz-brut:not(:last-child) > p.ep__n:last-child { margin-bottom: 6px }   /* charte : .ep__n */
.elementor .elementor-widget.uz-brut:not(:last-child) > p.ep__x:last-child { margin-bottom: 12px }   /* charte : .ep__x */
.elementor .elementor-widget.uz-brut:not(:last-child) > p.ep__meta:last-child { margin-bottom: 20px }   /* charte : .ep__meta */
.elementor .elementor-widget.uz-brut:not(:last-child) > p.card__cat:last-child { margin-bottom: 12px }   /* charte : .card__cat */
.elementor .note .elementor-widget.uz-brut:not(:last-child) > p:last-child { margin-bottom: 0 }   /* charte : .note p */
.elementor .faq .elementor-widget.uz-brut:not(:last-child) > p:last-child { margin-bottom: 0 }   /* charte : .faq p */
.elementor .infos .elementor-widget.uz-brut:not(:last-child) > p:last-child { margin-bottom: 0 }   /* charte : .infos p */
/* <<< fin des marges */

/* Repère hérité de la première conversion : il n'est plus posé, mais on
   continue de le masquer au cas où il en resterait un quelque part. */
.uz-fin { display: none }

/* Un bloc de balisage laissé d'un seul tenant referme son contexte de
   formatage, sinon les marges de son contenu s'échappent et se fondent avec
   celles des blocs voisins. */
.elementor .elementor-widget-html:not(.uz-brut) { display: flow-root }

/* --- bandeaux de tête ----------------------------------------------------- */

/* Elementor empile ses conteneurs en colonne : l'axe transversal devient
   horizontal, si bien qu'« aligner en bas » alignerait à droite. Ces deux
   bandeaux reviennent donc à une rangée, comme dans la charte. */
.elementor .e-con.uz.hero {
  display: flex; flex-direction: row; --flex-direction: row;
  align-items: center; justify-content: center;
  height: var(--hero-h); max-height: 92svh; min-height: 520px;
}
.elementor .e-con.uz.phead {
  display: flex; flex-direction: row; --flex-direction: row;
  align-items: flex-end; min-height: 62svh;
}

/* Dans la charte, le bloc de titre du héros est un élément flexible : il
   prend la largeur de son texte, plafonnée à 1100 px. Elementor donne 100 %
   à ses conteneurs, ce qui l'étirerait sur toute la largeur. */
.elementor .e-con.uz.hero__in { width: auto; --width: auto; max-width: 1100px }

/* --- barre d'administration ---------------------------------------------- */

body.admin-bar .hdr { top: 32px }
@media (min-width: 981px) {
  body.admin-bar .hdr.is-stuck { top: 32px }
}
@media screen and (max-width: 782px) {
  body.admin-bar .hdr,
  body.admin-bar .hdr.is-stuck { top: 46px }
}

/* --- ancres --------------------------------------------------------------- */

/* Les liens internes s'arrêtent sous l'en-tête collant, pas derrière lui. */
html { scroll-padding-top: 88px }
@media (max-width: 980px) { html { scroll-padding-top: 80px } }

/* --- éditeur -------------------------------------------------------------- */

/* Dans l'éditeur Elementor, l'en-tête collant et la barre d'action mobile
   masqueraient le bloc en cours de modification. */
body.elementor-editor-active .hdr.is-stuck { position: absolute }
body.elementor-editor-active .dock { display: none }

/* Les apparitions au défilement laissent le contenu invisible tant qu'on ne
   l'a pas atteint : pratique pour le visiteur, impossible pour qui modifie la
   page. Dans l'éditeur, tout est donc visible d'emblée. */
body.elementor-editor-active .rv,
body.elementor-editor-active .rv.is-in { opacity: 1; transform: none; transition: none }

/* --- images --------------------------------------------------------------- */

.ph img, .split__media img, .hero__media img { width: 100%; height: 100%; object-fit: cover; display: block }

/* Les emplacements photo sont des blocs Image d'Elementor : la photo se
   remplace depuis la médiathèque, sans toucher au code. La classe « ph »
   est portée par le bloc lui-même, si bien que le cadre, le format et le
   biseau de la charte s'appliquent sans rien changer. Elementor glisse un
   lien ou une balise <figure> entre le bloc et l'image : on les rend
   transparents pour que la photo remplisse bien son cadre. */
.elementor .elementor-widget.ph > a,
.elementor .elementor-widget.ph > figure,
.elementor .elementor-widget.ph > a > figure { display: block; height: 100%; margin: 0 }

/* Même chose que pour les paragraphes : le cadre photo est maintenant un
   bloc, et la règle qui annule les marges des blocs lui prendrait celle
   que la charte lui donne. On la lui rend. */
.elementor .pillar .elementor-widget.ph:not(:last-child) { margin-block-end: 26px }
.elementor .rail__item .elementor-widget.ph:not(:last-child) { margin-block-end: 20px }

/* Tant qu'aucune photo n'est choisie, Elementor affiche sa propre image
   d'attente : on l'efface pour laisser voir l'aplat de la charte, et on
   montre à la place la légende qui rappelle quelle photo prend place ici.
   Dès qu'une vraie photo est déposée, la légende disparaît d'elle-même. */
.elementor .ph img[src*="placeholder"] { opacity: 0 }
.elementor .ph figcaption { display: none }
.elementor .ph:has(img[src*="placeholder"]) figcaption {
  display: block; position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2;
  text-align: center; font-style: normal; font-family: var(--font-sans);
  font-size: .62rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .68) }