/* Theme Name: S'Espéri Theme URI: https://alexia-jacquard-seo.fr Author: Alexia Jacquard Author URI: https://alexia-jacquard-seo.fr Description: Thème sur mesure de l'École Montessori Libre S'Espéri, Pertuis. Construit à partir de la maquette statique validée en septembre 2026. Version: 1.4.0 Requires at least: 6.4 Requires PHP: 8.0 License: GPL-2.0-or-later Text Domain: sesperi */ /* ========================================================================== Le CSS ci-dessous est repris de la maquette statique, dédoublonné. Les variables :root sont l'union des 12 pages (aucune valeur ne divergeait). Les blocs "Ajustements par page" en fin de fichier corrigent les classes qui portaient un style différent selon la page. ========================================================================== */ :root { --border: #e8ddd5; --cream: #FDFAF6; --green-dark: #2a4820; --green-pale: #EFF5EA; --salmon: #E8927A; --salmon-dark: #7a2e22; --salmon-pale: #FAE9E4; --sans: 'Nunito','Helvetica Neue',sans-serif; --serif: 'Lora',Georgia,serif; --teal: #4A9B8F; --teal-dark: #2d6b63; --teal-deep: #1a3d39; --teal-mid: #c4e4de; --teal-pale: #E8F5F2; --text: #2a2320; --text-light: #8a7f7a; --text-mid: #5a4f4a; --warm-white: #FBF8F4; --yellow: #F2C46D; --yellow-dk: #7a5200; --yellow-pale: #FFF8E8; } /* ---------- Socle commun ---------- */ *,*::before,*::after { box-sizing:border-box;margin:0;padding:0; } html { scroll-behavior:smooth; } body { font-family:var(--serif);font-size:16px;line-height:1.75;color:var(--text);background:var(--cream);-webkit-font-smoothing:antialiased; } img { display:block;max-width:100%;height:auto; } a { color:inherit; } .nav { background:#fff;border-bottom:1px solid var(--border);padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:88px;position:sticky;top:0;z-index:200; } .nav-logo { display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0; } .nav-logo img { width:80px;height:80px;object-fit:contain; } .nav-brand { font-family:var(--sans);line-height:1.25; } .nav-brand strong { display:block;font-size:13px;font-weight:700;color:var(--teal-dark); } .nav-brand span { display:block;font-size:11px;color:var(--text-light); } .nav-links { display:flex;gap:1.5rem;list-style:none; } .nav-links a { font-family:var(--sans);font-size:13px;font-weight:600;color:var(--text-mid);text-decoration:none;transition:color .2s; } .nav-links a:hover,.nav-links a.active { color:var(--teal); } .nav-cta { background:var(--teal);color:#fff;border:none;padding:8px 18px;border-radius:22px;font-family:var(--sans);font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap; } .nav-cta:hover { background:var(--teal-dark); } .nav-burger { min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px; } .nav-burger span { display:block;width:24px;height:2px;background:var(--text);border-radius:2px; } .nav-mobile { display:none;position:fixed;inset:88px 0 0 0;background:#fff;z-index:199;padding:1.5rem 2rem;flex-direction:column;border-top:1px solid var(--border);overflow-y:auto; } .nav-mobile.open { display:flex; } .nav-mobile a { font-family:var(--sans);font-size:16px;font-weight:600;color:var(--text-mid);text-decoration:none;padding:1rem 0;border-bottom:1px solid var(--border); } .nav-mobile .nav-cta { margin-top:1.5rem;text-align:center;padding:12px;border-radius:26px;border:none; } .page-header { background:var(--teal-pale);padding:3.5rem 2rem 3rem;text-align:center; } .page-header .breadcrumb { font-family:var(--sans);font-size:12px;color:var(--text-light);margin-bottom:1rem; } .page-header .breadcrumb a { color:var(--teal);text-decoration:none; } .page-header h1 { font-family:var(--serif);font-size:32px;font-weight:400;color:var(--teal-deep);margin-bottom:.75rem;line-height:1.2; } .page-header h1 em { font-style:italic;color:var(--teal); } .page-header p { font-family:var(--sans);font-size:15px;color:var(--teal-dark);max-width:620px;margin:0 auto; } .inner { max-width:900px;margin:0 auto; } body.p-ecole .inner { max-width:960px; } /* seule page a diverger dans la maquette */ .content-section { padding:4rem 2rem; } .content-section.alt { background:#fff; } .section-title { font-family:var(--serif);font-size:24px;font-weight:400;color:var(--teal-deep);margin-bottom:.4rem; } .section-sub { font-family:var(--sans);font-size:14px;color:var(--text-light);margin-bottom:2rem; } .prose p { font-family:var(--sans);font-size:15px;color:var(--text-mid);line-height:1.85;margin-bottom:1rem; } .prose h3 { font-family:var(--serif);font-size:19px;font-weight:400;color:var(--teal-deep);margin:2rem 0 .6rem; } .prose a { color:var(--teal); } .prose a.btn-primary { color:#fff; } .prose a.btn-white { color:var(--teal-deep); } .prose ul { font-family:var(--sans);font-size:15px;color:var(--text-mid);line-height:1.8;margin:0 0 1rem 1.25rem; } .prose li { margin-bottom:.4rem; } .btn-primary { background:var(--teal);color:#fff;border:none;padding:12px 26px;border-radius:26px;font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;transition:background .2s; } .btn-primary:hover { background:var(--teal-dark); } .btn-secondary { background:transparent;color:var(--teal);border:1.5px solid var(--teal);padding:12px 26px;border-radius:26px;font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;transition:all .2s; } .btn-secondary:hover { background:var(--teal-pale); } .card { background:#fff;border:0.5px solid var(--border);border-radius:12px;padding:1.5rem;font-family:var(--sans); } .card h3 { font-family:var(--sans);font-size:15px;font-weight:700;color:var(--teal-deep);margin-bottom:.5rem; } .card p { font-family:var(--sans);font-size:14px;color:var(--text-mid);line-height:1.7; } .info-box { background:var(--teal-pale);border:1px solid var(--teal-mid);border-radius:12px;padding:1.25rem 1.5rem;font-family:var(--sans);font-size:14px;color:var(--teal-dark);line-height:1.7;margin:1.5rem 0; } .info-box strong { color:var(--teal-deep); } .cta-section { background:var(--teal-deep);color:#fff;padding:4rem 2rem;text-align:center; } .cta-section h2 { font-family:var(--serif);font-size:26px;font-weight:400;margin-bottom:1rem; } .cta-section p { font-family:var(--sans);font-size:14px;opacity:.85;max-width:520px;margin:0 auto 1.75rem;line-height:1.7; } .btn-white { background:#fff;color:var(--teal-deep);border:none;padding:12px 28px;border-radius:26px;font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block; } footer { background:#1a3d39;color:#cfe4e0;padding:3rem 2rem 2rem;font-family:var(--sans); } .footer-grid { display:grid;grid-template-columns:1.6fr repeat(3,minmax(0,1fr));gap:2.5rem;margin-bottom:2rem; } footer h4 { color:#e8f5f2;font-size:13px;font-weight:700;margin-bottom:12px; } footer a { color:#d8ece8;text-decoration:none;display:block;margin-bottom:6px;font-size:12px;transition:color .2s; } footer a:hover { color:#ffffff;text-decoration:underline;text-underline-offset:3px; } .footer-desc { font-size:12px;color:#b9d4cf;line-height:1.65;margin-bottom:10px; } .footer-villes { font-size:11px;color:#a8c8c2;line-height:1.9; } .footer-bottom { border-top:1px solid #2a5a52;padding-top:1.25rem;color:#b9d4cf;text-align:center;font-size:11px;line-height:1.7; } .footer-bottom a { color:#d8ece8;text-decoration:none;display:inline;margin:0 4px; } .qf-table-wrap { overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:#fff;margin:1.5rem 0; } .qf-table { width:100%;border-collapse:collapse;font-family:var(--sans);font-size:14px;min-width:480px; } /* En-tete : plus haut et bien detache du corps, pour qu'on sache en un coup d'oeil ce que chaque colonne annonce. */ .qf-table thead th { background:var(--teal-pale);color:var(--teal-deep);text-align:left;padding:14px 18px;font-weight:700;font-size:12px;letter-spacing:.4px;text-transform:uppercase;border-bottom:2px solid var(--teal); } /* Lignes plus aerees : c'est ce qui manquait le plus a la lecture. */ .qf-table td { padding:14px 18px;border-top:1px solid var(--border);color:var(--text-mid);line-height:1.5; } .qf-table tbody tr:nth-child(even) { background:var(--warm-white); } .qf-table tbody tr:hover { background:var(--teal-pale); } /* Premiere colonne : c'est l'intitule, il porte la lecture. Elle est balisee en , seule forme valide en HTML5 et la seule qu'un lecteur d'ecran rattache reellement a la cellule qu'il annonce. */ .qf-table td:first-child, .qf-table tbody th { font-weight:700;color:var(--teal-deep); } .qf-table tbody th { text-align:left;padding:14px 18px;border-top:1px solid var(--border);font-family:var(--sans);font-size:14px;line-height:1.5;background:transparent; } /* Derniere colonne d'un tableau a deux colonnes : c'est le montant ou la reponse. Aligne a droite et en chiffres tabulaires, les valeurs se comparent d'un coup d'oeil au lieu de flotter au milieu de la cellule. */ .qf-table tr > *:last-child:nth-child(2) { text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap; } .qf-table tbody tr:last-child td { border-bottom:0; } /* A la conversion, l'editeur enveloppe chaque tableau dans une
: c'est elle qui porte desormais le cadre arrondi. */ figure.wp-block-table.qf-table { overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:#fff;margin:1.5rem 0;padding:0; } figure.wp-block-table.qf-table > table { margin:0;border-radius:0; } figure.wp-block-table.qf-table > table thead th:first-child { border-top-left-radius:14px; } figure.wp-block-table.qf-table > table thead th:last-child { border-top-right-radius:14px; } .loisirs-features { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:1.5rem 0; } .loisirs-feat { background:#fff;border:0.5px solid var(--border);border-radius:12px;padding:1.1rem;text-align:center;font-family:var(--sans); } .loisirs-feat .ic { font-size:24px;margin-bottom:6px; } .loisirs-feat strong { display:block;font-size:13px;color:var(--teal-deep);margin-bottom:3px; } .loisirs-feat span { font-size:12px;color:var(--text-light);line-height:1.5; } footer .footer-head { font-family:var(--sans);font-size:14px;font-weight:700;color:#fff;margin-bottom:.9rem; } .horaires-duo { display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.75rem 0; } .horaires-carte { border:1px solid var(--border);border-radius:16px;padding:1.5rem;background:#fff;position:relative;overflow:hidden; } .horaires-carte-fort { border-color:var(--teal);background:var(--teal-pale); } .horaires-carte::after { content:"";position:absolute;right:-28px;top:-28px;width:96px;height:96px;border-radius:50%;background:var(--teal);opacity:.06; } .prose .horaires-tag,.horaires-tag { font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--teal);margin-bottom:.6rem; } .prose .horaires-heure,.horaires-heure { font-family:var(--serif);font-size:28px;font-weight:500;line-height:1.2;color:var(--teal-deep);margin-bottom:.7rem; } .horaires-heure span { font-size:14px;color:var(--text-light);font-style:italic; } .prose .horaires-quand,.horaires-quand { font-family:var(--sans);font-size:14px;font-weight:600;color:var(--text);margin-bottom:.45rem;line-height:1.55; } .prose .horaires-detail,.horaires-detail { font-family:var(--sans);font-size:13px;color:var(--text-mid);line-height:1.6; } .header-cta { margin-top:1.1rem; } .header-cta .btn-primary { display:inline-block; } .breadcrumb { font-family:var(--sans);font-size:12px;color:var(--text-light);margin-bottom:1rem; } .breadcrumb a { color:var(--teal);text-decoration:none; } .content { max-width:800px;margin:0 auto;padding:4rem 2rem; } /* Gabarit des pages. Le contenu importe ses propres sections, qui portent deja leur largeur et leurs marges : .entry-content ne doit donc rien contraindre. En revanche un bloc ajoute a la main dans l'editeur arrive nu, sans section autour. Ces blocs-la sont recentres sur la largeur de lecture. */ .entry-content > p, .entry-content > h2, .entry-content > h3, .entry-content > h4, .entry-content > ul, .entry-content > ol, .entry-content > table, .entry-content > figure, .entry-content > blockquote, .entry-content > .wp-block-image, .entry-content > .wp-block-table, .entry-content > .wp-block-buttons, .entry-content > .wp-block-embed, .entry-content > .wp-block-separator { max-width:800px;margin-inline:auto;padding-inline:2rem; } .entry-content > p:first-child, .entry-content > h2:first-child { margin-top:4rem; } .entry-content > p:last-child, .entry-content > ul:last-child, .entry-content > ol:last-child, .entry-content > table:last-child, .entry-content > figure:last-child { margin-bottom:4rem; } .agenda-empty { background:var(--warm-white);border:1.5px dashed var(--border);border-radius:12px;padding:3rem;text-align:center;font-family:var(--sans);color:var(--text-light);margin-bottom:3rem; } .agenda-empty p { font-size:14px;line-height:1.7; } .agenda-note { background:#fff;border:0.5px solid var(--border);border-radius:12px;padding:1.5rem;font-family:var(--sans);font-size:14px;color:var(--text-mid);line-height:1.75; } .agenda-note strong { color:var(--text); } .agenda-note a { color:var(--teal); } .agenda-embed { background:#fff;border:0.5px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:2rem; } .agenda-embed iframe { display:block;width:100%; } .agenda-embed-note { font-family:var(--sans);font-size:11px;color:var(--text-light);padding:.75rem 1rem;background:var(--warm-white);border-top:1px solid var(--border); } .agenda-liste { list-style:none;max-width:760px;margin:0 auto;padding:0; } /* La carte est accrochee a la ligne de liste elle-meme, pas a une classe posee dessus : un evenement ajoute plus tard depuis l'editeur s'affiche donc correctement sans que personne ait a penser a une classe. */ .agenda-liste > li, .agenda-item { display:flex;gap:1.25rem;align-items:flex-start;padding:1.15rem 1.25rem;border:1px solid var(--border);border-radius:14px;background:#fff;margin-bottom:.85rem; } /* Une date de portes ouvertes est reperable a son badge jaune. */ .agenda-liste > li:has(.agenda-badge), .agenda-item.agenda-jpo { border-color:var(--teal);background:var(--teal-pale); } .agenda-date { flex-shrink:0;width:58px;text-align:center;font-family:var(--sans);line-height:1.1; } .agenda-jour { display:block;font-size:26px;font-weight:700;color:var(--teal-deep); } .agenda-mois { display:block;font-size:11px;font-weight:700;letter-spacing:1px;color:var(--teal); } .agenda-heure { font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--text-light);margin-bottom:.15rem; } .agenda-corps h3 { font-family:var(--serif);font-size:19px;font-weight:400;color:var(--teal-deep);margin-bottom:.2rem;line-height:1.3; } .agenda-lieu { font-family:var(--sans);font-size:13px;color:var(--text-mid); } .agenda-badge { display:inline-block;background:var(--yellow);color:var(--yellow-dk);font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 9px;border-radius:11px;vertical-align:middle;margin-left:6px; } .contact-grid { display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem; } .contact-card { background:#fff;border:0.5px solid var(--border);border-radius:14px;padding:2rem;text-align:center;font-family:var(--sans); } .contact-ic { font-size:34px;margin-bottom:.75rem; } .contact-card h3 { font-family:var(--serif);font-size:20px;font-weight:400;color:var(--teal-deep);margin-bottom:.5rem; } .contact-card p { font-size:13.5px;color:var(--text-mid);line-height:1.7;margin-bottom:1rem; } .contact-mail { display:inline-block;background:var(--teal-pale);color:var(--teal-dark);font-weight:700;font-size:14px;padding:8px 18px;border-radius:22px;text-decoration:none;word-break:break-all; } .contact-mail:hover { background:var(--teal-mid); } .contact-adresse { background:#fff;border:0.5px solid var(--border);border-radius:14px;padding:1.75rem;font-family:var(--sans);text-align:center; } .contact-adresse h3 { font-family:var(--serif);font-size:18px;font-weight:400;color:var(--teal-deep);margin-bottom:.75rem; } .contact-adresse p { font-size:14px;color:var(--text-mid);line-height:1.7; } .faq-item { background:#fff;border:0.5px solid var(--border);border-radius:12px;margin-bottom:12px;overflow:hidden; } .faq-item summary { font-family:var(--sans);font-size:15px;font-weight:700;color:var(--teal-deep);padding:1.1rem 1.4rem;cursor:pointer;list-style:none;position:relative;padding-right:2.5rem; } .faq-item summary::-webkit-details-marker { display:none; } .faq-item summary::after { content:'+';position:absolute;right:1.4rem;top:1rem;font-size:20px;color:var(--teal);transition:transform .2s; } .faq-item[open] summary::after { content:'\2212'; } .faq-answer { padding:0 1.4rem 1.2rem; } .faq-answer p { font-family:var(--sans);font-size:14px;color:var(--text-mid);line-height:1.75; } .galerie-section { padding:3rem 2rem;max-width:1100px;margin:0 auto; } .galerie-category { margin-bottom:3rem; } .galerie-category h2 { font-family:var(--serif);font-size:20px;font-weight:400;color:var(--teal-deep);margin-bottom:1.25rem;padding-bottom:.5rem;border-bottom:1px solid var(--border); } .photo-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; } .photo-item { border-radius:10px;overflow:hidden;aspect-ratio:4/3;cursor:pointer; } .photo-item img { width:100%;height:100%;object-fit:cover;transition:transform .3s; } .photo-item:hover img { transform:scale(1.04); } .photo-item.tall { aspect-ratio:3/4; } .lightbox { display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:1000;align-items:center;justify-content:center;padding:1rem; } .lightbox.active { display:flex; } .lightbox img { max-width:90vw;max-height:88vh;border-radius:8px;object-fit:contain; } .lightbox-close { position:absolute;top:1.25rem;right:1.5rem;background:none;border:none;color:#fff;font-size:28px;cursor:pointer;line-height:1;font-family:var(--sans); } .nav-links a:hover { color:var(--teal); } .nav-mobile a:hover { color:var(--teal); } .hero-wrap { background:var(--teal-pale);position:relative;overflow:hidden; } .hero-wrap::before { content:'';position:absolute;top:-60px;right:-80px;width:420px;height:420px;background:radial-gradient(circle,rgba(74,155,143,0.12) 0%,transparent 70%);border-radius:50%;pointer-events:none; } .hero-wrap::after { content:'';position:absolute;bottom:-40px;left:-60px;width:300px;height:300px;background:radial-gradient(circle,rgba(242,196,109,0.15) 0%,transparent 70%);border-radius:50%;pointer-events:none; } .hero { max-width:1080px;margin:0 auto;padding:4rem 2rem 4.5rem;display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;position:relative;z-index:1; } .hero-text { ; } .hero-badge { display:inline-block;background:var(--yellow-pale);color:var(--yellow-dk);border:1px solid #f0d080;font-family:var(--sans);font-size:12px;font-weight:700;padding:5px 14px;border-radius:20px;margin-bottom:1.25rem; } .hero h1 { font-family:var(--serif);font-size:38px;font-weight:400;color:var(--teal-deep);line-height:1.18;margin-bottom:1.1rem; } .hero h1 em { font-style:italic;color:var(--teal); } .hero-sub { font-size:15px;color:var(--teal-dark);margin-bottom:0.75rem;line-height:1.75; } .hero-local { font-family:var(--sans);font-size:13px;color:var(--text-light);font-style:italic;margin-bottom:2rem; } .hero-btns { display:flex;gap:12px;flex-wrap:wrap; } .hero-visual { position:relative;display:flex;align-items:center;justify-content:center; } .hero-medallion-wrap { position:relative;width:320px;height:320px;display:flex;align-items:center;justify-content:center; } .hero-medallion { width:260px;height:260px;border-radius:50%;background:#fff;border:5px solid #fff;box-shadow:0 8px 40px rgba(74,155,143,0.18),0 2px 12px rgba(0,0,0,0.07);overflow:hidden;display:flex;align-items:center;justify-content:center;z-index:2;position:relative; } .hero-medallion img { width:88%;height:88%;object-fit:contain; } .hero-med-ring { position:absolute;border-radius:50%;border:1.5px dashed rgba(74,155,143,0.30);pointer-events:none; } .hero-med-ring-1 { width:300px;height:300px;top:50%;left:50%;transform:translate(-50%,-50%);animation:spin-slow 30s linear infinite; } .hero-med-ring-2 { width:340px;height:340px;top:50%;left:50%;transform:translate(-50%,-50%);border-color:rgba(242,196,109,0.25);animation:spin-slow 45s linear infinite reverse; } @keyframes spin-slow { from { transform:translate(-50%,-50%) rotate(0deg);} to { transform:translate(-50%,-50%) rotate(360deg);}; } .enfants-section { background:var(--salmon-pale);padding:4.5rem 2rem; } .enfants-grid { max-width:1060px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:3.5rem;align-items:center; } .enfants-pills { display:flex;flex-direction:column;gap:14px; } .pill { display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:14px;padding:1rem 1.25rem;border-left:4px solid transparent; } .pill-teal { border-left-color:var(--teal); } .pill-salmon { border-left-color:var(--salmon); } .pill-yellow { border-left-color:var(--yellow); } .pill-green { border-left-color:#8BAF7A; } .pill-icon { font-size:20px;margin-top:1px;flex-shrink:0;line-height:1; } .pill-text strong { display:block;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px; } .pill-text span { font-family:var(--sans);font-size:12px;color:var(--text-light);line-height:1.5; } .enfants-texte { ; } .enfants-texte h2 { font-family:var(--serif);font-size:26px;font-weight:400;color:var(--salmon-dark);line-height:1.35;margin-bottom:1.25rem; } .enfants-texte h2 em { font-style:italic; } .enfants-texte p { font-size:15px;color:var(--text-mid);line-height:1.85;margin-bottom:1rem; } .enfants-texte p:last-of-type { margin-bottom:0; } .enfants-quote { background:#fff;border-left:3px solid var(--salmon);border-radius:0 10px 10px 0;padding:1.1rem 1.4rem;margin-top:1.75rem;font-style:italic;font-size:15px;color:var(--salmon-dark);line-height:1.65; } .enfants-quote cite { display:block;font-family:var(--sans);font-size:12px;font-style:normal;color:var(--text-light);margin-top:6px; } .section-header { margin-bottom:2.25rem; } .section-header h2 { font-family:var(--serif);font-size:25px;font-weight:400;color:var(--teal-deep);margin-bottom:0.35rem; } .section-header p { font-family:var(--sans);font-size:14px;color:var(--text-light); } .ecole-section { background:#fff;padding:4rem 2rem; } .ages-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; } .age-card { border-radius:14px;padding:1.75rem; } .age-card-t { background:var(--salmon-pale); } .age-card-m { background:var(--teal-pale); } .age-card-e { background:var(--yellow-pale); } .age-card h3 { font-family:var(--sans);font-size:14px;font-weight:700;margin-bottom:8px; } .age-card-t h3 { color:var(--salmon-dark); } .age-card-m h3 { color:var(--teal-dark); } .age-card-e h3 { color:var(--yellow-dk); } .age-card p { font-family:var(--sans);font-size:13px;color:var(--text-mid);line-height:1.65; } .actions-section { background:var(--warm-white);padding:4rem 2rem; } .actions-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; } .action-card { background:#fff;border:0.5px solid var(--border);border-radius:14px;overflow:hidden; } .action-card .action-img { height:160px;overflow:hidden; } .action-card .action-img img { width:100%;height:100%;object-fit:cover;transition:transform .3s; } .action-card:hover .action-img img { transform:scale(1.03); } .action-img.no-photo { display:flex;align-items:center;justify-content:center;font-size:44px; } .action-img.np-automne { background:var(--yellow-pale); } .action-img.np-cinema { background:var(--teal-pale); } .action-img.np-jeux { background:var(--salmon-pale); } .action-body { padding:1.25rem; } .action-tag { font-family:var(--sans);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:8px; } .at-noel { color:var(--salmon); } .at-vide { color:var(--teal); } .at-jeux { color:var(--yellow-dk); } .action-card h3 { font-family:var(--serif);font-size:15px;font-weight:400;color:var(--text);margin-bottom:8px;line-height:1.4; } .action-card p { font-family:var(--sans);font-size:13px;color:var(--text-mid);line-height:1.65; } .action-note { display:inline-block;margin-top:10px;font-family:var(--sans);font-size:11px;color:var(--teal-dark);background:var(--teal-pale);border-radius:8px;padding:3px 10px; } .infos-section { background:#fff;padding:4rem 2rem; } .infos-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; } .info-card { background:var(--cream);border:0.5px solid var(--border);border-radius:12px;padding:1.4rem; } .info-label { font-family:var(--sans);font-size:11px;text-transform:uppercase;letter-spacing:0.9px;color:var(--teal);font-weight:700;margin-bottom:9px; } .info-card p { font-family:var(--sans);font-size:13px;color:var(--text-mid);line-height:1.7; } .info-card strong { color:var(--text); } .don-section { background:var(--yellow-pale);border-top:1px solid #f0d080;border-bottom:1px solid #f0d080;padding:3.5rem 2rem; } .don-inner { max-width:820px;margin:0 auto;text-align:center; } .don-section .section-tag { color:var(--yellow-dk); } .don-section h2 { font-family:var(--serif);font-size:24px;font-weight:400;color:var(--yellow-dk);margin-bottom:1rem;line-height:1.35; } .don-intro { font-family:var(--sans);font-size:14px;color:#6a4a00;line-height:1.75;margin-bottom:1.25rem; } .don-cards { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:1.75rem 0;text-align:left; } .don-card { background:#fff;border:0.5px solid #e8d080;border-radius:12px;padding:1.25rem; } .don-card h3 { font-family:var(--sans);font-size:14px;font-weight:700;color:var(--yellow-dk);margin-bottom:6px; } .don-card p { font-family:var(--sans);font-size:13px;color:var(--text-mid);line-height:1.6; } .don-contact { font-family:var(--sans);font-size:13px;color:#6a4a00; } .don-contact a { color:var(--teal-dark); } .agenda-section { padding:4rem 2rem;background:var(--cream); } .agenda-transition { background:var(--teal-pale);border:1px solid var(--teal-mid);border-radius:12px;padding:1.25rem 1.5rem;font-family:var(--sans);font-size:13px;color:var(--teal-dark);line-height:1.7;margin-bottom:1.75rem; } .agenda-transition strong { color:var(--teal-deep); } .agenda-recurrent { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; } .agenda-mois.salmon { background:var(--salmon); } .agenda-mois.yellow { background:var(--yellow-dk); } body.p-accueil .agenda-item h3 { font-family:var(--sans);font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px; } body.p-accueil .agenda-item p { font-family:var(--sans);font-size:12px;color:var(--text-light);line-height:1.6; } .join-section { background:var(--teal-deep);color:#fff;padding:5rem 2rem;text-align:center; } .join-section h2 { font-family:var(--serif);font-size:28px;font-weight:400;margin-bottom:1rem; } .join-lead { font-size:15px;opacity:.85;max-width:540px;margin:0 auto .75rem;line-height:1.75; } .join-why { font-family:var(--sans);font-size:13px;opacity:.6;max-width:460px;margin:0 auto 2rem;line-height:1.7; } .btn-white:hover { opacity:.9; } .join-actions { display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:1.5rem; } .btn-outline-white { background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6);padding:13px 28px;border-radius:28px;font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;transition:all .2s; } .btn-outline-white:hover { background:rgba(255,255,255,.12);border-color:#fff; } .join-don { font-family:var(--sans);font-size:13px;opacity:.75; } .join-don a { color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px; } .insta-section { background:#fff;padding:4rem 2rem; } .insta-inner { max-width:900px;margin:0 auto;text-align:center; } .insta-inner h2 { font-family:var(--serif);font-size:26px;font-weight:400;color:var(--teal-deep);margin-bottom:.5rem; } .insta-lead { font-family:var(--sans);font-size:14px;color:var(--text-mid);max-width:520px;margin:0 auto 2rem;line-height:1.7; } .insta-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:1.75rem; } .insta-item { display:block;aspect-ratio:1/1;border-radius:12px;overflow:hidden;position:relative; } .insta-item img { width:100%;height:100%;object-fit:cover;transition:transform .35s ease; } .insta-item:hover img { transform:scale(1.06); } .insta-cta { display:inline-block;background:var(--teal);color:#fff;font-family:var(--sans);font-size:14px;font-weight:700;padding:12px 28px;border-radius:26px;text-decoration:none; } .insta-cta:hover { background:var(--teal-dark); } .temoignages-section { background:var(--salmon-pale);padding:4.5rem 2rem; } .temoignages-inner { max-width:1060px;margin:0 auto; } .temoignages-inner h2 { font-family:var(--serif);font-size:26px;font-weight:400;color:var(--salmon-dark);text-align:center;margin-bottom:.5rem; } .temoignages-lead { font-family:var(--sans);font-size:14px;color:var(--text-mid);text-align:center;max-width:560px;margin:0 auto 2.5rem;line-height:1.7; } .temoignages-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; } .temoignage { background:#fff;border-radius:14px;padding:1.75rem;border-top:3px solid var(--salmon); } .temoignage p { font-family:var(--serif);font-style:italic;font-size:14px;color:var(--text-mid);line-height:1.75;margin-bottom:1rem; } .temoignage cite { font-family:var(--sans);font-style:normal;font-size:13px;font-weight:700;color:var(--salmon-dark); } .localisation-section { background:var(--warm-white);padding:4rem 2rem; } .localisation-inner { max-width:960px;margin:0 auto;display:grid;grid-template-columns:1fr 1.4fr;gap:2.5rem;align-items:start; } .localisation-text .section-tag { color:var(--teal); } .localisation-text h2 { font-family:var(--serif);font-size:22px;font-weight:400;color:var(--teal-deep);margin-bottom:1.25rem; } .adresse-bloc { background:#fff;border:0.5px solid var(--border);border-radius:12px;padding:1.25rem 1.5rem;margin-bottom:1rem; } .adresse-bloc p { font-family:var(--sans);font-size:14px;color:var(--text-mid);line-height:1.8; } .adresse-bloc strong { color:var(--text); } .adresse-bloc a { color:var(--teal);text-decoration:none; } .horaires-rapides { font-family:var(--sans);font-size:13px;color:var(--text-light);line-height:1.75; } .horaires-rapides strong { color:var(--text-mid); } .carte-bloc { border-radius:14px;overflow:hidden;height:320px; } .carte-bloc iframe { width:100%;height:100%;border:none;display:block; } footer h2 { color:#e8f5f2;font-size:13px;font-weight:700;margin-bottom:12px; } .ape-section { background:var(--yellow-pale);border-top:1px solid #f0d080;border-bottom:1px solid #f0d080;padding:3.5rem 2rem; } .ape-inner { max-width:780px;margin:0 auto;text-align:center; } .ape-section h2 { font-family:var(--serif);font-size:24px;font-weight:400;color:var(--yellow-dk);margin-bottom:1rem;line-height:1.35; } .ape-lead { font-family:var(--sans);font-size:14px;color:#6a4a00;line-height:1.8;margin-bottom:1rem; } .ape-actions { display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:1.75rem 0 1.25rem; } .ape-note { font-family:var(--sans);font-size:12.5px;color:#6a4a00;line-height:1.8; } .ape-note a { color:var(--teal-dark);font-weight:600; } .scroll-hint { display:none; } .insta-comptes { display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem .9rem;margin:1.1rem 0 .4rem;font-family:var(--sans);font-size:14px; } .insta-comptes a { color:var(--teal-dark);font-weight:700;text-decoration:none;border-bottom:2px solid var(--yellow); } .insta-comptes a:hover { color:var(--teal-deep); } .insta-comptes span { color:var(--text-light);font-size:13px; } .insta-comptes span::after { content:"\00B7";margin-left:.9rem;color:var(--border); } .insta-comptes span:last-child::after { content:""; } .listes-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:1.5rem 0; } .liste-card { display:flex;flex-direction:column;gap:4px;background:#fff;border:0.5px solid var(--border);border-radius:12px;padding:1.1rem 1.25rem;text-decoration:none;transition:all .2s; } .liste-card:hover { border-color:var(--teal);background:var(--teal-pale); } .liste-niveau { font-family:var(--sans);font-size:14px;font-weight:700;color:var(--teal-deep); } .liste-format { font-family:var(--sans);font-size:11px;color:var(--text-light); } .action-detail { padding:5rem 2rem;max-width:960px;margin:0 auto; } .action-detail:nth-child(odd) { background:transparent; } .action-block { display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;padding:4rem 2rem;max-width:960px;margin:0 auto; } .action-block.reverse { direction:rtl; } .action-block.reverse > * { direction:ltr; } .action-wrap { padding:0; } /* L'introduction de la page APE est enveloppee dans un groupe sans classe, a l'interieur d'un .action-wrap. Elle n'heritait donc d'aucune largeur ni d'aucune marge, et partait du bord gauche jusqu'au bord droit. On lui donne le meme gabarit qu'un .action-block, qui est son voisin direct dans la page. Le :not exclut justement ces .action-block, qui se cadrent deja eux-memes. */ .action-wrap > .wp-block-group:not(.action-block) { max-width:960px;margin:0 auto;padding:4rem 2rem; } .action-wrap.alt { background:#fff; } .action-photos { display:grid;grid-template-columns:1fr 1fr;gap:10px; } .action-photos .ap-main { grid-column:1/-1;height:220px;border-radius:12px;overflow:hidden; } .action-photos .ap-sub { height:150px;border-radius:12px;overflow:hidden; } .action-photos img { width:100%;height:100%;object-fit:cover; } .ap-main.no-photo { display:flex;align-items:center;justify-content:center;font-size:64px; } .np-automne { background:var(--yellow-pale); } .np-cinema { background:var(--teal-pale); } .np-jeux { background:var(--salmon-pale); } .np-kermesse { background:var(--green-pale); } .action-text h2 { font-family:var(--serif);font-size:24px;font-weight:400;color:var(--text);margin-bottom:.75rem;line-height:1.3; } .action-text p { font-family:var(--sans);font-size:14px;color:var(--text-mid);line-height:1.75;margin-bottom:.75rem; } .don-section p { font-family:var(--sans);font-size:14px;color:#6a4a00;line-height:1.75;margin-bottom:1.25rem; } .btn-teal { background:var(--teal);color:#fff;border:none;padding:12px 28px;border-radius:26px;font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block; } .btn-teal:hover { background:var(--teal-dark); } .pedagogie-grid { display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center; } .pedagogie-text p { font-size:15px;color:var(--text-mid);line-height:1.85;margin-bottom:1rem; } .pedagogie-img { border-radius:14px;overflow:hidden;height:300px; } .pedagogie-img img { width:100%;height:100%;object-fit:cover; } .niveau-block { display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;padding:2.5rem 0;border-bottom:1px solid var(--border); } .niveau-block:last-child { border-bottom:none;padding-bottom:0; } .niveau-block.reverse { direction:rtl; } .niveau-block.reverse > * { direction:ltr; } .niveau-img { border-radius:14px;overflow:hidden;height:240px; } .niveau-img img { width:100%;height:100%;object-fit:cover; } .niveau-tag { font-family:var(--sans);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:.75rem; } .tag-t { color:var(--salmon); } .tag-m { color:var(--teal); } .tag-e { color:var(--yellow-dk); } .niveau-text h3 { font-family:var(--serif);font-size:22px;font-weight:400;color:var(--text);margin-bottom:.75rem;line-height:1.3; } .niveau-text p { font-family:var(--sans);font-size:14px;color:var(--text-mid);line-height:1.75;margin-bottom:.75rem; } .club-section { background:#fff;padding:4rem 2rem; } .club-inner { max-width:960px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start; } .club-text h2 { font-family:var(--serif);font-size:24px;font-weight:400;color:var(--teal-deep);margin-bottom:.75rem; } .club-text p { font-family:var(--sans);font-size:14px;color:var(--text-mid);line-height:1.75;margin-bottom:.75rem; } .tarif-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:1.25rem; } .tarif-card { background:var(--teal-pale);border-radius:10px;padding:1rem;text-align:center; } .tarif-card .prix { font-family:var(--serif);font-size:22px;color:var(--teal-dark); } .tarif-card .label { font-family:var(--sans);font-size:12px;color:var(--teal-dark);margin-top:4px; } .tarif-card.full { grid-column:1/-1;background:var(--teal-mid); } .equipe-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; } .valeurs-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; } .valeur-card { background:#fff;border:0.5px solid var(--border);border-radius:14px;padding:1.75rem;position:relative; } .valeur-num { font-family:var(--serif);font-size:32px;color:var(--teal-mid);line-height:1;margin-bottom:.6rem; } .valeur-card h3 { font-family:var(--serif);font-size:18px;font-weight:400;color:var(--teal-deep);margin-bottom:.6rem;line-height:1.3; } .valeur-card p { font-family:var(--sans);font-size:13.5px;color:var(--text-mid);line-height:1.75; } .equipe-card { background:#fff;border:0.5px solid var(--border);border-radius:14px;overflow:hidden; } .equipe-photo { height:240px;overflow:hidden; } .equipe-photo img { width:100%;height:100%;object-fit:cover;object-position:center top; } .equipe-info { padding:1.35rem; } .equipe-info h3 { font-family:var(--serif);font-size:20px;font-weight:400;color:var(--teal-deep);margin-bottom:.25rem; } .equipe-role { font-family:var(--sans);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--salmon);margin-bottom:.75rem;line-height:1.3; } .equipe-info p { font-family:var(--sans);font-size:13.5px;color:var(--text-mid);line-height:1.7; } .infos-inner { max-width:960px;margin:0 auto; } .info-card a { color:var(--teal); } .adresse-infos { padding:1.5rem 1.75rem; } .adresse-infos p { font-family:var(--sans);font-size:14px;color:var(--text-mid);line-height:1.8;margin-bottom:.3rem; } .adresse-infos strong { color:var(--text); } .adresse-infos .tag { display:inline-block;background:var(--teal-pale);color:var(--teal-dark);font-family:var(--sans);font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;margin-bottom:12px; } .carte-wrap { width:100%;height:260px;background:#e8f0e0; } .carte-wrap iframe { width:100%;height:100%;border:none;display:block; } /* ---------- Ajustements par page (classe body) ---------- */ body.p-legal .content { max-width:760px;margin:0 auto;padding:3.5rem 2rem 4rem; } body.p-agenda .agenda-note { max-width:760px;margin:0 auto 2rem;font-family:var(--sans);font-size:14px;color:var(--text-mid);text-align:center; } body.p-accueil .agenda-item { background:#fff;border:0.5px solid var(--border);border-radius:12px;padding:1.25rem;display:flex;gap:14px;align-items:flex-start;margin-bottom:0; } body.p-accueil .agenda-mois { display:inline-block;font-family:var(--sans);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;color:#fff;background:var(--teal);border-radius:8px;padding:4px 10px;white-space:nowrap;flex-shrink:0;margin-top:2px; } /* Le libelle de date est devenu un

a la conversion. Il tombait donc sous la regle body.p-accueil .agenda-item p, plus specifique, qui lui imposait la taille et la couleur du texte courant : gris sur vert, illisible. Ces trois lignes rendent au libelle ce que la maquette lui donnait. */ /* Fond pale et texte fonce, sur le modele du badge « Portes ouvertes » qui existe deja dans la feuille. Le blanc sur vert plafonnait a 3,3 contre 1 et le blanc sur saumon a 2,4, sous le minimum recommande de 4,5. On passe ici entre 6,5 et 10,6, le code couleur reste, la lisibilite avec. */ body.p-accueil .agenda-item p.agenda-mois { font-size:11px;color:var(--teal-deep);background:var(--teal-pale); } body.p-accueil .agenda-item p.agenda-mois.salmon { color:var(--salmon-dark);background:var(--salmon-pale); } body.p-accueil .agenda-item p.agenda-mois.yellow { color:var(--yellow-dk);background:var(--yellow-pale); } body.p-ape .action-tag { font-family:var(--sans);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:.75rem; } body.p-ape .action-note { display:inline-block;margin-top:.5rem;font-family:var(--sans);font-size:12px;color:var(--teal-dark);background:var(--teal-pale);border-radius:8px;padding:4px 12px; } body.p-ecole .infos-section { background:var(--warm-white);padding:4rem 2rem; } body.p-ecole .info-card { background:#fff;border:0.5px solid var(--border);border-radius:12px;padding:1.4rem; } body.p-ecole .info-label { font-family:var(--sans);font-size:11px;text-transform:uppercase;letter-spacing:.9px;color:var(--teal);font-weight:700;margin-bottom:9px; } body.p-ape .don-section { background:var(--yellow-pale);border-top:1px solid #f0d080;border-bottom:0;padding:3.5rem 2rem;text-align:center; } body.p-ape .don-inner { max-width:600px;margin:0 auto;text-align:inherit; } body.p-ape .don-section h2 { font-family:var(--serif);font-size:24px;font-weight:400;color:var(--yellow-dk);line-height:normal;margin-bottom:.75rem; } body.p-legal .adresse-bloc { background:#fff;border:0.5px solid var(--border);border-radius:14px;overflow:hidden;padding:0;margin:1.5rem 0; } body.p-legal .content h2 { font-family:var(--sans);font-size:15px;font-weight:700;color:var(--teal-deep);margin:2.25rem 0 .6rem;padding-bottom:.4rem;border-bottom:1px solid var(--border); } body.p-legal .content h2:first-child { margin-top:0; } body.p-legal .content p { font-family:var(--sans);font-size:14px;color:var(--text-mid);line-height:1.8;margin-bottom:.5rem; } body.p-legal .content a { color:var(--teal); } /* ---------- Adaptations WordPress ---------- */ /* wp_nav_menu produit une