/* ========================================================================== assets/css/kits.css -------------------------------------------------------------------------- La classe .kit- est posée sur par idh_body_class() (includes/tokens.php), depuis le champ idh_charte_kit. Chaque kit redéfinit trois familles de choses, jamais une couleur : 1. --idh-motif la trame de fond (body::before, dans base.css) 2. --idh-media-* la géométrie des photos (.photo-story, .article…) 3. --idh-puce-* la forme des puces (listes à puce personnalisées) Le sprite de pictogrammes (#jalon, #pic-1…#pic-6) est injecté à part par kits/.php (get_template_part), pas dans ce fichier CSS. RÈGLE --idh-media-radius : par défaut = var(--idh-radius), c.-à-d. le champ « Arrondi des images » (IDH · 1). Un kit ne le REDÉFINIT que s'il impose une FORME non exprimable par un simple rayon (arche du kit Sud, galet du kit Cocon). Les kits « plats » (marin, lande, montagne, urbain) ne le touchent pas → le champ « Arrondi des images » pilote bien les photos. ========================================================================== */ /* --- 1. MARIN — presqu'île, littoral, port ------------------------------ */ .kit-marin { --idh-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='20'%3E%3Cpath d='M0 20q15 -20 30 0t30 0' stroke='%23232A2C' stroke-width='1' fill='none'/%3E%3C/svg%3E"); --idh-puce-clip: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); --idh-puce-radius: 0; } /* --- 2. LANDE — campagne, nature, jardin -------------------------------- */ .kit-lande { --idh-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34'%3E%3Cpath d='M0 6q30 12 60 0t60 0M0 20q30 12 60 0t60 0M0 34q30 12 60 0t60 0' stroke='%23232A2C' stroke-width='.8' fill='none'/%3E%3C/svg%3E"); --idh-puce-radius: 50% 50% 50% 4px; } /* --- 3. MONTAGNE — chalet, altitude, hiver ------------------------------ */ .kit-montagne { --idh-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18'%3E%3Cpath d='M0 18L9 4l9 14M18 18l9-14 9 14' stroke='%23232A2C' stroke-width='1' fill='none'/%3E%3C/svg%3E"); /* Silhouette de sommet, découpe du haut de la photo. PAR DÉFAUT : pointes vives (identique à l'origine) — c'est aussi le repli sans shape(). */ --idh-media-clip: polygon(0 7%, 50% 0, 100% 7%, 100% 100%, 0 100%); --idh-puce-clip: polygon(50% 0, 100% 100%, 0 100%); --idh-puce-radius: 0; } /* Les 3 pointes ne sont adoucies QUE si la charte a un « Arrondi des images » non nul (--idh-radius ≠ 0) ET que shape() est disponible. Charte angulaire (--idh-radius: 0) → on garde le polygone à pointes vives ci-dessus. CLÉ du tracé : le point de contrôle de la cime est PILE sur la pointe théorique (50 % 0 %) — la courbe reste tangente aux versants, jamais de « téton » qui dépasse. */ @supports (clip-path: shape(from 0% 0%, line to 100% 100%, close)) { @container style(not (--idh-radius: 0px)) { .kit-montagne { --idh-media-clip: shape( from 0% 15%, curve to 6% 8% with 0% 10%, /* épaule gauche */ line to 44% 1.3%, /* versant gauche */ curve to 56% 1.3% with 50% 0%, /* cime, pointe limée */ line to 94% 8%, /* versant droit */ curve to 100% 15% with 100% 10%, /* épaule droite */ line to 100% 100%, line to 0% 100%, close ); } } } /* --- 4. SUD — méditerranée, mas, patio ---------------------------------- */ .kit-sud { --idh-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='4' cy='4' r='1.6' fill='%23232A2C'/%3E%3Ccircle cx='18' cy='14' r='1' fill='%23232A2C'/%3E%3Cpath d='M9 22h5' stroke='%23232A2C' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); --idh-media-radius: 50vw 50vw 6px 6px / 30% 30% 6px 6px; /* arche */ --idh-puce-radius: 50%; } /* --- 5. URBAIN — city break, appartement, design ------------------------ */ .kit-urbain { --idh-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 .5H32M.5 0V32' stroke='%23232A2C' stroke-width='1' fill='none'/%3E%3C/svg%3E"); --idh-puce-radius: 0; } /* --- 6. COCON — loveroom, spa, insolite --------------------------------- */ .kit-cocon { --idh-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='1.4' fill='%23232A2C'/%3E%3C/svg%3E"); --idh-media-radius: 46% 54% 42% 58% / 38% 44% 56% 62%; --idh-puce-radius: 50% 50% 50% 4px; --idh-jalon-rot: -45deg; } /* --- Application de la géométrie aux médias ---------------------------- --idh-media-radius = champ « Arrondi des images » par défaut (cf. en-tête), ou la forme du kit Sud / Cocon. On le pose ici sur les zones d'image dont le rayon vit sur l' elle-même (pas sur un conteneur overflow:hidden) : il faut alors !important pour battre « .elementor img { border-radius:0 } » (chargé après nos feuilles, même spécificité). Les conteneurs média avec overflow:hidden + border-radius (.carte-page__media, .dispo__photo, .bloc__media, .carte-article__media…) n'en ont pas besoin — leur règle propre suffit dès que --idh-media-radius n'est plus forcé à 0 par le kit. Le hero reste plein cadre, quel que soit le kit : jamais listé ici. ========================================================================== */ .photo-story figure > img, .article figure > a, .article figure > img, .mosaique__photo, .historique__photo, .a-bloc--image-pleine img, .a-bloc--duo .a-bloc__media img, .galerie-grille__tuile img { border-radius: var(--idh-media-radius, var(--idh-radius)) !important; } /* Découpe (forme non exprimable en rayon : sommet Montagne, arche…) — même cibles, sur les zones d'image dont le conteneur reste overflow:visible. */ .photo-story figure > img, .article figure > a, .mosaique__photo, .carte-article__media > img, .galerie__vue > img, .maison__media-img, .galerie-grille__tuile img { clip-path: var(--idh-media-clip, none); } /* --- Exceptions : géométrie neutre imposée, quel que soit le kit --------- [idh_photos] / [idh_destination] / [idh_lieux] / [idh_blog] / [idh_journal] / [idh_galerie] ne doivent JAMAIS prendre la forme décorative du kit (arche Sud, galet Cocon, sommet Montagne…) : seul le rayon de la charte (--idh-radius, champ « Arrondi des images ») s'applique, jamais --idh-media-clip. Sélecteurs volontairement plus spécifiques (ou placés après) que les deux blocs ci-dessus, pour gagner la cascade sans dupliquer leur logique. .galerie-grille__tuile img est propre à [idh_galerie] (aucun autre composant ne le partage) : pas besoin de scoper davantage. */ .photo-story figure > img, .mosaique[aria-label="La destination"] .mosaique__photo, .mosaique.lieux .mosaique__photo, .articles .article figure > a, .articles .article figure > img, .idh-journal__grille .carte-article__media > img, .galerie-grille__tuile img { border-radius: var(--idh-radius) !important; clip-path: none !important; }