/*
Theme Name: Rayure
Theme URI: https://www.foot-esfagnieres.fr/
Description: Thème sur mesure du site de football amateur : rayures de tonte, tableau d'affichage, numéros de maillot.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: rayure
*/

@font-face{font-family:"Sofia Sans Extra Condensed";font-style:normal;font-weight:700 900;font-display:swap;src:url("polices/sofia-condensee.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 800;font-display:swap;src:url("polices/hanken-grotesk.woff2") format("woff2")}

:root{
	--ryr-vert:#12803D;          /* couleur de marque (reprise du maillot du logo) */
	--ryr-vert-fonce:#0B5A2A;
	--ryr-nuit:#083D1E;
	--ryr-craie:#F7F6F0;
	--ryr-pale:#E8F1E6;
	--ryr-papier:#fff;
	--ryr-encre:#14221A;
	--ryr-texte:#2C3A31;
	--ryr-gris:#5C6A61;
	--ryr-trait:#D5DCD0;
	--ryr-etiq:#ECEEE8;
	--ryr-titres:"Sofia Sans Extra Condensed","Arial Narrow",Impact,sans-serif;
	--ryr-corps:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	--ryr-h:72px;
	--ryr-coin:18px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--ryr-h) + 16px)}
body{margin:0;background:var(--ryr-craie);color:var(--ryr-texte);font:400 1.0625rem/1.65 var(--ryr-corps);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--ryr-vert-fonce);text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{color:var(--ryr-encre)}
h1,h2,h3{font-family:var(--ryr-titres);font-weight:800;text-transform:uppercase;color:var(--ryr-encre);line-height:1;letter-spacing:.012em;margin:0}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.ryr-saut{position:absolute;left:-999px;top:0;background:#fff;color:var(--ryr-encre);padding:.6rem 1rem;z-index:100}
.ryr-saut:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--ryr-encre);outline-offset:2px}
.ryr-in{width:min(1240px,100% - 40px);margin-inline:auto}

/* ---------- en-tête : une seule barre collante, couleur de marque ---------- */
.ryr-entete{position:sticky;top:0;z-index:50;background:var(--ryr-vert);color:#fff;
	background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 56px,transparent 56px 112px)}
