:root { font-size: 62.5%; --font-main: 'Open Sans', sans-serif; --site-principal-color: #8c0126;
--site-secondary-color: #f69782;
--site-accent-color: #ff6b5a;
--site-light-gray: #f8fafc;
--soutien-partenaire-color: #a6e20c; --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 2rem; --spacing-lg: 4rem; --spacing-xl: 6rem;  --font-size-sm: 1.4rem; --font-size-base: 1.6rem; --font-size-lg: 1.8rem; --font-size-xl: 2rem; --font-size-2xl: 2.4rem; --font-size-3xl: 3.2rem;  --radius-sm: 0.4rem; --radius-md: 0.8rem; --radius-lg: 1rem; --radius-xl: 2rem;  --shadow-light: 0 0 1.2rem rgba(0,0,0,0.08);
--shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-elevated: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --transition-fast: 150ms ease;
--transition-normal: 300ms ease;
} * {
box-sizing: border-box;
}
html, body {
height: 100%;
}
html {
overflow-y: scroll;
} body, button, input, select, textarea {
font-family: var(--font-main);
line-height: 1.6;
} h1, h2, h3, h4, h5, h6 {
font-family: var(--font-main);
font-weight: 700;
line-height: 1.2;
} h2, h3 {
font-style: italic;
}
body {
font-size: var(--font-size-base);
margin: 0;
padding: 0;
background: linear-gradient(135deg, #fdfbf9, #f5f5f5);
display: flex;
flex-direction: column;
min-height: 100vh;
} h1 {
font-size: calc(1.2 * var(--font-size-2xl));
font-weight: normal;
text-align: center;
margin: var(--spacing-xs) calc(-1 * var(--spacing-md));
padding: var(--spacing-sm);
color: white;
background-color: var(--site-principal-color);
}
h2 {
font-style: italic;
font-size: 2.2rem; font-weight: normal;
color: var(--site-principal-color);
border-bottom: 1px solid var(--site-principal-color);
padding-left: 0;
margin: var(--spacing-md) var(--spacing-lg) 1.5rem var(--spacing-lg);
line-height: 1;
}
h2 a {
color: var(--site-principal-color);
text-decoration: none;
}
h3 {
font-style: italic;
font-size: 1.9rem; color: rgba(0, 0, 0, 0.7);
border-left: 2px solid var(--site-principal-color);
padding-left: var(--spacing-sm);
margin: var(--spacing-sm) 5rem;
}
p {
margin: var(--spacing-xs) 0;
text-indent: var(--spacing-md);
} header {
display: flex;
flex-direction: column;
width: 100%;
background-image: url(https://mediumaquamarine-dotterel-147286.hostingersite.com/wp-content/uploads/2024/10/fond-banniere.webp);
background-size: 27rem; height: 16rem;
padding: 0;
margin: 0;
text-align: center;
border-bottom: 19px solid var(--site-principal-color);
box-shadow: 0 4px 20px rgba(140, 1, 38, 0.15);
position: relative;
z-index: 100;
}
.logo-eac78 {
position: relative;
top: 0.2rem;
max-width: 15rem;
transition: var(--transition-normal);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
.logo-eac78:hover {
transform: scale(1.03);
} .menu-toggle {
display: none;
}
.menu-principal {
background-color: white;
z-index: 9999;
position: relative;
border-bottom: solid 0.4rem var(--site-principal-color);
}
.menu-items {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
align-items: center;
list-style: none;
justify-content: center;
margin: 0;
padding: 0;
}
.menu-items li {
display: block; border-left: 1px solid var(--site-principal-color);
border-right: 1px solid var(--site-principal-color);
transition: var(--transition-fast);
} .menu-items li > a {
display: flex; align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 0.5rem 1rem;
text-decoration: none;
} .menu-items .connexion > a {
color: transparent; position: relative;
}
.menu-items .connexion > a::before {
content: "";
display: block;
width: 1.2rem;
height: 1.2rem;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
} .menu-items .login-icon::before {
background-image: url(//eac78.fr/wp-content/themes/eac78-theme/assets/icone/user-solid-full.svg);
}
.menu-items .logout-icon::before {
background-image: url(//eac78.fr/wp-content/themes/eac78-theme/assets/icone/user-slash-solid-full.svg);
}
.menu-items li:hover,
.menu-items .item-actif {
background-color: var(--site-principal-color);
transform: translateY(-1px);
}
.menu-items li:hover > a,
.menu-items .item-actif > a {
color: white;
} .menu-items ul.sub-menu a {
padding: 0.5rem 1rem;
color: white;
background-color: var(--site-principal-color);
white-space: nowrap;
}
.menu-items ul.sub-menu a:hover {
background-color: var(--site-secondary-color);
} .menu-pages-soeurs {
background: rgba(248, 249, 250, 0.6);
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 1rem;
margin-top: 1.5rem;
backdrop-filter: blur(10px);
} .menu-header {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid #e9ecef;
}
.parent-link {
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
color: var(--site-principal-color, #6c757d);
font-weight: 500;
padding: 0.5rem 0.75rem;
border-radius: 8px;
transition: all 0.25s ease;
background: rgba(255, 255, 255, 0.7);
border: 1px solid transparent;
}
.parent-link:hover {
color: var(--site-principal-color, #495057);
background: #ffffff;
border-color: #dee2e6;
transform: translateX(-2px);
}
.back-icon {
flex-shrink: 0;
transition: transform 0.25s ease;
}
.parent-link:hover .back-icon {
transform: translateX(-3px);
}
.parent-title {
font-size: 1.1rem;
} .menu-titre {
margin: 0;
font-size: 1rem;
color: #495057;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 0.85rem;
} .sibling-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
justify-content: right;
gap: 1.5rem;
flex-wrap: wrap;
}
.sibling-item {
display: flex;
align-items: center;
gap: 0.25rem;
}
.sibling-item a {
text-decoration: none;
color: #6c757d;
padding: 0.375rem 0.5rem;
transition: all 0.2s ease;
font-weight: 400;
font-size: 1.2rem;
white-space: nowrap;
}
.sibling-item a:hover {
color: var(--site-principal-color, #007bff);
text-decoration: underline;
} .sibling-item.current-page a {
color: var(--site-principal-color, #007bff);
font-weight: 600;
font-size: 1.5rem;
padding: 0.25rem 0.375rem;
text-decoration: underline;
}
.current-indicator {
color: var(--site-principal-color, #007bff);
width: 6px;
height: 6px;
}
.current-indicator svg {
width: 6px;
height: 6px;
} .a-venir {
color: var(--site-principal-color);
text-align: center;
} @media (max-width: 768px) {
.menu-header {
flex-direction: column;
align-items: flex-start;
gap: 0;
}
.menu-titre {
align-self: stretch;
}
.sibling-list {
flex-direction: column;
align-items: center;
gap: 0;
}
.sibling-item a {
padding: 0;
}
.sibling-item.current-page a {
font-size: 1.2rem;
}
} .fil-ariane {
border-radius: 6px;
padding: var(--spacing-sm) var(--spacing-sm);
margin: var(--spacing-lg) 0 0 0;
font-size: 0.9em;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.fil-ariane a {
color: var(--site-principal-color);
text-decoration: none;
transition: all 0.2s ease;
padding: 2px 4px;
border-radius: 3px;
}
.fil-ariane a:hover {
color: var(--site-principal-color);
background: rgba(156, 43, 46, 0.05);
}
.fil-ariane .sep {
color: var(--text-muted);
margin: 0 8px;
font-weight: normal;
}
.fil-ariane .current {
color: var(--text-dark);
font-weight: 600;
background: white;
padding: 2px 8px;
border-radius: 3px;
border: 1px solid var(--border-light);
} .titre-page {
font-size: calc(1.2 * var(--font-size-2xl));
font-weight: 100;
text-align: center;
margin: var(--spacing-lg) 0;
padding: var(--spacing-sm);
border: solid 0.2rem var(--site-principal-color);
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
position: relative;
overflow: hidden;
letter-spacing: 1px;
background: linear-gradient(135deg, #ffffff 0%, #fef7f0 100%);
animation: gentlePulse 4s ease-in-out infinite;
}
.titre-accueil {
line-height: 1.4;
margin: var(--spacing-md) 0;
}
.titre-page::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius: inherit;
z-index: -1;
}
.titre-page::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, #e74c3c, #f39c12, #2ecc71, #3498db);
}  main {
flex-grow: 1; background-color: white;
max-width: 80rem;
width: 100%;
margin: 0 auto;
padding: 0 var(--spacing-md);
border: 1px solid #e0e0e0; border-radius: var(--radius-md);  box-shadow: var(--shadow-card);
}
article {
opacity: 0;
transform: translateY(3rem);
animation: slideInUp 0.6s ease-out forwards;
}  .bloc-articles-courante {
list-style: none;
padding: 0;
margin: 20px 0 0 0;
}
.bloc-articles-courante li {
background: white;
border: 1px solid var(--site-principal-color);
border-radius: 6px;
margin-bottom: 12px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
width: 95%;
}
.bloc-articles-courante li:before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--site-principal-color);
transform: scaleY(0);
transition: transform 0.3s ease;
}
.bloc-articles-courante li:hover {
border-color: var(--site-principal-color);
transform: translateX(8px);
box-shadow: 0 4px 15px rgba(156, 43, 46, 0.15);
}
.bloc-articles-courante li:hover:before {
transform: scaleY(1);
}
.bloc-articles-courante a {
display: block;
padding: 18px 24px;
color: var(--site-principal-color);
text-decoration: none;
font-size: 1.05em;
font-weight: 500;
transition: color 0.2s ease;
}
.bloc-articles-courante a:hover {
color: var(--current-bulle-color);
} .compositeur {
color: #666;
font-weight: normal;
font-style: italic;
font-size: 0.92em;
} footer {
text-align:center;
color: white;
padding: var(--spacing-sm) 0;
background-color: var(--site-principal-color);
margin-top: auto; flex-shrink: 0;
} .legende-liste-articles {
color: var(--site-principal-color);
padding-left: var(--spacing-md);
margin-bottom: var(--spacing-xs);
}
ul.wp-block-latest-posts.wp-block-latest-posts__list {
display: flex;
flex-direction: column;
border-left: 3px solid var(--site-principal-color);
padding-left: 1.5rem; border-radius: var(--radius-lg);
} .structure-pages {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-md);
margin: var(--spacing-md) 0;
}
.structure-pages.col-2 {
grid-template-columns: repeat(2, 1fr);
}
.structure-pages.col-3 {
grid-template-columns: repeat(3, 1fr);
}
.page-fille {
border: solid 0.2rem var(--site-principal-color);
border-radius: var(--radius-lg);
padding: var(--spacing-sm) var(--spacing-md);
background-color: white;
transition: var(--transition-normal);
position: relative;
overflow: hidden;
}
.page-fille::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, 
transparent, 
rgba(255, 255, 255, 0.15), 
transparent);
transition: 0.6s ease;
}
.page-fille:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-elevated);
}
.page-fille:hover::after {
left: 100%;
}
.page-fille h3 {
font-size: var(--font-size-lg);
margin: var(--spacing-xs) 0;
color: var(--site-principal-color);
transition: var(--transition-fast);
}
.page-fille h3 a {
text-decoration: none;
color: inherit;
}
.featured-image {
margin: var(--spacing-xs) 0 var(--spacing-sm) 0;
text-align: center;
}
.featured-image img {
max-width: 100%;
height: auto;
border-radius: var(--radius-md);
}
.page-fille p {
margin: var(--spacing-xs) 0;
color: #555;
font-size: var(--font-size-base);
line-height: 1.6;
} .featured-image img {
width: 9rem; height: 9rem; border: solid 0.1rem var(--site-principal-color);
object-fit: cover; border-radius: 8px; float: left; margin: 0 1em 1em 0; transition: var(--transition-normal);
}
.page-fille {
border: solid 0.2rem var(--site-principal-color);
border-radius: var(--radius-lg);
padding: 0.2rem var(--spacing-md);
margin-bottom: var(--spacing-sm);
}
.page-fille:hover .featured-image img {
transform: scale(1.05); } .visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}  a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus { outline-offset: 2px;
} .menu-items a:focus {
background-color: var(--site-secondary-color);
color: white;
} .skip-link {
position: absolute;
top: -4rem;
left: 0.6rem;
background: var(--site-principal-color);
color: white;
padding: 0.8rem;
text-decoration: none;
z-index: 10000;
border-radius: var(--radius-sm);
}
.skip-link:focus {
top: 0.6rem;
} @media print { .menu-principal,
.menu-toggle,
.breadcrumb {
display: none !important;
} :root {
font-size: 75%; }
body {
color: black;
line-height: 1.4;
}
h1, h2, h3 {
color: black;
page-break-after: avoid;
} a {
color: black;
text-decoration: underline;
}
}  .comments-area {
margin-top: 2rem;
padding: 1rem 0;
border-top: 1px solid #ddd;
} .comment-list {
list-style: none;
padding: 0;
}
.comment-list li {
margin-bottom: 1em;
padding: 0.8em;
border: 1px solid #eee;
border-radius: 6px;
background: #fafafa;
} #toggle-comment-form {
display: inline-block;
padding: 0.5em 0.8em;
background: #f0f0f0;
border-radius: 5px;
text-decoration: none;
color: #333;
transition: background 0.2s;
}
#toggle-comment-form:hover {
background: #e0e0e0;
} #commentform input[type="text"],
#commentform input[type="email"],
#commentform textarea {
width: 100%;
padding: 0.6em;
margin-bottom: 0.8em;
border: 1px solid #ccc;
border-radius: 5px;
transition: var(--transition-fast);
}
#commentform input[type="text"]:focus,
#commentform input[type="email"]:focus,
#commentform textarea:focus {
transform: translateY(-1px); box-shadow: 0 4px 8px rgba(140, 1, 38, 0.1); }
#commentform input[type="submit"] {
background: #333;
color: #fff;
border: none;
padding: 0.6em 1.2em;
border-radius: 5px;
cursor: pointer;
transition: var(--transition-fast);
}
#commentform input[type="submit"]:hover {
background: #555;
transform: translateY(-1px); box-shadow: var(--shadow-card);
} .tableau-adage {
display: flex;
}
.tableau-adage div{
margin: 1rem;
width: 50%;
}
.tableau-adage img, .tableau-adage h1 {
width: 100%;
} .titre-equipe{
margin-top:2.5rem;
text-align: center;
}
.titre-equipe img {
width: 81%;
}
.photo-equipe {
display: flex;
text-align: center;
margin: 0 auto;
width: 80%;
border: solid 1px var(--site-principal-color);
border-radius: 5rem;
overflow: hidden; }
.photo-equipe img {
width:100%;
height: auto;
} .derniers-articles-accueil {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem; max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.derniers-articles {
background-color: #ffffff;
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
position: relative;
transition: var(--transition-normal);
}
.derniers-articles::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, 
var(--site-principal-color), 
var(--site-accent-color));
}
.derniers-articles:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-card);
}
.derniers-articles h3 {
font-size: 1.8rem;
font-weight: 200;
margin-bottom: 1rem;
color: #2d3748;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 0.5rem;
}
.derniers-articles ul {
list-style: none;
margin: 0;
padding: 0;
}
.derniers-articles li {
padding: 0.15rem 0;
border-bottom: 1px solid #f1f5f9;
}
.derniers-articles.bloc-posts li {
list-style: square;
color: #2c5aa0;
}
.derniers-articles.bloc-bulles li::before {
content: '';
display: inline-block;
position: relative;
background-image: var(--current-bulle-icone);
background-size: contain; background-repeat: no-repeat;
background-position: center;
margin-right: 1rem; vertical-align: middle;
width: 2rem;
height: 2rem;
}
.derniers-articles li:last-child {
border-bottom: none;
}
.derniers-articles a {
font-size: 1.5rem;
color: #3182ce;
text-decoration: none;
font-weight: 200;
transition: var(--transition-fast);
}
.derniers-articles a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--site-principal-color);
transition: var(--transition-fast);
}
.derniers-articles a:hover {
color: #2c5aa0;
}
.derniers-articles a:hover::after {
width: 100%;
} @media (max-width: 768px) {  header {
display: flex;
flex-direction: row;
align-items: center;
position: relative;
height: 9rem;
background-size: 17rem;
margin-top: 2rem;
border-top: 2px solid var(--site-principal-color);
border-bottom: 16px solid var(--site-principal-color);
} header div:first-child {
flex: 1;
text-align: left;
z-index: 10;
} header div:nth-child(2) {
position: absolute;
left: 50vw;
transform: translate(-50%, 1.5rem);
z-index: 5;
}
.lien-logo-header {
display: inline-block;
}
.logo-eac78 {
max-width: 12rem;
position: relative;
top: -0.2rem;
}
.titre-page {
margin: calc(1.2*var(--spacing-md)) 0 var(--spacing-md) 0;
}
.titre-accueil {
margin: 0 0 var(--spacing-md) 0;
} .menu-toggle {
display: block;
transform: translateX(1.5rem);
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
border: 2px solid var(--site-principal-color);
font-size: 1.8rem;
padding: 0.8rem 1rem;
cursor: pointer;
color: var(--site-principal-color);
border-radius: 0.8rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-weight: 600;
letter-spacing: 0.5px;
}
.menu-toggle:hover {
transform: translateX(1.4rem);
box-shadow: 0 6px 20px rgba(0,0,0,0.2);
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.menu-toggle:active {
transform: translateX(1.5rem);
transition: transform 0.1s ease;
} .menu-principal {
display: none;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-principal.open {
display: block;
} .menu-items {
display: flex;
flex-direction: column;
background: linear-gradient(180deg, var(--site-principal-color) 0%, #8b1538 100%);
position: absolute;
top: 100%;
left: 0;
width: 100%;
z-index: 9999;
transform: translateY(-1.5rem) scale(0.95);
opacity: 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
border-radius: 1rem;
overflow: hidden;
box-shadow: 
0 20px 40px rgba(0,0,0,0.2),
0 8px 16px rgba(0,0,0,0.1),
0 0 0 1px rgba(255,255,255,0.1);
margin-top: 0.5rem;
backdrop-filter: blur(10px);
padding: 0; margin: 0.5rem 0 0 0;
list-style: none; }
.menu-principal.open .menu-items {
transform: translateY(0) scale(1);
opacity: 1;
pointer-events: auto;
} .menu-items li {
width: 100%;
position: relative;
list-style: none;
margin: 0;
padding: 0;  } .menu-principal.open .menu-items li {
animation: slideInMenu 0.3s ease forwards;
} .menu-principal.open .menu-items li:nth-child(1) { animation-delay: 0.1s; }
.menu-principal.open .menu-items li:nth-child(2) { animation-delay: 0.15s; }
.menu-principal.open .menu-items li:nth-child(3) { animation-delay: 0.2s; }
.menu-principal.open .menu-items li:nth-child(4) { animation-delay: 0.25s; }
.menu-principal.open .menu-items li:nth-child(5) { animation-delay: 0.3s; }
.menu-principal.open .menu-items li:nth-child(6) { animation-delay: 0.35s; } .menu-items li:not(:last-child)::after {
content: '';
position: absolute;
bottom: 0;
left: 1.5rem;
right: 1.5rem;
height: 1px;
background: linear-gradient(90deg, 
transparent 0%, 
rgba(255,255,255,0.3) 20%, 
rgba(255,255,255,0.1) 80%, 
transparent 100%);
} .menu-items li a {
padding: 1.4rem 1.8rem;
display: block;
color: #ffffff !important; text-decoration: none;
font-weight: 500;
font-size: 1.05rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
letter-spacing: 0.3px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
} .menu-items li a::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.7) 100%);
transform: scaleY(0);
transition: transform 0.3s ease;
}
.menu-items li a:hover::before,
.menu-items li a:focus::before {
transform: scaleY(1);
}
.menu-items li a:hover,
.menu-items li a:focus {
background: linear-gradient(90deg, 
rgba(255,255,255,0.15) 0%, 
rgba(255,255,255,0.05) 100%);
color: #ffffff !important; transform: translateX(8px);
font-weight: 600;
} .menu-items li a.current,
.menu-items li a[aria-current="page"] {
color: #ffffff !important;
background: rgba(255,255,255,0.1);
font-weight: 600;
}
.menu-items li a.current::before,
.menu-items li a[aria-current="page"]::before {
transform: scaleY(1);
} .menu-toggle::before {
content: '☰';
margin: 0.5rem;
font-size: 1.2em;
color: var(--principal-site-color);
}
.menu-toggle.open::before {
content: '✕';
transform: rotate(180deg);
transition: transform 0.3s ease;
} .menu-items li ul.sub-menu {
display: none;
background-color: #444;
padding-left: 1rem;
}
.menu-items li:hover > ul.sub-menu {
display: block;
}
.menu-items li ul.sub-menu li a {
background-color: #555;
padding-left: 2rem;
} .menu-items li ul.sub-menu li ul.sub-menu {
background-color: #666;
padding-left: 2rem;
}
.menu-items li ul.sub-menu li ul.sub-menu li a {
padding-left: 3rem;
}
.fil-ariane {
margin-top: var(--spacing-md);
} h1 {
font-size: var(--font-size-2xl);
}
h2 {
font-size: var(--font-size-lg);
margin: var(--spacing-sm) var(--spacing-md) var(--spacing-xs) var(--spacing-md);
}
h3 {
font-size: var(--font-size-base);
margin: var(--spacing-xs) var(--spacing-md);
}
.breadcrumb ul {
font-size: 1.2rem; gap: 0.25rem;
}
.page-fille:hover {
transform: translateY(-2px); }
.titre-page:hover {
transform: none; }
.logo-eac78:hover {
transform: scale(1.01); }
} @media (max-width: 480px) { header {
border-bottom: 15px solid var(--site-principal-color);
}
.logo-eac78 {
position: relative;
top: -0.2rem;
max-width: 10rem;
}
.menu-items li a {
padding: 1.2rem;
font-size: var(--font-size-base);
}
.titre-page {
margin: var(--spacing-md) 0;
font-size: calc(1 * var(--font-size-2xl))
}
.titre-accueil {
margin: 0 0 var(--spacing-md) 0;
}
.structure-pages {
grid-template-columns: 1fr;
}
.structure-pages.col-2 {
grid-template-columns: 1fr;
}
.fil-ariane {
margin-top: var(--spacing-sm);
}
h1 {
font-size: var(--font-size-xl);
padding: var(--spacing-sm);
}
h2 {
font-size: var(--font-size-lg);
}
.derniers-articles-accueil {
grid-template-columns: 1fr;
}
.menu-pages-sœurs {
padding: var(--spacing-xs) var(--spacing-xs);
margin-bottom: var(--spacing-sm);
}
.menu-pages-sœurs .menu-titre {
font-size: 1.1rem;
margin-top: 1.1rem;
margin-bottom: var(--spacing-xs);
text-align: left;
}
.menu-pages-sœurs ul {
flex-direction: column;
gap: 0;
align-items: center;
}
.menu-pages-sœurs a {
padding: 0.2rem 0;
font-size: 1.5rem;
min-width: auto;
text-align: center;
}
.menu-pages-sœurs .current-page a::after {
left: 1em;
right: 1em;
}
}  @keyframes slideInMenu {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
} @keyframes slideInUp {
from {
opacity: 0;
transform: translateY(3rem);
}
to {
opacity: 1;
transform: translateY(0);
}
} .fichiers-audios li {
position: relative;
overflow: hidden;
}
.fichiers-audios li::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transform: translateX(-100%);
transition: transform 0.5s ease;
}
.fichiers-audios li:hover::before {
transform: translateX(100%);
} @keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInFromTop {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes gentlePulse {
0%, 100% {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
50% {
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
}
} .structure-pages .page-fille {
opacity: 0;
transform: translateY(20px); animation: fadeInUp 0.4s ease both; 
}
.structure-pages .page-fille:nth-child(1) { animation-delay: 0.05s; }
.structure-pages .page-fille:nth-child(2) { animation-delay: 0.1s; }
.structure-pages .page-fille:nth-child(3) { animation-delay: 0.15s; }
.structure-pages .page-fille:nth-child(4) { animation-delay: 0.2s; }