/* ========================================================================== ONG YLLA — Feuille de styles unique Thème Ylla • v1.0.0 Un seul fichier, volontairement. Le site est petit, et une seule source de vérité vaut mieux que six imports à tenir synchronisés. Sommaire 1. Variables de la charte 2. Base et typographie 3. Utilitaires et composants partagés 4. En-tête et navigation 5. Pied de page 6. Accueil — héros 7. Accueil — domaines d'action 8. Accueil — projets, chiffres, actualités 9. Bandeau d'appel 10. Pages intérieures, articles, listes 11. Responsive ========================================================================== */ /* 1. VARIABLES ============================================================= */ :root{ --ylla-rose: #E2187B; --ylla-rose-fonce: #C0126A; --ylla-rose-clair: #FDEFF6; --ylla-rose-pale: #F9D9E8; --ylla-heros-1: #FBE3EE; --ylla-heros-2: #F6C9DE; --ylla-heros-3: #F3BDD6; --ylla-nuit: #1B2438; --ylla-nuit-2: #141B2B; --ylla-texte: #2C3242; --ylla-texte-doux: #5C6478; --ylla-ligne: #EFE1E9; --ylla-rayon: 14px; --ylla-ombre: 0 4px 18px rgba(27,36,56,.07); --ylla-ombre-rose: 0 8px 20px rgba(226,24,123,.28); --ylla-max: 1440px; --ylla-lecture: 1180px; /* Largeur de la colonne de texte, calée sur celle du site d'origine (1 182 px mesurés). */ } /* 2. BASE ================================================================== */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:15px;line-height:1.6;color:var(--ylla-texte);background:#fff; -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} a:hover{color:var(--ylla-rose)} ul{list-style:none;margin:0;padding:0} h1,h2,h3,h4{margin:0;line-height:1.2;font-weight:700} :focus-visible{outline:3px solid var(--ylla-rose);outline-offset:3px;border-radius:4px} /* Lien d'évitement : premier élément au clavier, invisible sinon. */ .ylla-skip{ position:absolute;left:-9999px;top:8px;z-index:200; background:var(--ylla-rose);color:#fff;padding:10px 18px;border-radius:6px; } .ylla-skip:focus{left:8px;color:#fff} .ylla-wrap{max-width:var(--ylla-max);margin:0 auto;padding:0 32px} .ylla-icone{flex:none;vertical-align:middle} /* Aplat rose en l'absence d'image : jamais de cadre vide ni de texte qui déborde. */ .ylla-vignette-vide{display:block;width:100%;height:100%;background:var(--ylla-rose-pale)} /* 3. UTILITAIRES ET COMPOSANTS ============================================= */ .ylla-btn{ display:inline-flex;align-items:center;gap:10px; font-weight:600;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase; padding:14px 26px;border-radius:999px;border:2px solid transparent;cursor:pointer; transition:background .2s,color .2s,transform .2s; } .ylla-btn--plein{background:var(--ylla-rose);color:#fff;box-shadow:var(--ylla-ombre-rose)} .ylla-btn--plein:hover{background:var(--ylla-rose-fonce);color:#fff;transform:translateY(-2px)} .ylla-btn--contour{background:#fff;color:var(--ylla-rose);border-color:var(--ylla-rose)} .ylla-btn--contour:hover{background:var(--ylla-rose);color:#fff} .ylla-btn--blanc{background:#fff;color:var(--ylla-rose);border-color:#fff} .ylla-btn--blanc:hover{background:transparent;color:#fff} .ylla-btn--fantome{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)} .ylla-btn--fantome:hover{background:#fff;color:var(--ylla-rose)} /* Version compacte : en-tête, pied du panneau projets et bandeau d'appel. Les deux boutons du héros restent en taille pleine. */ .ylla-btn--petit{padding:11px 22px;font-size:12.5px} .ylla-lien-plus{ color:var(--ylla-rose);font-size:12.5px;font-weight:600; display:inline-flex;align-items:center;gap:7px;transition:gap .2s; } a.ylla-lien-plus:hover{gap:11px;color:var(--ylla-rose-fonce)} /* Sur un panneau rose clair, le rose principal ne donne que 4,05:1. Le rose foncé y remonte à 5,33:1. Sur blanc, le rose principal reste. */ .ylla-panneau .ylla-lien-plus{color:var(--ylla-rose-fonce)} /* Lien étendu à toute une carte. Une carte n'offre ainsi qu'une seule cible, portant le titre pour intitulé. Sans cela il fallait envelopper la vignette dans un second lien, vide, que l'on masquait avec aria-hidden — ce que la spécification ARIA interdit sur un élément interactif. La carte doit être en position:relative. */ .ylla-lien-etendu::after{content:"";position:absolute;inset:0;z-index:1} .ylla-panneau{background:var(--ylla-rose-clair);border-radius:var(--ylla-rayon);padding:22px} .ylla-panneau--actus{margin-top:18px} .ylla-titre-panneau{ font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.07em; color:var(--ylla-nuit);margin:0 0 18px; } .ylla-titre-ligne{display:flex;align-items:baseline;justify-content:space-between;gap:16px} .ylla-centre{display:flex;justify-content:center;margin-top:18px} /* 4. EN-TÊTE =============================================================== */ .ylla-topbar{background:var(--ylla-rose);color:#fff;font-size:13px} .ylla-topbar .ylla-wrap{display:flex;align-items:center;gap:34px;min-height:38px} .ylla-topbar a, .ylla-topbar span{display:inline-flex;align-items:center;gap:8px;color:#fff} .ylla-topbar a:hover{color:#fff;text-decoration:underline} .ylla-topbar__reseaux{margin-left:auto;display:flex;gap:16px} .ylla-entete{ background:#fff;border-bottom:1px solid var(--ylla-ligne); position:sticky;top:0;z-index:60; } .admin-bar .ylla-entete{top:32px} .ylla-entete .ylla-wrap{display:flex;align-items:center;gap:28px;min-height:82px} .ylla-marque{display:flex;align-items:center;gap:12px} .ylla-marque__ruban{color:var(--ylla-rose)} /* Logo téléversé : hauteur calée sur celle du ruban de la maquette, 46 px, pour que l'en-tête garde ses 82 px quelle que soit la taille du fichier. */ .ylla-marque__logo{height:46px;width:auto;max-width:230px;object-fit:contain} /* Un logo porte déjà le nom de l'association : ne pas l'écrire deux fois. */ .ylla-marque--logo .ylla-marque__nom{display:none} .ylla-marque__nom{ display:block;font-size:27px;font-weight:800;letter-spacing:.04em;color:var(--ylla-nuit); } .ylla-marque__nom span{color:var(--ylla-rose)} .ylla-marque__accroche{ display:block;margin-top:2px;font-size:10.5px;line-height:1.35; color:var(--ylla-texte-doux);max-width:180px; } .ylla-nav{margin-left:auto} .ylla-nav__liste{display:flex;gap:30px} .ylla-nav__liste a{ font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase; padding:6px 0;border-bottom:2px solid transparent;display:inline-block; transition:color .2s,border-color .2s; } .ylla-nav__liste .current-menu-item > a, .ylla-nav__liste .current_page_item > a{color:var(--ylla-rose);border-color:var(--ylla-rose)} /* Sous-menus déroulants (ex. « À propos » → ONG Ylla / Ylla'Rose). Sur desktop : caché, révélé au survol ou au focus clavier. */ .ylla-nav__liste li{position:relative} .ylla-nav__liste .menu-item-has-children > a::after{ content:"";display:inline-block;margin-left:7px;vertical-align:middle; border:4px solid transparent;border-top-color:currentColor;border-bottom:0; } .ylla-nav__liste .sub-menu{ position:absolute;top:calc(100% + 8px);left:50%; transform:translateX(-50%) translateY(6px); min-width:210px;background:#fff;border:1px solid var(--ylla-ligne); border-radius:14px;box-shadow:0 12px 28px rgba(20,27,43,.14);padding:8px; display:flex;flex-direction:column;gap:2px;z-index:60; opacity:0;visibility:hidden;transition:opacity .18s,transform .18s; } /* Pont invisible : évite de perdre le survol dans l'espace au-dessus du menu. */ .ylla-nav__liste .sub-menu::before{ content:"";position:absolute;left:0;right:0;top:-8px;height:8px; } .ylla-nav__liste .menu-item-has-children:hover > .sub-menu, .ylla-nav__liste .menu-item-has-children:focus-within > .sub-menu{ opacity:1;visibility:visible;transform:translateX(-50%) translateY(0); } .ylla-nav__liste .sub-menu a{ border:0;padding:9px 14px;border-radius:8px;white-space:nowrap; } .ylla-nav__liste .sub-menu a:hover{background:var(--ylla-rose-clair);color:var(--ylla-rose)} .ylla-burger{display:none;margin-left:auto;background:none;border:0;padding:8px;color:var(--ylla-nuit)} /* 5. PIED DE PAGE ========================================================== */ .ylla-pied-page{background:var(--ylla-nuit);color:#C9CEDB;font-size:13px} .ylla-pied{display:grid;grid-template-columns:1.05fr .9fr .95fr 1.15fr .85fr;gap:30px;padding-top:34px;padding-bottom:26px} .ylla-pied h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.09em;color:#fff;margin-bottom:14px} .ylla-pied a{color:#C9CEDB} .ylla-pied a:hover{color:var(--ylla-rose);text-decoration:underline} .ylla-marque--pied .ylla-marque__nom{color:#fff;font-size:23px} .ylla-pied__signature{margin-top:14px;color:#A7AEC0;line-height:1.5} .ylla-liens-rapides{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px} .ylla-liens-rapides li{padding:3px 0} .ylla-contact li{display:flex;gap:10px;align-items:flex-start;padding:4px 0} .ylla-contact .ylla-icone{color:var(--ylla-rose);margin-top:4px} .ylla-partenaires{ background:#fff;border-radius:10px;padding:12px; display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:center; } .ylla-partenaires span{ display:grid;place-items:center;height:36px;border-radius:6px;background:#F4F5F8; color:#5C6478;font-size:9.5px;font-weight:700;text-align:center;padding:4px;line-height:1.2; } .ylla-partenaires img{max-height:36px;width:auto;margin:0 auto;object-fit:contain} .ylla-radio{display:flex;gap:12px;align-items:flex-start} .ylla-radio__logo{ width:56px;height:56px;border-radius:14px;background:var(--ylla-rose); display:grid;place-items:center;color:#fff;flex:none; } .ylla-radio p{margin:0;line-height:1.45} .ylla-copyright{ background:var(--ylla-nuit-2);text-align:center;padding:13px 20px; font-size:12.5px;color:#9AA2B5; } /* 6. ACCUEIL — HÉROS ======================================================= */ .ylla-heros{ background:linear-gradient(115deg,var(--ylla-heros-1) 0%,var(--ylla-heros-2) 55%,var(--ylla-heros-3) 100%); overflow:hidden; } .ylla-heros .ylla-wrap{ display:grid;grid-template-columns:1.02fr 1fr;gap:20px;align-items:center; padding-top:54px;padding-bottom:54px; } .ylla-heros h1{font-size:clamp(34px,3.6vw,50px);font-weight:800;letter-spacing:-.015em;color:var(--ylla-nuit)} .ylla-heros h1 em{font-style:normal;color:var(--ylla-rose)} .ylla-heros__trait{width:74px;height:4px;background:var(--ylla-rose);border-radius:2px;margin:26px 0 22px} .ylla-heros__texte p{max-width:440px;font-size:16px;color:#3E4457;margin:0 0 32px} .ylla-heros__actions{display:flex;flex-wrap:wrap;gap:16px} /* Grille explicite : le portrait ne peut jamais recouvrir l'hommage. */ .ylla-heros__visuel{ position:relative;display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-template-rows:auto auto;column-gap:18px;min-height:360px;padding-top:12px; } /* Le ratio 3/4 donne sa hauteur au portrait, photo présente ou non. Sans lui, l'aplat de remplacement hérite du height:100% de .ylla-vignette-vide, qui vaut zéro dès que la rangée n'a plus de hauteur définie — soit sous 900 px, où min-height passe à 0. D'où le height:auto, qui rend la main au ratio. */ .ylla-portrait{ grid-column:1;grid-row:1 / 3;align-self:end; width:100%;aspect-ratio:3 / 4;height:auto;object-fit:cover; -webkit-mask-image:linear-gradient(#000 84%,transparent); mask-image:linear-gradient(#000 84%,transparent); } .ylla-hommage{grid-column:2;grid-row:1;text-align:center;padding-right:96px;color:var(--ylla-nuit)} .ylla-hommage__nom{ margin:0;font-family:'Caveat',cursive;font-size:clamp(23px,2.2vw,31px); line-height:1.15;color:var(--ylla-rose); } .ylla-hommage__nom small{display:block;font-size:.72em;color:var(--ylla-nuit)} .ylla-hommage__coeur{color:var(--ylla-rose);margin-top:6px} .ylla-hommage__mot{ font-family:'Caveat',cursive;font-size:clamp(16px,1.4vw,19px); line-height:1.35;margin:8px 0 0;color:#4A4152; } /* La largeur doit être reprise ici : ylla_icone() écrit width et height en attributs sur le SVG, et sans règle CSS le ruban resterait figé à 96x128 à toutes les largeurs. Le clamp le fait rétrécir dès 1180 px, comme la maquette ; aspect-ratio et height:auto préservent le ratio 24/32. */ .ylla-ruban-deco{ position:absolute;right:0;top:0;color:var(--ylla-rose); width:clamp(62px,7vw,96px);aspect-ratio:24 / 32;height:auto; } .ylla-vignettes{ grid-column:2;grid-row:2;align-self:end; display:flex;gap:12px;justify-content:flex-end;padding-bottom:18px; } .ylla-vignettes figure{ margin:0;width:clamp(74px,8.4vw,124px);aspect-ratio:1;border-radius:50%; overflow:hidden;border:4px solid #fff;box-shadow:var(--ylla-ombre); } .ylla-vignettes img{width:100%;height:100%;object-fit:cover} /* 7. ACCUEIL — DOMAINES D'ACTION =========================================== */ .ylla-domaines{padding:34px 0 8px} .ylla-domaines__grille{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px} .ylla-domaine{ background:#fff;border:1px solid var(--ylla-ligne);border-radius:var(--ylla-rayon); padding:22px 22px 18px;display:flex;gap:16px;box-shadow:var(--ylla-ombre); transition:transform .2s,box-shadow .2s,border-color .2s; } .ylla-domaine:hover{transform:translateY(-4px);border-color:#F4C4DC;box-shadow:0 12px 26px rgba(226,24,123,.14)} .ylla-domaine__icone{color:var(--ylla-rose);margin-top:2px} .ylla-domaine h3{font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--ylla-rose);line-height:1.35} .ylla-domaine p{margin:10px 0 14px;font-size:13px;color:var(--ylla-texte-doux)} /* 8. ACCUEIL — PROJETS, CHIFFRES, ACTUALITÉS =============================== */ .ylla-bloc-double{padding:26px 0 34px} /* Sans projet publié, section-projets.php ne produit rien : le bloc « chiffres + actualités » devient alors le premier enfant de la grille et se tasse dans la piste étroite, la large restant vide. Seul, il prend donc toute la largeur. */ .ylla-bloc-double .ylla-wrap > :only-child{grid-column:1 / -1} .ylla-bloc-double .ylla-wrap{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.38fr);gap:24px;align-items:start; } .ylla-projets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .ylla-projet{position:relative;background:#fff;border-radius:10px;overflow:hidden;box-shadow:var(--ylla-ombre);display:flex;flex-direction:column} .ylla-projet__visuel{height:100px;background:var(--ylla-rose-pale)} .ylla-projet__visuel img{width:100%;height:100%;object-fit:cover} .ylla-projet__texte{padding:12px 14px 16px} .ylla-projet h4{color:var(--ylla-rose);font-size:15px;margin-bottom:6px} .ylla-projet p{margin:0;font-size:12.5px;color:var(--ylla-texte-doux)} .ylla-chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .ylla-chiffre{display:flex;align-items:center;gap:14px;padding:6px 10px;position:relative} .ylla-chiffre + .ylla-chiffre::before{content:"";position:absolute;left:0;top:12%;height:76%;width:1px;background:#F0CFE0} .ylla-chiffre .ylla-icone{color:var(--ylla-rose)} .ylla-chiffre__valeur{font-size:27px;font-weight:800;color:var(--ylla-rose);line-height:1} .ylla-chiffre__label{ font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em; color:var(--ylla-texte-doux);margin-top:5px;line-height:1.35; } .ylla-actus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .ylla-actu{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;position:relative} .ylla-actu + .ylla-actu::before{content:"";position:absolute;left:-11px;top:6%;height:88%;width:1px;background:#F0CFE0} /* Vignette et date empilées : la pastille ne peut pas recouvrir la photo. */ .ylla-actu__media{width:64px;display:flex;flex-direction:column;gap:7px} .ylla-actu__vignette{ width:64px;height:64px;border-radius:8px;overflow:hidden; background:var(--ylla-rose-pale);flex:none; } .ylla-actu__vignette img{width:100%;height:100%;object-fit:cover} .ylla-date{ background:var(--ylla-rose);color:#fff;border-radius:6px;padding:5px 4px; text-align:center;line-height:1;box-shadow:0 3px 8px rgba(226,24,123,.28); } .ylla-date b{display:block;font-size:13px} .ylla-date span{font-size:8px;text-transform:uppercase;letter-spacing:.06em} .ylla-actu__texte{min-width:0} .ylla-actu__texte h4{font-size:12.5px;color:var(--ylla-nuit);line-height:1.35;overflow-wrap:break-word} .ylla-actu__texte p{margin:6px 0 0;font-size:12px;color:var(--ylla-texte-doux)} /* 9. BANDEAU D'APPEL ======================================================= */ .ylla-bandeau{ background:var(--ylla-rose);color:#fff;border-radius:var(--ylla-rayon); max-width:calc(var(--ylla-max) - 64px);margin:0 auto 34px; } .ylla-bandeau__interieur{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:26px 34px} .ylla-appel{display:flex;gap:16px;align-items:flex-start} .ylla-appel > .ylla-icone{opacity:.9;margin-top:2px} .ylla-appel h3{font-size:17px;text-transform:uppercase;letter-spacing:.04em} /* Pas d'opacité sur le texte : à .92 le blanc se diluait dans le rose et tombait à 3,99:1, sous le seuil AA de 4,5. */ .ylla-appel p{margin:6px 0 14px;font-size:13.5px} .ylla-reseaux{display:flex;gap:14px} .ylla-reseaux a{ width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.16); display:grid;place-items:center;color:#fff;transition:background .2s,transform .2s; } .ylla-reseaux a:hover{background:#fff;color:var(--ylla-rose);transform:translateY(-2px)} /* 10. PAGES INTÉRIEURES, ARTICLES, LISTES ================================== */ .ylla-entete-page{ background:linear-gradient(115deg,var(--ylla-heros-1),var(--ylla-heros-2)); padding:44px 0 40px; } .ylla-entete-page h1{font-size:clamp(28px,3vw,42px);font-weight:800;color:var(--ylla-nuit)} .ylla-entete-page .ylla-heros__trait{margin-bottom:0} .ylla-page{padding:44px 32px 56px} /* Contenu éditorial : largeur de lecture limitée, rythme vertical régulier. */ .ylla-article__contenu{max-width:calc(var(--ylla-lecture) + 64px);margin-inline:auto;padding-top:40px} /* Contenu d'une page intérieure, composé en blocs. Grille à trois pistes : tout tombe dans la piste centrale, à la largeur de lecture, et une composition marquée .ylla-large occupe toute la largeur. C'est ce qui permet à une galerie ou à une grille de cartes de respirer sans que les paragraphes s'étirent sur 1376 px. */ .ylla-contenu{ display:grid; grid-template-columns:minmax(0,1fr) min(var(--ylla-lecture),100%) minmax(0,1fr); } .ylla-contenu > *{grid-column:2} /* width et margin-inline neutralisent les marges automatiques héritées (.ylla-bandeau notamment) : sur un élément de grille, margin:auto ramène le bloc à sa largeur de contenu au lieu de l'étirer. */ .ylla-contenu > .ylla-large{grid-column:1 / -1;width:100%;max-width:none;margin-inline:0} .ylla-article__contenu > *, .ylla-contenu > *{margin-block:0 1.1em} .ylla-article__contenu > h2, .ylla-contenu > h2{font-size:26px;margin-top:1.8em;color:var(--ylla-nuit)} /* Titre de section « à l'ancienne » (page Ylla'Rose) : rose, en majuscules, centré, encadré de deux tirets. Réservé aux h2 portant la classe. */ .ylla-contenu > h2.ylla-titre-centre{ color:var(--ylla-rose);text-transform:uppercase;text-align:center; font-weight:800;letter-spacing:.02em; display:flex;align-items:center;justify-content:center;gap:20px; margin:2.2em 0 1.1em; } .ylla-contenu > h2.ylla-titre-centre::before, .ylla-contenu > h2.ylla-titre-centre::after{ content:"";flex:0 0 auto;width:48px;height:4px; background:var(--ylla-rose);border-radius:2px; } @media (max-width:600px){ .ylla-contenu > h2.ylla-titre-centre{gap:12px} .ylla-contenu > h2.ylla-titre-centre::before, .ylla-contenu > h2.ylla-titre-centre::after{width:24px} } .ylla-article__contenu > h3, .ylla-contenu > h3{font-size:20px;margin-top:1.5em;color:var(--ylla-rose)} .ylla-article__contenu > ul,.ylla-article__contenu > ol, .ylla-contenu > ul,.ylla-contenu > ol{padding-left:1.3em;list-style:revert} .ylla-article__contenu li, .ylla-contenu li{margin-bottom:.4em} .ylla-contenu a{color:var(--ylla-rose);text-decoration:underline} .ylla-contenu > .ylla-large:not(:first-child){margin-top:1.8em} .ylla-article__contenu blockquote, .ylla-contenu > blockquote{ border-left:4px solid var(--ylla-rose);background:var(--ylla-rose-clair); margin:1.6em 0;padding:16px 22px;border-radius:0 8px 8px 0; } .ylla-article__contenu a{color:var(--ylla-rose);text-decoration:underline} .ylla-article__contenu img, .ylla-contenu img{border-radius:10px;margin-inline:auto} /* Vidéos intégrées (oEmbed) : lecteur responsive, plein cadre de lecture. L'iframe d'oEmbed arrive en taille fixe ; on le ramène au ratio 16/9. */ .ylla-article__contenu iframe, .ylla-contenu iframe{ display:block;width:100%;aspect-ratio:16/9;height:auto; border-radius:10px;margin:1.4em auto; } /* Widget de don HelloAsso : un formulaire haut, pas une vidéo — on annule le ratio 16/9 des iframes de contenu et on lui donne une vraie hauteur. */ .ylla-don{margin:1.6em 0} .ylla-contenu .ylla-don iframe{ width:100%;max-width:100%;height:1450px;aspect-ratio:auto; border:0;border-radius:10px;margin:0; } @media (max-width:600px){ .ylla-contenu .ylla-don iframe{height:1650px} } /* Galeries reconstituées : suites d'images d'un carrousel Elementor aplati, regroupées par ylla_galerie_figures(). Carrousel une diapo à la fois : image entière, jamais rognée ; les flèches (voir ylla.js) font défiler, chaque image reste cliquable pour l'agrandir (visionneuse). */ .ylla-carrousel{position:relative;margin:1.4em 0} .ylla-galerie-auto{ display:flex;flex-wrap:nowrap;margin:0; overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none;border-radius:10px;background:var(--ylla-rose-clair); } .ylla-galerie-auto::-webkit-scrollbar{display:none} /* Une image par vue : la figure occupe toute la largeur et centre l'affiche. */ .ylla-galerie-auto figure{ margin:0;flex:0 0 100%;scroll-snap-align:center; display:flex;align-items:center;justify-content:center; padding:10px;box-sizing:border-box; } .ylla-galerie-auto img{ display:block;width:auto;max-width:100%;height:auto;max-height:64vh; object-fit:contain;border-radius:6px;margin:0;cursor:zoom-in; } /* Flèches de navigation, superposées sur les côtés. */ .ylla-carrousel__fleche{ position:absolute;top:50%;transform:translateY(-50%);z-index:2; width:44px;height:44px;border:0;border-radius:999px;cursor:pointer; background:var(--ylla-rose);color:#fff;font-size:22px;line-height:1; display:flex;align-items:center;justify-content:center; box-shadow:0 2px 10px rgba(20,27,43,.25);transition:background .2s,opacity .2s; } .ylla-carrousel__fleche:hover{background:var(--ylla-rose-fonce)} .ylla-carrousel__fleche:disabled{opacity:0;pointer-events:none} .ylla-carrousel__prec{left:10px} .ylla-carrousel__suiv{right:10px} /* Indicateur de défilement sous le carrousel : points quand il y a peu de photos, compteur « n / total » au-delà (voir SEUIL_POINTS dans ylla.js). */ .ylla-carrousel__indic{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:12px} .ylla-carrousel__points{flex-wrap:wrap} .ylla-carrousel__point{ width:9px;height:9px;padding:0;border:0;border-radius:999px;cursor:pointer; background:var(--ylla-rose-pale);transition:background .2s,transform .2s; } .ylla-carrousel__point:hover{background:var(--ylla-rose-fonce)} .ylla-carrousel__point.est-actif{background:var(--ylla-rose);transform:scale(1.3)} .ylla-carrousel__compteur{ font-size:13px;font-weight:600;color:var(--ylla-texte-doux); background:var(--ylla-rose-clair);padding:3px 12px;border-radius:999px; } /* Galerie native (pages Galerie) transformée en carrousel par ylla.js : une photo à la fois, montrée en entier, comme le carrousel des articles. Sans JavaScript, la classe « is-carrousel » est absente et la grille reste. */ .ylla-galerie.wp-block-gallery.has-nested-images.is-carrousel{ display:flex;flex-wrap:nowrap;grid-template-columns:none;gap:0; overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:none; background:var(--ylla-rose-clair);border-radius:10px; /* WordPress ajoute is-layout-flex (flex-wrap:wrap) : sans nowrap, les diapos en 100% de large s'empilent au lieu de défiler à l'horizontale. */ } .ylla-galerie.wp-block-gallery.has-nested-images.is-carrousel::-webkit-scrollbar{display:none} .ylla-galerie.wp-block-gallery.has-nested-images.is-carrousel figure.wp-block-image{ flex:0 0 100%;scroll-snap-align:center;margin:0; display:flex;flex-direction:column;align-items:center;justify-content:center; padding:10px;box-sizing:border-box; } .ylla-galerie.wp-block-gallery.has-nested-images.is-carrousel figure.wp-block-image img{ width:auto;max-width:100%;height:auto;max-height:64vh;aspect-ratio:auto; object-fit:contain;border-radius:6px;cursor:zoom-in; } .ylla-galerie.wp-block-gallery.has-nested-images.is-carrousel figure.wp-block-image figcaption{ margin-top:10px;color:var(--ylla-nuit);font-weight:600;font-size:14px;text-align:center; } /* Visionneuse : superposition plein écran ouverte au clic d'une vignette. */ .ylla-lightbox{ position:fixed;inset:0;z-index:200;background:rgba(20,27,43,.93); display:grid;place-items:center;padding:24px; } .ylla-lightbox[hidden]{display:none} .ylla-lightbox img{max-width:92vw;max-height:88vh;width:auto;height:auto;border-radius:8px} .ylla-lightbox__fermer{ position:absolute;top:14px;right:20px;width:44px;height:44px; background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer; } .ylla-lightbox__fermer:hover{color:var(--ylla-rose)} /* Message des gabarits sans contenu éditorial : home, archive, recherche. */ .ylla-page > p{max-width:var(--ylla-lecture);margin-inline:auto} /* --- Compositions de blocs (voir inc/patterns.php) --------------------- */ .ylla-chapeau{font-size:18px;line-height:1.55;color:#3E4457} /* WordPress enveloppe les enfants d'un bloc Groupe dans un conteneur interne. Sans display:contents, toute grille posée sur le groupe ne verrait qu'un seul enfant — ce conteneur — et les cartes s'empileraient sur une colonne. */ .ylla-cartes > .wp-block-group__inner-container, .ylla-stats > .wp-block-group__inner-container, .ylla-logos > .wp-block-group__inner-container{display:contents} /* Grille de cartes. auto-fit plutôt qu'un nombre fixe : la composition accepte trois, quatre ou cinq cartes sans réglage. */ .ylla-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px} .ylla-carte-bloc{ background:#fff;border:1px solid var(--ylla-ligne);border-radius:var(--ylla-rayon); padding:22px 24px;box-shadow:var(--ylla-ombre); } .ylla-carte-bloc h3{font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--ylla-rose);line-height:1.35} .ylla-carte-bloc p{margin:10px 0 0;font-size:13.5px;color:var(--ylla-texte-doux)} /* Chiffres clés. Séparateurs verticaux comme sur l'accueil. */ .ylla-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px} .ylla-stat{padding:6px 16px;position:relative} .ylla-stat + .ylla-stat::before{ content:"";position:absolute;left:0;top:12%;height:76%;width:1px;background:#F0CFE0; } .ylla-stat__valeur{margin:0;font-size:27px;font-weight:800;color:var(--ylla-rose);line-height:1} .ylla-stat__label{ margin:5px 0 0;font-size:10.5px;font-weight:600;text-transform:uppercase; letter-spacing:.03em;color:var(--ylla-texte-doux);line-height:1.35; } /* Pastilles de partenaires, en attendant les vrais logos. */ .ylla-logos{ background:#fff;border:1px solid var(--ylla-ligne);border-radius:var(--ylla-rayon); padding:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px; } .ylla-logos p{ margin:0;display:grid;place-items:center;min-height:64px;padding:8px; border-radius:8px;background:#F4F5F8;text-align:center;line-height:1.25; font-size:12px;font-weight:700;color:var(--ylla-texte-doux); } .ylla-logos img{max-height:64px;width:auto;object-fit:contain} /* Galerie. La mise en page « flex » générée par WordPress reprend la main sur la classe columns-3 : on impose donc la grille du thème. Les sélecteurs sont volontairement longs, il faut passer devant .wp-block-gallery.has-nested-images. */ .ylla-galerie.wp-block-gallery.has-nested-images{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; } .ylla-galerie.wp-block-gallery.has-nested-images figure.wp-block-image{ width:auto;margin:0;display:flex;flex-direction:column; } .ylla-galerie.wp-block-gallery.has-nested-images figure.wp-block-image img{ width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover;border-radius:10px; cursor:zoom-in; /* agrandissement au clic, voir la visionneuse dans ylla.js */ } /* Légende sous la vignette (nom d'événement des galeries 2022-2023). */ .ylla-galerie.wp-block-gallery.has-nested-images figure.wp-block-image figcaption{ margin-top:8px;font-size:12.5px;line-height:1.35; color:var(--ylla-texte-doux);text-align:center; } /* Page Galerie : index des sous-galeries. Chaque carte est une couverture cliquable menant à une galerie d'événement. */ .ylla-galeries{ display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px;margin:1.6em 0; } /* Sélecteur préfixé par .ylla-contenu : passe devant « .ylla-contenu a », qui sinon soulignerait le titre en rose. */ .ylla-contenu .ylla-galerie-carte{ display:block;background:#fff;border-radius:var(--ylla-rayon);overflow:hidden; box-shadow:var(--ylla-ombre);text-decoration:none;color:var(--ylla-nuit); transition:transform .2s,box-shadow .2s; } .ylla-galerie-carte:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(20,27,43,.14)} .ylla-galerie-carte img{display:block;width:100%;aspect-ratio:4 / 3;object-fit:cover} .ylla-galerie-carte__titre{display:block;padding:14px 16px;font-weight:600;font-size:15px;line-height:1.35} /* Coordonnées de la page Contact : la même liste que le pied, mais sur fond clair. On neutralise la puce héritée de .ylla-contenu et on aligne le texte. */ .ylla-contact--page{list-style:none;margin:0;padding:0} .ylla-contact--page li{font-size:15px} .ylla-contact--page a{color:var(--ylla-rose)} /* Pages Éditions Ylla'Rose : affiches, ambassadeurs, logos partenaires. */ .ylla-affiche img{ display:block;max-width:min(100%,440px);height:auto; margin:0.4em auto;border-radius:12px;box-shadow:var(--ylla-ombre); } /* Section programme : affiche à gauche, cartes à côté (à droite). */ .ylla-programme{ display:grid;grid-template-columns:minmax(0,360px) 1fr; gap:28px;align-items:start;margin:1.8em 0; } .ylla-programme .ylla-affiche{margin:0} .ylla-programme .ylla-affiche img{max-width:100%;margin:0} .ylla-programme__cartes{ display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px; } @media (max-width:780px){ .ylla-programme{grid-template-columns:1fr} .ylla-programme .ylla-affiche img{max-width:min(100%,440px);margin-inline:auto} } .ylla-ambassadeurs{ display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:24px 18px;margin:1.6em 0; } .ylla-ambassadeur{text-align:center} .ylla-ambassadeur img{ width:130px;height:130px;object-fit:cover;border-radius:999px; margin:0 auto 12px;border:3px solid var(--ylla-rose-pale);display:block; } .ylla-ambassadeur__nom{display:block;font-weight:700;color:var(--ylla-nuit);font-size:15px} .ylla-ambassadeur__role{display:block;font-size:12.5px;color:var(--ylla-texte-doux);margin-top:4px;line-height:1.35} .ylla-logos-grille{ display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:16px;align-items:center;margin:1.6em 0; } .ylla-logos-grille img{width:100%;max-width:110px;height:auto;margin:0 auto;border-radius:8px;display:block} /* Grille de vidéos (pages Vidéos et Podcasts) : embeds YouTube responsives. */ .ylla-videos{ display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px;margin:1.6em 0; } .ylla-video{margin:0} .ylla-contenu .ylla-videos iframe{ width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:12px; margin:0;display:block;box-shadow:var(--ylla-ombre); } .ylla-video__titre{margin:10px 0 0;font-size:14px;font-weight:600;color:var(--ylla-nuit);line-height:1.35} /* Flipbook dFlip (rapport d'activité) : réserve la hauteur et centre. */ .ylla-flipbook{margin:1.8em 0} .ylla-flipbook ._df_book{min-height:500px;margin-inline:auto} /* En-tête d'édition : affiche de garde et rapport d'activité côte à côte. */ .ylla-contenu .ylla-garde{align-items:flex-start;gap:28px;margin:1em 0 1.8em} .ylla-garde .ylla-affiche{margin:0} .ylla-garde .ylla-affiche img{max-width:100%;margin:0} .ylla-garde .ylla-flipbook{margin:0} .ylla-sous-titre{ color:var(--ylla-rose);text-align:center;font-weight:800; text-transform:uppercase;font-size:18px;letter-spacing:.02em;margin:0 0 12px; } /* Paliers de mécénat (page 2024) : trois formules côte à côte. */ .ylla-tarifs{ display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px;margin:1.6em 0; } .ylla-tarif{ background:#fff;border:1px solid var(--ylla-ligne);border-radius:var(--ylla-rayon); padding:24px 20px;box-shadow:var(--ylla-ombre);display:flex;flex-direction:column; } .ylla-tarif__nom{color:var(--ylla-rose);text-transform:uppercase;font-weight:800;font-size:18px;letter-spacing:.04em;text-align:center} .ylla-tarif__prix{font-size:30px;font-weight:800;color:var(--ylla-nuit);text-align:center;margin:6px 0 2px} .ylla-tarif__note{font-size:12px;color:var(--ylla-texte-doux);text-align:center;margin-bottom:16px} .ylla-tarif ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;flex:1} .ylla-tarif li{font-size:13px;color:var(--ylla-texte);padding-left:22px;position:relative;line-height:1.4} .ylla-tarif li::before{content:"✓";position:absolute;left:0;color:var(--ylla-rose);font-weight:700} /* Option non incluse dans la formule : grisée et barrée. */ .ylla-tarif li.est-barre{color:var(--ylla-texte-doux);text-decoration:line-through;opacity:.7} .ylla-tarif li.est-barre::before{content:"✕";color:var(--ylla-ligne)} /* Formule mise en avant (Gold), comme sur l'original. */ .ylla-tarif--phare{border-color:var(--ylla-rose);box-shadow:0 10px 26px rgba(226,24,123,.16)} .ylla-tarif__cta{margin-top:18px;text-align:center} /* Bouton plein dans le contenu : garder son texte blanc (sinon la règle « .ylla-contenu a » le repasse en rose souligné, donc invisible). */ .ylla-contenu a.ylla-btn{text-decoration:none} .ylla-contenu a.ylla-btn--plein, .ylla-contenu a.ylla-btn--plein:hover{color:#fff} /* Bandeau d'appel en version simple : une seule colonne, pas les trois de l'accueil, donc son propre rembourrage. */ .ylla-bandeau--simple{padding:26px 34px;max-width:none} .ylla-bandeau--simple h3{font-size:17px;text-transform:uppercase;letter-spacing:.04em} .ylla-bandeau--simple p{margin:6px 0 16px;font-size:13.5px;opacity:.92} .ylla-bandeau--simple .wp-block-button__link{ display:inline-flex;align-items:center;padding:11px 22px;border-radius:999px; background:#fff;color:var(--ylla-rose);border:2px solid #fff; font-weight:600;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase; text-decoration:none;transition:background .2s,color .2s; } .ylla-bandeau--simple .wp-block-button__link:hover{background:transparent;color:#fff} .ylla-article__entete{ background:linear-gradient(115deg,var(--ylla-heros-1),var(--ylla-heros-2)); padding:44px 0 40px;text-align:center; } .ylla-article__entete h1{font-size:clamp(26px,3vw,40px);max-width:var(--ylla-lecture);margin-inline:auto;color:var(--ylla-nuit)} .ylla-article__date{ display:block;margin-bottom:12px;font-size:12px;font-weight:600; text-transform:uppercase;letter-spacing:.08em;color:var(--ylla-rose); } /* L'image ne porte plus que son chevauchement du bandeau : l'espace avant le texte est donné par .ylla-article__contenu, sans quoi un article sans image à la une voit son premier paragraphe coller au dégradé. */ .ylla-article__image{margin:-28px auto 0;max-width:calc(var(--ylla-lecture) + 64px)} .ylla-article__image img{border-radius:var(--ylla-rayon);box-shadow:var(--ylla-ombre)} .ylla-article__pied{max-width:var(--ylla-lecture);padding-bottom:56px} .ylla-nav-articles{ display:flex;justify-content:space-between;gap:20px;margin-top:28px; padding-top:20px;border-top:1px solid var(--ylla-ligne);font-size:13px;font-weight:600; } /* Liste d'actualités : des lignes pleine largeur, pas des cartes. Les visuels sont hétéroclites — coupures de presse en portrait, affiches carrées, photos en paysage. Une grille de cartes les alignait sur une même hauteur et rognait n'importe où ; un cadre fixe recadré depuis le haut les rend comparables sans les mutiler. */ .ylla-liste{max-width:var(--ylla-max);margin-inline:auto} .ylla-ligne{ position:relative;display:flex;gap:24px;align-items:flex-start;padding:22px 0; } /* Séparateur fin entre les lignes, jamais avant la première. */ .ylla-ligne + .ylla-ligne{border-top:1px solid var(--ylla-ligne)} .ylla-ligne__visuel{ flex:none;width:120px;height:90px;border-radius:8px;overflow:hidden; background:var(--ylla-rose-pale); } /* object-position:top — sur un scan de journal, le titre est en haut de page. */ .ylla-ligne__visuel img{width:100%;height:100%;object-fit:cover;object-position:top} /* Sans vignette, le texte occupe toute la largeur : aucun cadre vide. */ .ylla-ligne__texte{flex:1;min-width:0} .ylla-ligne__date{ display:block;font-size:11px;font-weight:600;text-transform:uppercase; letter-spacing:.07em;color:var(--ylla-rose); } .ylla-ligne h2{margin:6px 0 0;font-size:19px;line-height:1.3;color:var(--ylla-nuit)} .ylla-ligne h2 a{text-decoration:none} .ylla-ligne:hover h2{color:var(--ylla-rose)} .ylla-ligne p{margin:8px 0 0;font-size:14px;color:var(--ylla-texte-doux)} /* flex:1 pour que le bloc occupe toute la hauteur restante de la carte — sans lui, le margin-top:auto du lien plus bas n'a aucun espace à repousser. */ .wp-block-search__inside-wrapper, .search-form{display:flex;gap:8px;max-width:420px;margin:0 auto 32px} .search-field{ flex:1;padding:12px 16px;border:1px solid var(--ylla-ligne);border-radius:999px; font-family:inherit;font-size:14px; } .search-submit{ padding:12px 22px;border:0;border-radius:999px;background:var(--ylla-rose);color:#fff; font-family:inherit;font-weight:600;cursor:pointer; } /* the_posts_pagination() enveloppe les numéros dans .nav-links : c'est LUI qui doit être la rangée flex, pas le