/**
 * Primitives partagees par les composants de page.
 * Les noms generiques de la maquette (`.cap`, `.txt`, `.anneaux`) sont prefixes
 * `dec-` : charges sur tout le site, ils entreraient sinon en collision avec le
 * theme ou un futur greffon. Les classes internes a un composant, elles,
 * gardent le nom de la maquette puisqu'elles sont toujours descendantes.
 */

/* anneaux concentriques : motif de marque, genere en degrades, jamais une image */
.dec-anneaux{position:absolute;pointer-events:none;aspect-ratio:1;border-radius:50%;
 background:
  radial-gradient(circle,transparent 0 30%,currentColor 30% 31%,transparent 31% 100%),
  radial-gradient(circle,transparent 0 44%,currentColor 44% 45%,transparent 45% 100%),
  radial-gradient(circle,transparent 0 58%,currentColor 58% 59%,transparent 59% 100%),
  radial-gradient(circle,transparent 0 72%,currentColor 72% 73%,transparent 73% 100%)}

/* masques : la geometrie de l'arc, citee du logo */
.dec-m-arc{border-radius:var(--r-2xl) var(--r-2xl) var(--r-m) var(--r-m);overflow:hidden}
.dec-m-feuille{border-radius:var(--r-2xl) var(--r-s) var(--r-2xl) var(--r-s);overflow:hidden}
.dec-m-doux{border-radius:var(--r-l);overflow:hidden}

/* .dec-duo : accord chromatique olive sur une photographie moyenne */
.dec-duo{position:relative;background:var(--olive-f);isolation:isolate}
.dec-duo img{filter:grayscale(1) contrast(1.1) brightness(1.04);mix-blend-mode:luminosity;
 width:100%;height:100%;object-fit:cover}
.dec-duo::after{content:'';position:absolute;inset:0;background:var(--olive);
 mix-blend-mode:color;opacity:.5;pointer-events:none}
.dec-duo.faible{background:transparent}
.dec-duo.faible img{filter:saturate(.72) contrast(1.06);mix-blend-mode:normal}
.dec-duo.faible::after{background:var(--olive);mix-blend-mode:multiply;opacity:.12}

/* Tous les composants portent la police du site : sans cela ils heritent de
   celle du theme actif et ne ressemblent plus a la maquette. */
[class*="elementor-widget-decical-"]{font-family:var(--police);
 -webkit-font-smoothing:antialiased;
 font-variant-numeric:tabular-nums lining-nums}

/* Surtitre monospace, tel que le posent les composants dans leur propre
   balisage (legendes de figure de la planche de mesure, par exemple). Pose sur
   un bloc natif, il passe par `accueil.css` : le CSS de page d'Elementor y bat
   un selecteur a une seule classe. */
.dec-cap{font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.24em;
 text-transform:uppercase;color:var(--gris);line-height:1.6;display:block}
.dec-cap b{color:var(--olive);font-weight:400}

/**
 * Remise a zero des marges par defaut, a l'interieur des composants seulement.
 *
 * La maquette pose un `*{margin:0;padding:0}` global. Ici on ne touche qu'aux
 * elements emis par les composants : le theme et les blocs natifs d'Elementor
 * gardent leurs regles. `:where()` ne pese rien en specificite, donc chaque
 * feuille de composant continue de poser ses propres marges par-dessus.
 *
 * Sans cela, le `margin-inline-start:40px` que les navigateurs appliquent a
 * `dd` decalait de 40 px la premiere colonne de chiffres des rangees de marche,
 * et les titres heritaient d'une marge haute de 8 px.
 */
[class*="elementor-widget-decical-"] :where(p,h2,h3,h4,h5,dl,dt,dd,ul,ol,li,figure,
 figcaption,details,summary,address,blockquote){margin:0;padding:0}

/* Longueur de ligne : la mesure de confort de lecture, posee une fois pour tout
   le site comme dans la maquette. Les blocs qui doivent s'en affranchir (notes
   sur deux colonnes, corps en trois colonnes, fiches produit) la remettent a
   `none` dans leur propre feuille. */
p{max-width:70ch}