.admin-bar .ryr-entete{top:32px}
.ryr-entete-in{width:min(1240px,100% - 40px);margin-inline:auto;display:flex;align-items:center;gap:28px;min-height:72px}
.ryr-marque{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;flex:0 1 auto;min-width:0}
.ryr-marque:hover{color:#fff}
.ryr-ecusson{flex:none;width:48px;height:48px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.ryr-logo-img{width:34px;height:auto}
.ryr-nom{font:800 1.35rem/1 var(--ryr-titres);text-transform:uppercase;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ryr-nav{margin-left:auto}
.ryr-nav ul{list-style:none;display:flex;gap:4px}
.ryr-nav a{display:block;padding:.55rem .9rem;color:#fff;text-decoration:none;font:800 1.08rem/1 var(--ryr-titres);text-transform:uppercase;letter-spacing:.05em;border-bottom:3px solid transparent;white-space:nowrap}
.ryr-nav a:hover,.ryr-nav a[aria-current]{border-bottom-color:#fff;color:#fff}
.ryr-loupe,.ryr-burger{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer}
.ryr-loupe:hover,.ryr-burger:hover{background:rgba(255,255,255,.26)}
.ryr-burger{display:none;gap:4px;align-content:center}
.ryr-burger span{display:block;width:20px;height:2.5px;background:#fff;border-radius:2px}
.ryr-recherche{background:var(--ryr-vert-fonce);padding:14px 0}
.ryr-recherche form,.ryr-form-page{width:min(1240px,100% - 40px);margin-inline:auto;display:flex;gap:10px}
.ryr-recherche input,.ryr-form-page input{flex:1;min-width:0;padding:.85rem 1rem;border:0;border-radius:0;font:inherit;background:#fff;color:var(--ryr-encre)}
.ryr-recherche button,.ryr-form-page button{padding:.85rem 1.4rem;border:0;background:var(--ryr-encre);color:#fff;font:800 1rem var(--ryr-titres);text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.ryr-form-page{width:100%;max-width:640px;margin:1.2rem 0 0}
.ryr-form-page input{border:2px solid var(--ryr-encre)}

/* ---------- boutons, étiquettes ---------- */
.ryr-bouton{display:inline-flex;align-items:center;gap:.5rem;padding:.95rem 1.5rem;background:var(--ryr-vert);color:#fff;text-decoration:none;font:800 1.1rem/1 var(--ryr-titres);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
	clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.ryr-bouton:hover{background:var(--ryr-vert-fonce);color:#fff}
.ryr-bouton-clair{background:#fff;color:var(--ryr-encre);border:2px solid var(--ryr-encre);padding:calc(.95rem - 2px) calc(1.5rem - 2px);clip-path:none}
.ryr-bouton-clair:hover{background:var(--ryr-encre);color:#fff}
.ryr-boutons{display:flex;flex-wrap:nowrap;gap:12px;margin:0}
.ryr-etiq{display:inline-block;padding:.28rem .6rem;background:var(--ryr-etiq);color:var(--ryr-gris);font:700 .72rem/1 var(--ryr-corps);text-transform:uppercase;letter-spacing:.09em}
.ryr-sur{font:800 1.05rem/1 var(--ryr-titres);text-transform:uppercase;letter-spacing:.18em;color:var(--ryr-vert-fonce);margin:0 0 .9rem}

/* ---------- hero : texte large + une photo cadrée sur des rayures de tonte ---------- */
.ryr-hero{background:repeating-linear-gradient(90deg,#EDF4EA 0 90px,#E4EEDF 90px 180px);border-bottom:6px solid var(--ryr-vert);
	min-height:min(calc(100svh - var(--ryr-h) - 92px),780px);display:flex;align-items:center;padding:40px 0}
.ryr-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;width:min(1240px,100% - 40px)}
.ryr-hero h1{font-size:clamp(2.7rem,5vw,4.6rem);line-height:.94;margin:0 0 1.1rem}
.ryr-chapo{font-size:1.2rem;line-height:1.5;max-width:34em;margin:0 0 1.6rem;color:var(--ryr-texte)}
.ryr-hero-photo{margin:0;position:relative;justify-self:end;width:100%;max-width:620px}
.ryr-hero-photo::before{content:"";position:absolute;inset:18px -18px -18px 18px;background:var(--ryr-vert);
	background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 34px,transparent 34px 68px)}
.ryr-hero-photo img{position:relative;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:30% 50%}

/* ---------- blocs et fonds alternés ---------- */
.ryr-bloc{padding:64px 0}
.ryr-fond-blanc{background:var(--ryr-papier)}
.ryr-fond-pale{background:var(--ryr-pale)}
.ryr-fond-craie{background:var(--ryr-craie)}
.ryr-tete{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:28px;padding-bottom:12px;border-bottom:3px solid var(--ryr-encre)}
.ryr-tete h2{font-size:clamp(2rem,3.4vw,2.8rem)}
.ryr-tout{font:800 1.05rem/1 var(--ryr-titres);text-transform:uppercase;letter-spacing:.08em;color:var(--ryr-vert-fonce);text-decoration:none;white-space:nowrap;border-bottom:2px solid currentColor}
.ryr-tout::after{content:" \2192"}

/* ---------- rubriques ---------- */
.ryr-grille-rub{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
.ryr-rub{display:block;text-decoration:none;color:var(--ryr-encre);background:var(--ryr-craie);border-bottom:5px solid var(--ryr-vert);height:100%}
.ryr-rub:hover{color:var(--ryr-encre);background:var(--ryr-pale)}
.ryr-rub-image{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--ryr-pale);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ryr-coin)),calc(100% - var(--ryr-coin)) 100%,0 100%)}
.ryr-rub-image img{width:100%;height:100%;object-fit:cover}
.ryr-numero{position:absolute;left:10px;top:10px;min-width:40px;height:40px;padding:0 .5rem;display:grid;place-items:center;background:#fff;color:var(--ryr-encre);font:900 1.7rem/1 var(--ryr-titres);box-shadow:3px 3px 0 var(--ryr-vert)}
.ryr-rub-nom{display:block;padding:14px 14px 2px;font:800 1.5rem/1.02 var(--ryr-titres);text-transform:uppercase}
.ryr-rub-nb{display:block;padding:0 14px 16px;font-size:.9rem;color:var(--ryr-gris)}

/* ---------- cartes ---------- */
.ryr-grille-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ryr-grille-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.ryr-carte{display:flex;flex-direction:column;min-width:0;background:#fff;border-bottom:4px solid var(--ryr-vert)}
.ryr-fond-blanc .ryr-carte{background:var(--ryr-craie)}
.ryr-carte-image{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--ryr-pale);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ryr-coin)),calc(100% - var(--ryr-coin)) 100%,0 100%)}
.ryr-carte-image img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.ryr-carte:hover .ryr-carte-image img{transform:scale(1.04)}
.ryr-vide{display:block;width:100%;height:100%;background:var(--ryr-pale)}
.ryr-carte-texte{padding:16px 16px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.ryr-carte h3{font-size:1.5rem;line-height:1.03;text-transform:none;font-weight:800;letter-spacing:0}
.ryr-carte h3 a{color:var(--ryr-encre);text-decoration:none}
.ryr-carte h3 a:hover{text-decoration:underline}
.ryr-carte time{margin-top:auto;font-size:.85rem;color:var(--ryr-gris)}

/* ---------- à la une ---------- */
.ryr-une{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:32px;align-items:start}
.ryr-une-grande{background:#fff;border-bottom:5px solid var(--ryr-vert)}
.ryr-une-image{display:block;aspect-ratio:16/9;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}
.ryr-une-image img{width:100%;height:100%;object-fit:cover}
.ryr-une-texte{padding:22px 24px 26px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ryr-une-texte h3{font-size:clamp(1.9rem,2.8vw,2.7rem);line-height:1;text-transform:none;letter-spacing:0}
.ryr-une-texte h3 a{color:var(--ryr-encre);text-decoration:none}
.ryr-une-texte p{margin:0;color:var(--ryr-texte)}
.ryr-une-texte time{font-size:.85rem;color:var(--ryr-gris)}
.ryr-une-liste{display:grid;gap:18px}
.ryr-une-liste .ryr-carte{flex-direction:row;border-bottom-width:3px}
.ryr-une-liste .ryr-carte-image{flex:0 0 38%;aspect-ratio:3/2;align-self:flex-start;clip-path:none}
.ryr-une-liste .ryr-carte-texte{padding:12px 14px}
.ryr-une-liste .ryr-carte h3{font-size:1.2rem}

/* ---------- tableau d'affichage ---------- */
.ryr-tableau{background:var(--ryr-nuit);color:#fff;position:relative;overflow:hidden;
	background-image:radial-gradient(circle at 50% 50%,transparent 0 120px,rgba(255,255,255,.12) 120px 123px,transparent 123px),linear-gradient(90deg,transparent calc(50% - 1.5px),rgba(255,255,255,.12) calc(50% - 1.5px) calc(50% + 1.5px),transparent calc(50% + 1.5px))}
.ryr-tableau-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:44px 0}
.ryr-tableau p{margin:0;text-align:center;padding:10px}
.ryr-tableau b{display:block;font:900 clamp(3rem,6vw,5rem)/1 var(--ryr-titres);color:#fff;font-variant-numeric:tabular-nums}
.ryr-tableau span{display:block;margin-top:.4rem;font:700 1.05rem/1.2 var(--ryr-titres);text-transform:uppercase;letter-spacing:.12em;color:#CFE6D6}

/* ---------- clubs, pratique ---------- */
.ryr-pastilles{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.ryr-pastilles a{display:block;padding:.55rem 1rem;background:#fff;border:2px solid var(--ryr-encre);color:var(--ryr-encre);text-decoration:none;font-weight:700;font-size:.95rem;line-height:1.2}
.ryr-pastilles a:hover{background:var(--ryr-encre);color:#fff}
.ryr-pratique{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}
.ryr-pratique .ryr-grille-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ryr-rapide{background:#fff;border-top:6px solid var(--ryr-vert);padding:20px 20px 12px}
.ryr-rapide h3{font-size:1.6rem;margin-bottom:10px}
.ryr-rapide ul{list-style:none}
.ryr-rapide li+li{border-top:1px solid var(--ryr-trait)}
.ryr-rapide a{display:block;padding:.7rem 0;font-weight:700;line-height:1.3;color:var(--ryr-encre);text-decoration:none}
.ryr-rapide a:hover{color:var(--ryr-vert-fonce);text-decoration:underline}

/* ---------- le site en bref, texte SEO, FAQ ---------- */
.ryr-site-in{max-width:820px;text-align:center}
.ryr-site h2{font-size:clamp(2rem,3.4vw,2.8rem);margin-bottom:1rem}
.ryr-site p{font-size:1.15rem}
.ryr-site-note{font-size:.95rem!important;color:var(--ryr-gris);border-top:1px solid var(--ryr-trait);padding-top:1rem;margin-top:1.4rem}
.ryr-seo-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px;align-items:start}
.ryr-panneau{background:#fff;padding:32px 34px;border-left:8px solid var(--ryr-vert)}
.ryr-panneau h2,.ryr-faq h2{font-size:clamp(1.8rem,2.6vw,2.3rem);margin-bottom:1rem}
.ryr-panneau p:last-child{margin:0}
.ryr-faq details{background:#fff;border:2px solid var(--ryr-encre);margin-bottom:10px}
.ryr-faq summary{cursor:pointer;padding:.95rem 1.1rem;font-weight:700;color:var(--ryr-encre);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.ryr-faq summary::-webkit-details-marker{display:none}
.ryr-faq summary::after{content:"+";font:900 1.4rem/1 var(--ryr-titres)}
.ryr-faq details[open] summary::after{content:"\2212"}
.ryr-faq details p{padding:0 1.1rem 1rem;margin:0;color:var(--ryr-texte)}

/* ---------- adaptation ---------- */
@media (max-width:1180px){
	.ryr-nav a{padding:.55rem .6rem;font-size:1rem}
	.ryr-grille-rub{grid-template-columns:repeat(3,minmax(0,1fr))}
	.ryr-grille-4{grid-template-columns:repeat(2,minmax(0,1fr))}
	.ryr-pratique{grid-template-columns:1fr}
}
@media (max-width:980px){
	.ryr-burger{display:grid}
	.ryr-nav{position:absolute;left:0;right:0;top:100%;background:var(--ryr-vert-fonce);display:none;margin:0}
	.ryr-menu-ouvert .ryr-nav{display:block}
	.ryr-nav ul{flex-direction:column;gap:0;padding:8px 20px 16px}
	.ryr-nav a{padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.18)}
	.ryr-loupe{margin-left:auto}
	.ryr-hero{min-height:0;padding:36px 0 44px}
	.ryr-hero-in{grid-template-columns:1fr;gap:34px}
	.ryr-hero h1{max-width:none}
	.ryr-hero-photo{justify-self:center;max-width:520px;margin-right:18px}
	.ryr-une,.ryr-seo-in{grid-template-columns:1fr}
	.ryr-grille-3{grid-template-columns:repeat(2,minmax(0,1fr))}
	.ryr-tableau-in{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
	.ryr-nom{font-size:1rem;white-space:normal;line-height:1.02;overflow:visible}
	.ryr-bloc{padding:44px 0}
	.ryr-grille-rub,.ryr-grille-3,.ryr-grille-4,.ryr-pratique .ryr-grille-3{grid-template-columns:1fr 1fr;gap:14px}
	.ryr-carte h3{font-size:1.2rem}
	.ryr-boutons{flex-wrap:wrap}
	.ryr-bouton{padding:.85rem 1.1rem;font-size:1rem}
	.ryr-tete{flex-wrap:wrap}
	.ryr-une-liste .ryr-carte{flex-direction:column}
	.ryr-une-liste .ryr-carte-image{flex:none;width:100%}
	.ryr-panneau{padding:22px 20px}
	.ryr-recherche form{flex-wrap:wrap}
}
@media (max-width:430px){
	.ryr-grille-rub,.ryr-grille-3,.ryr-grille-4,.ryr-pratique .ryr-grille-3{grid-template-columns:1fr}
	.ryr-hero h1{font-size:2.5rem}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Hero mobile (règle de Jordan, tous les sites) : surtitre, H1, chapô, image, puis boutons. */
@media (max-width:980px){
	.ryr-hero-in{gap:18px}
	.ryr-hero-texte{display:contents}
	.ryr-hero .ryr-sur{order:1;margin:0}
	.ryr-hero h1{order:2;margin:0}
	.ryr-hero .ryr-chapo{order:3;margin:0}
	.ryr-hero-photo{order:4;margin-block:14px 18px}
	.ryr-hero .ryr-boutons{order:5;margin:0}
}