/* Theme Name: CAP 03 — Commentry Aventure Passion Theme URI: https://www.hcod.fr/ Author: HCOD Author URI: https://www.hcod.fr/ Description: Thème WordPress sur mesure pour le club de raid multisport CAP 03 (Commentry, Allier). Version: 2.16.0 Requires at least: 6.5 Tested up to: 7.0 Requires PHP: 7.4 Text Domain: cap03 Tags: full-site-editing, block-templates, sports, custom-colors, block-patterns */ /* ============================================================ CAP 03 — Commentry Aventure Passion Feuille de style commune à toutes les pages ============================================================ */ /* ------------------------------------------------------------ Palette — source unique : theme.json Ces variables courtes sont des alias des presets générés par WordPress à partir de theme.json. Elles ne redéfinissent pas les couleurs : elles les empruntent. Une modification via Apparence → Éditeur → Styles se répercute donc partout, y compris dans les sections encore écrites en HTML brut. La valeur après la virgule est un simple filet de sécurité si les styles globaux ne sont pas chargés (aperçu isolé, styles globaux désactivés). Pour changer une couleur : modifier theme.json, jamais cette liste. ------------------------------------------------------------ */ :root{ --rouge:var(--wp--preset--color--rouge,#8B1A42); --rouge-fonce:var(--wp--preset--color--rouge-fonce,#6d1434); --rose-clair:var(--wp--preset--color--rose-clair,#e9b8cb); --rose-pale:var(--wp--preset--color--rose-pale,#f0d4de); --noir:var(--wp--preset--color--noir,#1d1d1b); --gris-fonce:var(--wp--preset--color--gris-fonce,#262624); --gris:var(--wp--preset--color--gris,#4c4a46); /* Ce gris sert aux mentions secondaires (dates, notes). L'ancienne valeur #8f8b84 ne ressortait pas assez : 3,4 pour 1 sur blanc, en deçà du seuil de 4,5 exigé pour un texte de cette taille. La teinte retenue tient aussi sur le fond crème des encadrés, un peu plus sombre que le blanc. */ --gris-clair:var(--wp--preset--color--gris-clair,#706c66); /* Sur fond sombre, le même gris devient au contraire trop foncé : cette variante y prend le relais. */ --gris-sur-sombre:#a8a49c; --creme:var(--wp--preset--color--creme,#f6f4f1); --bordure:var(--wp--preset--color--bordure,#eae6e0); --blanc:var(--wp--preset--color--blanc,#ffffff); --condensed:var(--wp--preset--font-family--barlow-condensed,'Barlow Condensed',sans-serif); --corps:var(--wp--preset--font-family--barlow,'Barlow',sans-serif); } *{box-sizing:border-box} html{scroll-behavior:smooth} /* L'en-tête est collant : sans cette marge, une cible d'ancre (#cotisations, #infos, #preinscription…) se retrouve cachée dessous à l'arrivée. */ main [id]{scroll-margin-top:clamp(88px,11vw,104px)} html,body{margin:0;padding:0} body{font-family:var(--corps);color:var(--noir);background:#fff;-webkit-font-smoothing:antialiased;min-width:320px;overflow-x:clip} a{color:var(--rouge);text-decoration:none} a:hover{color:var(--rouge-fonce)} img{max-width:100%} h1,h2,h3{font-family:var(--condensed);text-transform:uppercase;line-height:1.05;margin:0} p,ul{margin:0} .container{max-width:1240px;margin:0 auto;padding-left:20px;padding-right:20px} /* ---------- Sections & fonds ---------- */ .section{padding:clamp(56px,8vw,104px) 0} .section--sm{padding:clamp(44px,6vw,80px) 0} .bg-creme{background:var(--creme)} .bg-noir{background:var(--noir);color:#fff} .bg-rouge{background:var(--rouge);color:#fff} .kicker{font-weight:700;font-size:13px;letter-spacing:2.5px;text-transform:uppercase;color:var(--rouge)} .kicker--light{color:var(--rose-clair)} .section-head{display:flex;flex-direction:column;gap:12px;max-width:720px;margin-bottom:36px} /* Variantes d'en-tête de section — remplacent les styles en ligne de la maquette, pour que les titres restent éditables dans l'Éditeur de site. */ .section-head--row{max-width:none;flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px} .section-head-titles{display:flex;flex-direction:column;gap:12px} .section-head--center{align-items:center;text-align:center;padding:0 20px;gap:10px;max-width:none;margin-bottom:0} .title{font-weight:700;font-size:clamp(30px,4.5vw,46px)} .title--sm{font-size:clamp(26px,3.5vw,36px);letter-spacing:1px} .title--xs{font-size:clamp(24px,3vw,34px)} .lead--sm{font-size:16px} /* Variantes de conteneur — remplacent des largeurs posées en style en ligne. */ .container--histoire{max-width:940px} .cta-inner--narrow{max-width:680px} .cta-inner--fb{max-width:640px;gap:14px} /* Section « Un club affilié » : texte à gauche, logos à droite. */ .affil-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px} .affil-text{flex:1 1 360px;display:flex;flex-direction:column;gap:12px} .lead{font-size:17px;line-height:1.65;color:var(--gris);text-wrap:pretty} .bg-noir .lead{color:#c9c6c0} .bg-rouge .lead{color:var(--rose-pale)} .note{font-size:14px;color:var(--gris-clair);text-wrap:pretty} /* ---------- Boutons ---------- */ .btn{display:inline-block;font-family:var(--condensed);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;border-radius:8px;padding:14px 32px;font-size:20px;cursor:pointer;border:none;text-align:center} .btn--primary{background:var(--rouge);color:#fff} .btn--primary:hover{background:var(--rouge-fonce);color:#fff} .btn--white{background:#fff;color:var(--rouge)} .btn--white:hover{background:var(--rose-pale);color:var(--rouge-fonce)} .btn--dark{background:var(--noir);color:#fff} .btn--dark:hover{background:var(--rouge);color:#fff} /* Bouton Facebook aux couleurs de la marque : un lien vers un réseau se reconnaît plus vite à son logo qu'à son nom. Le occupe déjà toute la surface du bouton (voir « .btn > a ») : c'est donc lui qui aligne le logo et le libellé, sans quoi l'icône se placerait hors de la zone cliquable. */ /* Le bleu officiel de Facebook (#1877F2) ne contraste qu'à 4,2 pour 1 avec du texte blanc, sous le seuil de 4,5. Un ton à peine plus profond le porte à 5,2 sans que le bouton cesse d'être identifiable au premier coup d'œil. */ .btn--facebook{background:#1568D9;color:#fff} .btn--facebook:hover{background:#125CC0;color:#fff} /* « .btn.btn--facebook » et non « .btn--facebook » : la règle « .btn > a », déclarée plus bas, impose display:block et l'emporterait à spécificité égale — le pseudo-élément resterait alors en ligne, donc sans dimensions. */ .btn.btn--facebook > a{display:flex;align-items:center;justify-content:center;gap:10px} /* Le logo est posé en CSS et non dans le HTML : WordPress supprime les du contenu d'un paragraphe piloté par une liaison. Purement décoratif, il n'a de toute façon rien à annoncer aux lecteurs d'écran. */ .btn.btn--facebook > a::before{content:"";display:inline-block;flex:none;width:1.05em;height:1.05em; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M15.12 5.32H17V2.14A26.11 26.11 0 0 0 14.26 2C11.54 2 9.68 3.66 9.68 6.7v2.62H6.61v3.56h3.07V22h3.68v-9.12h3.06l.46-3.56h-3.52V7.05c0-1.03.29-1.73 1.76-1.73Z'/%3E%3C/svg%3E") center/contain no-repeat} .btn--outline-dark{background:none;border:2px solid var(--noir);color:var(--noir);padding:12px 32px} .btn--outline-dark:hover{border-color:var(--rouge);color:var(--rouge)} .btn--outline-light{background:none;border:2px solid rgba(255,255,255,.6);color:#fff;padding:12px 32px} .btn--outline-light:hover{border-color:#fff;color:#fff} .btn--outline-grey{background:none;border:2px solid #d8d3cc;color:var(--gris);padding:12px 26px;font-size:18px} .btn--outline-grey:hover{border-color:var(--rouge);color:var(--rouge)} .btn--sm{font-size:18px;letter-spacing:1.2px;padding:12px 26px} .btn-row{display:flex;flex-wrap:wrap;gap:14px} .btn-row--center{justify-content:center} .btn-row--spaced{margin-top:8px} .btn-row--after{margin-top:28px} .link-more{font-weight:700;font-size:15px;white-space:nowrap} /* Un bouton peut être un nu (maquette d'origine) ou un

qui enveloppe un lien (blocs éditables) : dans les deux cas le lien prend la couleur du bouton et occupe toute sa surface cliquable. */ .btn > a{color:inherit;text-decoration:none;display:block;margin:-14px -32px;padding:14px 32px} .btn--sm > a,.btn--outline-dark > a,.btn--outline-light > a,.btn--outline-grey > a{margin:-12px -26px;padding:12px 26px} p.btn{margin:0} .link-more > a{color:inherit;text-decoration:none} /* ---------- En-tête ---------- */ /* En-tête collant. Le sticky est posé sur l'ENVELOPPE (le

du bloc Élément de modèle), pas sur .site-header : un élément collant ne se déplace qu'à l'intérieur de son parent, et l'enveloppe fait exactement la hauteur de l'en-tête. Posé sur .site-header, le sticky n'avait donc aucune marge de manœuvre et l'en-tête partait avec la page. Pas de backdrop-filter non plus, malgré la tentation : il crée un bloc conteneur pour les éléments en position:fixed, ce qui enfermerait le panneau du menu mobile dans l'en-tête au lieu de le laisser couvrir l'écran. */ header.wp-block-template-part{position:sticky;top:0;z-index:60} .site-header{background:rgba(255,255,255,.96);border-bottom:1px solid var(--bordure)} /* La barre d'administration est fixe au-dessus de 782px : l'en-tête doit se coller dessous, pas dessous elle. En deçà, elle défile avec la page. */ .admin-bar header.wp-block-template-part{top:32px} @media screen and (max-width:782px){ .admin-bar header.wp-block-template-part{top:0} } .header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:10px;padding-bottom:10px} .brand{display:flex;align-items:center;gap:12px;flex-shrink:0} .brand img{height:58px;width:58px;object-fit:contain;display:block} .brand-text{display:flex;flex-direction:column;line-height:1.05} .brand-name{font-family:var(--condensed);font-weight:800;font-size:22px;letter-spacing:.5px;color:var(--noir)} .brand-sub{font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--rouge)} /* ---------- Navigation ---------- Le bloc Navigation de WordPress remplace les liens écrits en dur : le menu se gère depuis Apparence → Éditeur → Navigation. Son balisage est un