/* ═══════════════════════════════════════════
AGNES DEBACKER — Styles custom
Inspiré du style existant : Pacifico, orange #EC521E, charcoal
═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Roboto+Slab:wght@300;400;500;600;700&family=Source+Sans+3:wght@300;400;600;700&display=swap');
:root {
--agnes-primary: #00A4C8;
--agnes-primary-dark: #0088a8;
--agnes-primary-light: rgba(0, 164, 200, 0.1);
--agnes-blue: #00A4C8;
--agnes-blue-dark: #0088a8;
--agnes-blue-light: rgba(0, 164, 200, 0.1);
--agnes-blue-deep: #003d54;
--agnes-orange: #EC521E;
--agnes-charcoal: #32373c;
--agnes-text: #32373c;
--agnes-text-light: #5a5a5a;
--agnes-bg: #ffffff;
--agnes-bg-warm: #eaf4ed; /* vert sauge pâle — complément frais du turquoise */
--agnes-bg-alt: #e7f4f8; /* turquoise très pâle (ex-beige moyen) — rappelle le bleu #00A4C8 */
--agnes-white: #ffffff;
--agnes-cream: #f3f8fa; /* blanc-bleu nacré (ex-crème beige) */
--agnes-surface: #ffffff;
--agnes-surface-2: #f3f8fa;
--agnes-border: rgba(0, 0, 0, 0.1);
--agnes-shadow-color: 0, 61, 84;
--agnes-radius: 12px;
--agnes-radius-pill: 9999px;
--agnes-shadow: 4px 4px 0 0 var(--agnes-blue-deep); /* ombre dure au repos */
--agnes-shadow-hover: 6px 6px 0 0 var(--agnes-blue-deep); /* ombre dure accentuée au survol */
--agnes-transition: 0.3s ease;
--agnes-font-display: 'Caveat', 'Pacifico', cursive;
--agnes-font-display-weight: 700;
--agnes-font-display-scale: 1.35; /* Caveat rend plus petit que Pacifico à taille égale */
--agnes-font-serif: 'Roboto Slab', Georgia, serif;
--agnes-font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* ═══════════════════════════════════════════
DARK MODE — active via prefers-color-scheme OU data-theme="dark"
═══════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--agnes-text: #e8ecef;
--agnes-text-light: #b0b8bd;
--agnes-charcoal: #e8ecef;
--agnes-bg: #0e1a22;
--agnes-bg-warm: #15222c;
--agnes-bg-alt: #1a2a36;
--agnes-white: #1a2a36;
--agnes-cream: #15222c;
--agnes-surface: #1a2a36;
--agnes-surface-2: #203443;
--agnes-border: rgba(255, 255, 255, 0.1);
--agnes-primary-light: rgba(0, 164, 200, 0.18);
--agnes-shadow-color: 0, 0, 0;
}
}
/* Override manuel via le toggle */
[data-theme="dark"] {
--agnes-text: #e8ecef;
--agnes-text-light: #b0b8bd;
--agnes-charcoal: #e8ecef;
--agnes-bg: #0e1a22;
--agnes-bg-warm: #15222c;
--agnes-bg-alt: #1a2a36;
--agnes-white: #1a2a36;
--agnes-cream: #15222c;
--agnes-surface: #1a2a36;
--agnes-surface-2: #203443;
--agnes-border: rgba(255, 255, 255, 0.1);
--agnes-primary-light: rgba(0, 164, 200, 0.18);
--agnes-shadow-color: 0, 0, 0;
}
/* Ajustements visuels en dark mode */
[data-theme="dark"] body,
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) body { background: var(--agnes-bg); }
}
[data-theme="dark"] body { background: var(--agnes-bg); }
[data-theme="dark"] .agnes-portrait-badge img,
[data-theme="dark"] .agnes-hero-presta {
filter: brightness(0.85);
}
[data-theme="dark"] .agnes-presta-sub,
[data-theme="dark"] .agnes-dernier-livre__cover img,
[data-theme="dark"] .agnes-gallery__item {
background: var(--agnes-surface-2);
}
[data-theme="dark"] .agnes-prestation-card,
[data-theme="dark"] .agnes-evt-card {
background: var(--agnes-surface);
}
/* ── Global ── */
body {
font-family: var(--agnes-font-body);
color: var(--agnes-text);
line-height: 1.7;
background: var(--agnes-bg);
transition: background-color 0.3s ease, color 0.3s ease;
}
/* ═══════════════════════════════════════════
TOGGLE DARK MODE — bouton flottant
═══════════════════════════════════════════ */
.agnes-theme-toggle {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--agnes-surface);
color: var(--agnes-text);
border: 2px solid var(--agnes-blue-deep);
box-shadow: 4px 4px 0 0 var(--agnes-blue-deep);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 500;
font-size: 1.4rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
padding: 0;
}
.agnes-theme-toggle:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 0 var(--agnes-blue-deep);
}
.agnes-theme-toggle:active {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0 0 var(--agnes-blue-deep);
}
.agnes-theme-toggle__icon--sun { display: none; }
.agnes-theme-toggle__icon--moon { display: block; }
[data-theme="dark"] .agnes-theme-toggle__icon--sun { display: block; }
[data-theme="dark"] .agnes-theme-toggle__icon--moon { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .agnes-theme-toggle__icon--sun { display: block; }
:root:not([data-theme="light"]) .agnes-theme-toggle__icon--moon { display: none; }
}
@media (max-width: 600px) {
.agnes-theme-toggle {
width: 44px;
height: 44px;
bottom: 1rem;
right: 1rem;
font-size: 1.1rem;
}
}
/* Caveat étant plus fin que Pacifico, on force le weight 700 et un petit tracking
sur tous les éléments qui utilisent la police d'affichage */
.agnes-hero__title,
.agnes-section__title,
.agnes-hero-presta h1,
.agnes-hero-presta__intro,
.agnes-prestation-card h3,
.agnes-dernier-livre__info h3,
.agnes-contact-cta h2,
.agnes-portrait-badge__hello,
.agnes-page-header h1,
.agnes-footer h4 {
font-weight: var(--agnes-font-display-weight);
letter-spacing: 0.01em;
line-height: 1.1;
}
/* ── Container ── */
.agnes-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 2rem;
}
/* ── Boutons ── */
.agnes-btn {
display: inline-block;
padding: 0.85rem 2rem;
border-radius: var(--agnes-radius-pill);
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
font-family: var(--agnes-font-body);
transition: all var(--agnes-transition);
cursor: pointer;
border: 2px solid transparent;
letter-spacing: 0.02em;
}
.agnes-btn--primary {
background: var(--agnes-charcoal);
color: var(--agnes-white);
}
.agnes-btn--primary:hover {
background: var(--agnes-primary);
color: var(--agnes-white);
}
.agnes-btn--secondary {
background: transparent;
color: var(--agnes-charcoal);
border-color: var(--agnes-charcoal);
}
.agnes-btn--secondary:hover {
background: var(--agnes-primary);
color: var(--agnes-white);
border-color: var(--agnes-primary);
}
.agnes-btn--small {
padding: 0.5rem 1.2rem;
font-size: 0.85rem;
background: var(--agnes-primary);
color: var(--agnes-white);
border-radius: var(--agnes-radius-pill);
text-decoration: none;
}
.agnes-btn--small:hover {
background: var(--agnes-primary-dark);
color: var(--agnes-white);
}
/* ═══════════════════════════════════════════
HERO — Page d'accueil
═══════════════════════════════════════════ */
.agnes-hero {
position: relative;
overflow: hidden;
isolation: isolate;
padding: 6rem 2rem;
text-align: center;
background-color: var(--agnes-bg-warm);
background-image:
/* Motif petites étoiles discrètes (SVG inline) */
url("data:image/svg+xml;utf8,"),
/* Halo sauge haut-gauche */
radial-gradient(ellipse at 15% 25%, rgba(95, 155, 115, 0.22), transparent 55%),
/* Halo turquoise bas-droit */
radial-gradient(ellipse at 85% 75%, rgba(0, 164, 200, 0.22), transparent 55%),
/* Halo chaud très doux au centre-bas */
radial-gradient(ellipse at 50% 110%, rgba(255, 226, 200, 0.35), transparent 50%);
background-size: 120px 120px, 100% 100%, 100% 100%, 100% 100%;
background-repeat: repeat, no-repeat, no-repeat, no-repeat;
background-position: 0 0, 0 0, 0 0, 0 0;
}
/* Grand cercle pastel en haut à droite */
.agnes-hero::before {
content: "";
position: absolute;
width: 340px;
height: 340px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 164, 200, 0.14) 0%, transparent 70%);
top: -120px;
right: -100px;
pointer-events: none;
z-index: -1;
}
/* Cercle sauge en bas à gauche */
.agnes-hero::after {
content: "";
position: absolute;
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(95, 155, 115, 0.18) 0%, transparent 70%);
bottom: -80px;
left: -70px;
pointer-events: none;
z-index: -1;
}
.agnes-hero__title {
font-family: var(--agnes-font-display);
font-size: 5rem;
color: var(--agnes-text);
margin-bottom: 0.5rem;
font-weight: var(--agnes-font-display-weight);
line-height: 1;
}
.agnes-hero__subtitle {
font-family: var(--agnes-font-serif);
font-size: 1.3rem;
color: var(--agnes-primary);
margin-bottom: 0.5rem;
font-style: italic;
}
.agnes-hero__tagline {
font-size: 1.05rem;
color: var(--agnes-text-light);
margin-bottom: 2.5rem;
letter-spacing: 0.03em;
}
.agnes-hero__actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* ═══════════════════════════════════════════
SECTIONS
═══════════════════════════════════════════ */
.agnes-section {
padding: 5rem 0;
}
.agnes-section__title {
font-family: var(--agnes-font-display);
font-size: 2.75rem;
color: var(--agnes-text);
margin-bottom: 0.75rem;
text-align: center;
line-height: 1.1;
}
.agnes-section__title::after {
content: '';
display: block;
width: 50px;
height: 3px;
background: var(--agnes-primary);
margin: 0.75rem auto 0;
border-radius: 2px;
}
.agnes-section__intro {
text-align: center;
color: var(--agnes-text-light);
margin-bottom: 2.5rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
font-size: 1.05rem;
}
.agnes-section__cta {
text-align: center;
margin-top: 2.5rem;
}
/* ═══════════════════════════════════════════
PAGE HEADER — bandeau dégradé + motif pois + formes déco
═══════════════════════════════════════════ */
.agnes-page-header {
position: relative;
overflow: hidden;
isolation: isolate;
padding: 4rem 2rem;
text-align: center;
margin-bottom: 2rem;
background-color: var(--agnes-bg-warm);
background-image:
/* Motif petits pois turquoise très discrets */
radial-gradient(circle, rgba(0, 164, 200, 0.09) 1.5px, transparent 2px),
/* Halo sauge en haut à gauche */
radial-gradient(ellipse at 15% 20%, rgba(95, 155, 115, 0.22), transparent 55%),
/* Halo turquoise en bas à droite */
radial-gradient(ellipse at 85% 80%, rgba(0, 164, 200, 0.18), transparent 55%);
background-size: 28px 28px, 100% 100%, 100% 100%;
background-repeat: repeat, no-repeat, no-repeat;
background-position: 0 0, 0 0, 0 0;
}
/* Cercle pastel décoratif en haut à droite */
.agnes-page-header::before {
content: "";
position: absolute;
width: 240px;
height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 164, 200, 0.13) 0%, transparent 70%);
top: -80px;
right: -80px;
pointer-events: none;
z-index: -1;
}
/* Cercle pastel décoratif en bas à gauche */
.agnes-page-header::after {
content: "";
position: absolute;
width: 170px;
height: 170px;
border-radius: 50%;
background: radial-gradient(circle, rgba(95, 155, 115, 0.16) 0%, transparent 70%);
bottom: -60px;
left: -50px;
pointer-events: none;
z-index: -1;
}
.agnes-page-header h1 {
font-family: var(--agnes-font-display);
font-size: 2.5rem;
color: var(--agnes-text);
margin: 0;
font-weight: 400;
}
.agnes-page-header__intro {
font-family: var(--agnes-font-serif);
color: var(--agnes-text-light);
max-width: 650px;
margin: 1.25rem auto 0;
font-size: 1.05rem;
font-style: italic;
}
/* — Variation « Livres » : pois plus denses + accent chaud en signature */
.agnes-page-header--livres {
background-image:
/* Deux couches de pois pour un rendu plus riche */
radial-gradient(circle, rgba(0, 164, 200, 0.10) 1.5px, transparent 2px),
radial-gradient(circle, rgba(236, 82, 30, 0.06) 1px, transparent 1.5px),
radial-gradient(ellipse at 10% 20%, rgba(95, 155, 115, 0.22), transparent 55%),
radial-gradient(ellipse at 90% 80%, rgba(0, 164, 200, 0.20), transparent 55%);
background-size: 32px 32px, 18px 18px, 100% 100%, 100% 100%;
background-position: 0 0, 9px 9px, 0 0, 0 0;
background-repeat: repeat, repeat, no-repeat, no-repeat;
}
/* — Variation « À propos » : plus doux, plus chaleureux */
.agnes-page-header--apropos {
background-image:
radial-gradient(circle, rgba(95, 155, 115, 0.10) 1.5px, transparent 2px),
radial-gradient(ellipse at 20% 30%, rgba(253, 232, 200, 0.55), transparent 55%),
radial-gradient(ellipse at 80% 70%, rgba(231, 244, 248, 0.70), transparent 55%);
background-size: 30px 30px, 100% 100%, 100% 100%;
background-repeat: repeat, no-repeat, no-repeat;
}
.agnes-page-header--apropos::before {
background: radial-gradient(circle, rgba(95, 155, 115, 0.18) 0%, transparent 70%);
}
.agnes-page-header--apropos::after {
background: radial-gradient(circle, rgba(236, 82, 30, 0.10) 0%, transparent 70%);
}
/* ═══════════════════════════════════════════
DERNIER LIVRE (accueil)
═══════════════════════════════════════════ */
.agnes-dernier-livre__grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 3rem;
align-items: start;
}
.agnes-dernier-livre__cover img {
width: 100%;
height: auto;
border-radius: var(--agnes-radius);
box-shadow: var(--agnes-shadow);
transition: transform var(--agnes-transition), box-shadow var(--agnes-transition);
}
.agnes-dernier-livre__cover:hover img {
transform: translateY(-4px);
box-shadow: var(--agnes-shadow-hover);
}
.agnes-dernier-livre__info h3 {
font-family: var(--agnes-font-serif);
font-size: 1.5rem;
margin-top: 0;
}
.agnes-dernier-livre__info h3 a {
color: var(--agnes-text);
text-decoration: none;
}
.agnes-dernier-livre__info h3 a:hover {
color: var(--agnes-primary);
}
.agnes-dernier-livre__editeur {
color: var(--agnes-primary);
font-weight: 600;
margin-bottom: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.85rem;
}
.agnes-dernier-livre__illustrateur {
color: var(--agnes-text-light);
font-style: italic;
font-family: var(--agnes-font-serif);
}
/* ═══════════════════════════════════════════
ACCUEIL — Bloc à propos (section bleue)
═══════════════════════════════════════════ */
.agnes-apropos-home {
background: var(--agnes-blue);
color: var(--agnes-white);
position: relative;
overflow: hidden;
}
.agnes-apropos-home::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.05);
border-radius: 50%;
}
.agnes-apropos-home::after {
content: '';
position: absolute;
bottom: -30%;
left: -5%;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.05);
border-radius: 50%;
}
.agnes-apropos-home .agnes-container {
position: relative;
z-index: 1;
}
.agnes-apropos-home .agnes-section__title {
color: var(--agnes-white);
}
.agnes-apropos-home .agnes-section__title::after {
background: var(--agnes-white);
}
.agnes-apropos-home__text {
max-width: 700px;
margin: 0 auto;
text-align: center;
}
.agnes-apropos-home__text h2.agnes-section__title {
text-align: center;
}
/* Variante avec portrait — layout deux colonnes */
.agnes-apropos-home__grid--with-portrait {
display: grid;
grid-template-columns: auto 1fr;
gap: 3rem;
align-items: center;
max-width: 1000px;
margin: 0 auto;
}
.agnes-apropos-home__grid--with-portrait .agnes-apropos-home__text {
text-align: left;
margin: 0;
}
.agnes-apropos-home__grid--with-portrait .agnes-apropos-home__text h2.agnes-section__title {
text-align: left !important;
}
@media (max-width: 768px) {
.agnes-apropos-home__grid--with-portrait {
grid-template-columns: 1fr;
gap: 1.5rem;
text-align: center;
}
.agnes-apropos-home__grid--with-portrait .agnes-apropos-home__text,
.agnes-apropos-home__grid--with-portrait .agnes-apropos-home__text h2.agnes-section__title {
text-align: center !important;
}
}
/* Badge portrait N&B avec coucou animé */
.agnes-portrait-badge {
position: relative;
width: 200px;
height: 200px;
}
.agnes-portrait-badge img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
border: 5px solid #fff;
box-shadow: 6px 6px 0 0 var(--agnes-blue-deep);
filter: grayscale(100%) contrast(1.05);
transition: filter 0.4s ease, transform 0.4s ease;
display: block;
}
.agnes-portrait-badge:hover img {
filter: grayscale(0%) contrast(1);
transform: rotate(-2deg);
}
.agnes-portrait-badge__wave {
position: absolute;
top: -10px;
right: -10px;
font-size: 2.5rem;
transform-origin: 70% 70%;
animation: agnes-wave 2.8s ease-in-out infinite;
display: inline-block;
}
@keyframes agnes-wave {
0%, 60%, 100% { transform: rotate(0deg); }
10% { transform: rotate(14deg); }
20% { transform: rotate(-8deg); }
30% { transform: rotate(14deg); }
40% { transform: rotate(-4deg); }
50% { transform: rotate(10deg); }
}
.agnes-portrait-badge__hello {
position: absolute;
bottom: -8px;
left: -18px;
background: var(--agnes-primary);
color: #fff;
font-family: var(--agnes-font-display);
font-size: 1.05rem;
padding: 0.4rem 0.9rem;
border-radius: 20px;
transform: rotate(-6deg);
box-shadow: 3px 3px 0 0 var(--agnes-blue-deep);
white-space: nowrap;
pointer-events: none;
transition: transform 0.3s ease;
}
.agnes-portrait-badge:hover .agnes-portrait-badge__hello {
transform: rotate(-6deg) scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
.agnes-portrait-badge__wave { animation: none; }
}
.agnes-apropos-home__text p {
font-family: var(--agnes-font-serif);
font-size: 1.1rem;
line-height: 1.9;
color: var(--agnes-white);
font-style: italic;
opacity: 0.95;
}
.agnes-apropos-home__text .agnes-btn {
background: var(--agnes-white);
color: var(--agnes-blue);
border-color: var(--agnes-white);
margin-top: 1rem;
}
.agnes-apropos-home__text .agnes-btn:hover {
background: var(--agnes-charcoal);
color: var(--agnes-white);
border-color: var(--agnes-charcoal);
}
/* ═══════════════════════════════════════════
PRESTATIONS (accueil)
═══════════════════════════════════════════ */
.agnes-prestations {
background: var(--agnes-bg-warm);
}
.agnes-prestations__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 1.5rem;
}
a.agnes-prestation-card,
.agnes-prestation-card {
background: var(--agnes-white);
padding: 2.5rem 1.75rem;
border-radius: var(--agnes-radius);
text-align: center;
box-shadow: var(--agnes-shadow);
transition: all var(--agnes-transition);
border-bottom: 3px solid transparent;
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: inherit;
position: relative;
}
a.agnes-prestation-card:hover,
.agnes-prestation-card:hover {
transform: translateY(-6px);
box-shadow: var(--agnes-shadow-hover);
border-bottom-color: var(--agnes-primary);
text-decoration: none;
color: inherit;
}
.agnes-prestation-card__icon {
font-size: 2.5rem;
color: var(--agnes-primary);
margin-bottom: 1rem;
display: block;
transition: transform var(--agnes-transition);
}
a.agnes-prestation-card:hover .agnes-prestation-card__icon {
transform: scale(1.15);
}
.agnes-prestation-card h3 {
font-family: var(--agnes-font-serif);
font-size: 1.05rem;
color: var(--agnes-text);
margin-bottom: 0.75rem;
}
.agnes-prestation-card p {
color: var(--agnes-text-light);
font-size: 0.92rem;
line-height: 1.6;
margin-bottom: 1rem;
flex: 1;
}
.agnes-prestation-card__more {
display: inline-block;
color: var(--agnes-primary);
font-weight: 600;
font-size: 0.92rem;
margin-top: auto;
opacity: 0;
transform: translateY(6px);
transition: all var(--agnes-transition);
}
a.agnes-prestation-card:hover .agnes-prestation-card__more {
opacity: 1;
transform: translateY(0);
}
/* ═══════════════════════════════════════════
CATALOGUE LIVRES
═══════════════════════════════════════════ */
.agnes-filtres {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 2.5rem;
}
.agnes-filtre {
padding: 0.5rem 1.25rem;
border-radius: var(--agnes-radius-pill);
text-decoration: none;
font-size: 0.9rem;
color: var(--agnes-text-light);
border: 1px solid #ddd;
transition: all var(--agnes-transition);
font-weight: 500;
}
.agnes-filtre:hover,
.agnes-filtre--actif {
background: var(--agnes-charcoal);
color: var(--agnes-white);
border-color: var(--agnes-charcoal);
}
.agnes-livres-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 2.5rem;
margin-bottom: 3rem;
}
.agnes-livre-card__link {
text-decoration: none;
color: inherit;
display: block;
}
.agnes-livre-card__cover {
aspect-ratio: 2/3;
overflow: hidden;
border-radius: var(--agnes-radius);
box-shadow: var(--agnes-shadow);
margin-bottom: 1rem;
transition: all var(--agnes-transition);
}
.agnes-livre-card:hover .agnes-livre-card__cover {
transform: translateY(-6px);
box-shadow: var(--agnes-shadow-hover);
}
.agnes-livre-card__cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.agnes-livre-card__placeholder {
width: 100%;
height: 100%;
background: var(--agnes-bg-alt);
}
.agnes-livre-card__title {
font-family: var(--agnes-font-serif);
font-size: 0.95rem;
margin: 0 0 0.25rem;
color: var(--agnes-text);
}
.agnes-livre-card__editeur {
font-size: 0.8rem;
color: var(--agnes-primary);
margin: 0;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
}
.agnes-livre-card__annee {
font-size: 0.8rem;
color: var(--agnes-text-light);
margin: 0;
}
/* ═══════════════════════════════════════════
FICHE LIVRE (single)
═══════════════════════════════════════════ */
.agnes-single-livre {
padding: 3rem 0;
}
.agnes-single-livre__grid {
display: grid;
grid-template-columns: 320px 1fr;
gap: 3rem;
align-items: start;
}
.agnes-single-livre__cover img {
width: 100%;
height: auto;
border-radius: var(--agnes-radius);
box-shadow: var(--agnes-shadow);
}
.agnes-single-livre__title {
font-family: var(--agnes-font-serif);
font-size: 2rem;
margin-top: 0;
color: var(--agnes-text);
}
.agnes-single-livre__meta {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.4rem 1.5rem;
margin-bottom: 1.5rem;
padding: 1.25rem;
background: var(--agnes-bg-alt);
border-radius: var(--agnes-radius);
}
.agnes-single-livre__meta dt {
font-weight: 600;
color: var(--agnes-text);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.agnes-single-livre__meta dd {
margin: 0;
color: var(--agnes-text-light);
}
.agnes-single-livre__extrait {
border-left: 4px solid var(--agnes-primary);
padding: 1.25rem 1.75rem;
margin: 1.5rem 0;
font-style: italic;
font-family: var(--agnes-font-serif);
color: var(--agnes-text-light);
background: var(--agnes-cream);
border-radius: 0 var(--agnes-radius) var(--agnes-radius) 0;
font-size: 1.05rem;
line-height: 1.8;
}
.agnes-single-livre__description {
margin-bottom: 2rem;
line-height: 1.8;
font-size: 1.05rem;
}
/* Navigation livre */
.agnes-single-livre__nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--agnes-bg-alt);
flex-wrap: wrap;
gap: 1rem;
}
.agnes-single-livre__nav a {
color: var(--agnes-primary);
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
transition: color var(--agnes-transition);
}
.agnes-single-livre__nav a:hover {
color: var(--agnes-primary-dark);
}
/* ═══════════════════════════════════════════
INTERVENTIONS
═══════════════════════════════════════════ */
.agnes-intervention {
padding: 3rem 0;
border-bottom: 1px solid var(--agnes-bg-alt);
}
.agnes-intervention:last-of-type {
border-bottom: none;
}
.agnes-intervention__grid {
display: grid;
grid-template-columns: 80px 1fr;
gap: 2rem;
align-items: start;
}
.agnes-intervention__icon {
width: 70px;
height: 70px;
background: var(--agnes-primary-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 0 var(--agnes-blue-deep);
transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.agnes-intervention__icon .dashicons {
font-size: 2rem;
width: 2rem;
height: 2rem;
color: var(--agnes-primary);
}
.agnes-intervention__content h2 {
font-family: var(--agnes-font-serif);
font-size: 1.4rem;
color: var(--agnes-text);
margin-top: 0;
}
.agnes-intervention__desc p {
line-height: 1.8;
color: var(--agnes-text-light);
}
.agnes-intervention__desc ul {
color: var(--agnes-text-light);
padding-left: 1.2rem;
}
.agnes-intervention__desc li {
margin-bottom: 0.4rem;
}
/* CTA contact */
.agnes-contact-cta {
text-align: center;
background: var(--agnes-bg-warm);
padding: 3.5rem 2rem;
border-radius: var(--agnes-radius);
margin-top: 2rem;
}
.agnes-contact-cta h2 {
font-family: var(--agnes-font-display);
font-weight: 400;
font-size: 1.6rem;
margin-bottom: 0.5rem;
}
/* ═══════════════════════════════════════════
AGENDA / ÉVÉNEMENTS
═══════════════════════════════════════════ */
.agnes-agenda__list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.agnes-evt-card {
display: flex;
gap: 1.5rem;
padding: 1.75rem;
background: var(--agnes-white);
border-radius: var(--agnes-radius);
box-shadow: var(--agnes-shadow);
align-items: start;
transition: all var(--agnes-transition);
border-left: 4px solid transparent;
}
.agnes-evt-card--avenir:hover {
border-left-color: var(--agnes-blue);
box-shadow: var(--agnes-shadow-hover);
}
.agnes-evt-card--passe {
opacity: 0.6;
}
.agnes-evt-card__date {
display: flex;
flex-direction: column;
align-items: center;
min-width: 65px;
background: var(--agnes-blue);
color: var(--agnes-white);
border-radius: var(--agnes-radius);
padding: 0.75rem 0.5rem;
}
.agnes-evt-card__jour {
font-size: 1.6rem;
font-weight: 700;
line-height: 1;
}
.agnes-evt-card__mois {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.agnes-evt-card__info h3 {
margin: 0 0 0.3rem;
font-family: var(--agnes-font-serif);
font-size: 1.1rem;
color: var(--agnes-text);
}
.agnes-evt-card__type {
display: inline-block;
background: var(--agnes-blue-light);
padding: 0.2rem 0.75rem;
border-radius: var(--agnes-radius-pill);
font-size: 0.8rem;
color: var(--agnes-blue-dark);
font-weight: 600;
margin-bottom: 0.4rem;
}
.agnes-evt-card__heure,
.agnes-evt-card__lieu {
margin: 0.15rem 0;
font-size: 0.9rem;
color: var(--agnes-text-light);
}
.agnes-evt-card__desc {
margin-top: 0.5rem;
font-size: 0.9rem;
}
.agnes-section--passes {
opacity: 0.8;
}
.agnes-empty {
text-align: center;
color: var(--agnes-text-light);
font-style: italic;
font-family: var(--agnes-font-serif);
padding: 3rem;
}
/* ═══════════════════════════════════════════
À PROPOS
═══════════════════════════════════════════ */
.agnes-apropos__grid {
display: grid;
grid-template-columns: 300px 1fr;
gap: 3rem;
align-items: start;
}
.agnes-apropos__photo img {
width: 100%;
height: auto;
border-radius: var(--agnes-radius);
box-shadow: var(--agnes-shadow);
}
.agnes-apropos__photo-placeholder {
width: 100%;
aspect-ratio: 3/4;
background: var(--agnes-bg-alt);
border-radius: var(--agnes-radius);
}
.agnes-apropos__content h2 {
font-family: var(--agnes-font-display);
font-size: 1.8rem;
color: var(--agnes-text);
margin-top: 0;
font-weight: 400;
}
.agnes-apropos__content p {
font-size: 1.05rem;
line-height: 1.9;
color: var(--agnes-text-light);
}
.agnes-apropos__details {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid var(--agnes-bg-alt);
}
.agnes-apropos__details h3 {
font-family: var(--agnes-font-serif);
font-size: 1.1rem;
color: var(--agnes-text);
margin-bottom: 0.5rem;
}
.agnes-apropos__details ul {
padding-left: 1.2rem;
color: var(--agnes-text-light);
}
.agnes-apropos__details a {
color: var(--agnes-primary);
text-decoration: none;
}
.agnes-apropos__details a:hover {
text-decoration: underline;
}
/* ═══════════════════════════════════════════
CONTACT
═══════════════════════════════════════════ */
.agnes-contact__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: start;
}
.agnes-contact__info h2,
.agnes-contact__form h2 {
font-family: var(--agnes-font-serif);
font-size: 1.4rem;
color: var(--agnes-text);
margin-top: 0;
}
.agnes-contact__detail {
display: flex;
gap: 1rem;
align-items: start;
margin-bottom: 1.5rem;
}
.agnes-contact__detail .dashicons {
color: var(--agnes-primary);
font-size: 1.5rem;
width: 1.5rem;
height: 1.5rem;
margin-top: 0.2rem;
}
.agnes-contact__detail p {
margin: 0;
color: var(--agnes-text-light);
line-height: 1.6;
}
.agnes-contact__detail a {
color: var(--agnes-primary);
text-decoration: none;
}
.agnes-contact__detail a:hover {
text-decoration: underline;
}
.agnes-contact__charte {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--agnes-bg-alt);
}
.agnes-contact__charte p {
font-size: 0.9rem;
color: var(--agnes-text-light);
}
.agnes-contact__charte a {
color: var(--agnes-primary);
}
/* Formulaire styles */
.agnes-contact__form input[type="text"],
.agnes-contact__form input[type="email"],
.agnes-contact__form input[type="tel"],
.agnes-contact__form textarea {
width: 100%;
padding: 0.85rem 1rem;
border: 2px solid var(--agnes-bg-alt);
border-radius: var(--agnes-radius);
font-size: 0.95rem;
font-family: var(--agnes-font-body);
transition: border-color var(--agnes-transition);
background: var(--agnes-white);
}
.agnes-contact__form input:focus,
.agnes-contact__form textarea:focus {
outline: none;
border-color: var(--agnes-primary);
}
.agnes-contact__form input[type="submit"] {
background: var(--agnes-charcoal);
color: var(--agnes-white);
border: none;
padding: 0.85rem 2.5rem;
border-radius: var(--agnes-radius-pill);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background var(--agnes-transition);
font-family: var(--agnes-font-body);
}
.agnes-contact__form input[type="submit"]:hover {
background: var(--agnes-primary);
}
/* ═══════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 768px) {
.agnes-hero {
padding: 4rem 1.5rem;
}
.agnes-hero__title {
font-size: 2.2rem;
}
.agnes-hero__subtitle {
font-size: 1.1rem;
}
.agnes-dernier-livre__grid,
.agnes-single-livre__grid {
grid-template-columns: 1fr;
}
.agnes-dernier-livre__cover {
max-width: 250px;
margin: 0 auto;
}
.agnes-single-livre__cover {
max-width: 280px;
margin: 0 auto;
}
.agnes-intervention__grid {
grid-template-columns: 1fr;
}
.agnes-intervention__icon {
margin: 0 auto;
}
.agnes-apropos__grid {
grid-template-columns: 1fr;
}
.agnes-apropos__photo {
max-width: 250px;
margin: 0 auto;
}
.agnes-contact__grid {
grid-template-columns: 1fr;
}
.agnes-livres-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.agnes-page-header h1 {
font-size: 2rem;
}
}
@media (max-width: 480px) {
.agnes-livres-grid {
grid-template-columns: 1fr;
max-width: 250px;
margin: 0 auto 3rem;
}
.agnes-hero__title {
font-size: 1.8rem;
}
}
/* ═══════════════════════════════════════════
PAGES PRESTATIONS (lecture, rencontres, formation, ateliers)
═══════════════════════════════════════════ */
/* ── Hero avec image de fond N&B ── */
.agnes-hero-presta {
position: relative;
min-height: 480px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
border-bottom: 4px solid var(--agnes-primary);
filter: grayscale(100%) contrast(1.05);
}
.agnes-hero-presta__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(135deg, rgba(50, 55, 60, 0.55) 0%, rgba(50, 55, 60, 0.75) 100%);
z-index: 1;
}
.agnes-hero-presta__content {
position: relative;
z-index: 2;
padding: 5rem 2rem;
color: #fff;
}
.agnes-hero-presta .agnes-presta-icon {
background: var(--agnes-primary);
box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.35); /* ombre dure, fond sombre du hero */
border: 3px solid rgba(255, 255, 255, 0.9);
}
.agnes-hero-presta h1 {
font-family: var(--agnes-font-display);
color: #fff;
font-size: 4.75rem;
margin: 0 0 1rem;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
line-height: 1;
}
.agnes-hero-presta__intro {
font-family: var(--agnes-font-serif);
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.95);
font-style: italic;
max-width: 720px;
margin: 0 auto;
line-height: 1.5;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
/* Ancienne version conservée pour compat */
.agnes-page-header--presta {
background: linear-gradient(135deg, var(--agnes-bg-warm) 0%, #fff 100%);
padding: 4rem 0 3rem;
text-align: center;
border-bottom: 3px solid var(--agnes-primary);
position: relative;
overflow: hidden;
}
.agnes-page-header--presta::before,
.agnes-page-header--presta::after {
content: '';
position: absolute;
border-radius: 50%;
opacity: 0.08;
}
.agnes-page-header--presta::before {
width: 250px;
height: 250px;
background: var(--agnes-primary);
top: -80px;
right: -80px;
}
.agnes-page-header--presta::after {
width: 180px;
height: 180px;
background: var(--agnes-blue);
bottom: -60px;
left: -60px;
}
.agnes-page-header--presta .agnes-container {
position: relative;
z-index: 2;
}
.agnes-presta-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
background: var(--agnes-primary);
color: #fff;
border-radius: 50%;
margin-bottom: 1.5rem;
box-shadow: 5px 5px 0 0 var(--agnes-blue-deep); /* ombre dure */
}
.agnes-presta-icon .dashicons {
font-size: 40px;
width: 40px;
height: 40px;
}
.agnes-page-header--presta h1 {
font-family: var(--agnes-font-display);
color: var(--agnes-charcoal);
font-size: 3rem;
margin: 0 0 1rem;
}
.agnes-page-header__intro {
font-family: var(--agnes-font-serif);
font-size: 1.25rem;
color: var(--agnes-text-light);
font-style: italic;
max-width: 700px;
margin: 0 auto;
line-height: 1.5;
}
.agnes-presta-content {
padding: 4rem 2rem;
}
.agnes-presta-block {
background: #fff;
border-radius: var(--agnes-radius);
padding: 2.5rem;
margin-bottom: 2rem;
box-shadow: var(--agnes-shadow);
border-left: 4px solid var(--agnes-primary);
}
.agnes-presta-block--alt {
background: linear-gradient(135deg, var(--agnes-primary) 0%, var(--agnes-blue-deep) 100%);
border-left-color: var(--agnes-blue-deep);
color: #fff;
position: relative;
overflow: hidden;
}
/* Petit motif subtil en fond pour donner de la matière au gradient */
.agnes-presta-block--alt::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.08) 0%, transparent 30%),
radial-gradient(circle at 15% 90%, rgba(255, 255, 255, 0.06) 0%, transparent 35%);
pointer-events: none;
}
.agnes-presta-block--alt > * {
position: relative;
z-index: 1;
}
/* (Anciennes règles "texte blanc sur gradient sombre" supprimées —
le nouveau design pastel utilise du texte foncé. Voir bloc
"ALLÈGEMENT PAGES PRESTATIONS" en fin de fichier.) */
.agnes-presta-block h2 {
font-family: var(--agnes-font-serif);
font-weight: 600;
color: var(--agnes-charcoal);
font-size: 1.75rem;
margin: 0 0 1.25rem;
position: relative;
padding-bottom: 0.75rem;
}
/* (ancien soulignement rectangle remplacé par le squiggle SVG plus bas) */
.agnes-presta-block p {
font-size: 1.05rem;
margin: 0 0 1rem;
color: var(--agnes-text);
}
.agnes-presta-block p:last-child {
margin-bottom: 0;
}
.agnes-presta-block ul {
list-style: none;
padding: 0;
margin: 0;
}
.agnes-presta-block ul li {
padding: 0.6rem 0 0.6rem 1.75rem;
position: relative;
border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
font-size: 1.02rem;
}
.agnes-presta-block ul li:last-child {
border-bottom: none;
}
.agnes-presta-block ul li::before {
content: '→';
position: absolute;
left: 0;
color: var(--agnes-primary);
font-weight: 700;
}
.agnes-presta-sub {
margin-top: 1.5rem;
padding: 1.5rem;
background: #fff;
border-radius: 8px;
border-left: 3px solid var(--agnes-blue);
}
.agnes-presta-sub:first-of-type {
margin-top: 0;
}
.agnes-presta-sub h3 {
font-family: var(--agnes-font-serif);
font-size: 1.3rem;
color: var(--agnes-blue-dark);
margin: 0 0 0.75rem;
}
.agnes-presta-sub p {
font-size: 1rem;
margin: 0;
}
/* === Galerie d'ateliers === */
.agnes-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1.25rem;
margin-top: 2rem;
}
.agnes-gallery__item {
position: relative;
margin: 0;
overflow: hidden;
border-radius: 10px;
background: #fff;
box-shadow: 4px 4px 0 0 var(--agnes-blue-deep);
border: 2px solid var(--agnes-blue-deep);
transition: transform 0.25s ease, box-shadow 0.25s ease;
aspect-ratio: 3 / 4;
cursor: zoom-in;
}
.agnes-gallery__item:nth-child(3n) {
transform: rotate(-1deg);
}
.agnes-gallery__item:nth-child(4n) {
transform: rotate(1deg);
}
.agnes-gallery__item:hover {
transform: rotate(0deg) translate(-2px, -2px);
box-shadow: 8px 8px 0 0 var(--agnes-blue-deep);
z-index: 2;
}
.agnes-gallery__trigger {
all: unset;
display: block;
width: 100%;
height: 100%;
/* Curseur loupe dessinée à la main sur fond turquoise */
cursor: url("data:image/svg+xml;utf8,") 13 13, zoom-in;
}
.agnes-gallery__trigger:focus-visible {
outline: 3px solid var(--agnes-primary);
outline-offset: 4px;
}
.agnes-gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.agnes-gallery__item:hover img {
transform: scale(1.04);
}
.agnes-gallery__item figcaption {
position: absolute;
inset: auto 0 0 0;
padding: 0.9rem 0.8rem 0.7rem;
background: linear-gradient(to top, rgba(0, 61, 84, 0.92) 0%, rgba(0, 61, 84, 0.75) 60%, rgba(0, 61, 84, 0) 100%);
color: #fff;
font-size: 0.85rem;
line-height: 1.3;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.agnes-gallery__item:hover figcaption,
.agnes-gallery__item:focus-within figcaption {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 600px) {
.agnes-gallery {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 0.75rem;
}
.agnes-gallery__item figcaption {
font-size: 0.75rem;
padding: 0.6rem 0.5rem 0.5rem;
}
}
/* === Lightbox === */
.agnes-lightbox[hidden] { display: none; }
.agnes-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 28, 38, 0.92);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
cursor: zoom-out;
animation: agnes-lightbox-fade 0.2s ease;
}
@keyframes agnes-lightbox-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.agnes-lightbox__figure {
margin: 0;
max-width: min(1100px, 95vw);
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
cursor: default;
}
.agnes-lightbox__img {
max-width: 100%;
max-height: 80vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
background: #fff;
}
.agnes-lightbox__caption {
color: #fff;
font-size: 0.95rem;
text-align: center;
max-width: 700px;
line-height: 1.4;
padding: 0 1rem;
}
.agnes-lightbox__close,
.agnes-lightbox__nav {
position: absolute;
background: rgba(255, 255, 255, 0.12);
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 50%;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.5rem;
line-height: 1;
transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
padding: 0;
}
.agnes-lightbox__close:hover,
.agnes-lightbox__nav:hover {
background: var(--agnes-primary);
border-color: var(--agnes-primary);
transform: scale(1.08);
}
.agnes-lightbox__close {
top: 1.25rem;
right: 1.25rem;
font-size: 2rem;
}
.agnes-lightbox__nav--prev { left: 1.25rem; }
.agnes-lightbox__nav--next { right: 1.25rem; }
@media (max-width: 600px) {
.agnes-lightbox { padding: 1rem; }
.agnes-lightbox__close,
.agnes-lightbox__nav { width: 40px; height: 40px; font-size: 1.2rem; }
.agnes-lightbox__close { top: 0.75rem; right: 0.75rem; }
.agnes-lightbox__nav--prev { left: 0.5rem; }
.agnes-lightbox__nav--next { right: 0.5rem; }
.agnes-lightbox__img { max-height: 70vh; }
}
body.agnes-lightbox-open { overflow: hidden; }
.agnes-contact-cta {
background: linear-gradient(135deg, var(--agnes-primary) 0%, #4ec5de 100%);
color: #fff;
text-align: center;
padding: 3rem 2rem;
border-radius: var(--agnes-radius);
margin-top: 2rem;
border-left: none;
}
.agnes-contact-cta h2 {
font-family: var(--agnes-font-display);
font-weight: 400;
color: #fff;
font-size: 2.25rem;
margin: 0 0 1rem;
}
.agnes-contact-cta h2::after {
display: none;
}
.agnes-contact-cta p {
color: rgba(255, 255, 255, 0.95);
font-size: 1.1rem;
margin: 0 0 1.5rem;
}
.agnes-contact-cta .agnes-btn--primary {
background: #fff;
color: var(--agnes-primary);
font-weight: 600;
}
.agnes-contact-cta .agnes-btn--primary:hover {
background: var(--agnes-charcoal);
color: #fff;
}
/* ═══════════════════════════════════════════
PAGE ARTICLES / ACTUALITÉS — mise en page magazine
═══════════════════════════════════════════ */
/* Bandeau : dégradé + pois + cercles déco (variation actus) */
.agnes-page-header--actus {
background-image:
radial-gradient(circle, rgba(236, 82, 30, 0.08) 1.5px, transparent 2px),
radial-gradient(ellipse at 15% 20%, rgba(255, 226, 200, 0.55), transparent 55%),
radial-gradient(ellipse at 85% 80%, rgba(0, 164, 200, 0.18), transparent 55%);
background-size: 28px 28px, 100% 100%, 100% 100%;
background-repeat: repeat, no-repeat, no-repeat;
}
.agnes-page-header--actus::before {
background: radial-gradient(circle, rgba(236, 82, 30, 0.14) 0%, transparent 70%);
}
.agnes-page-header--actus::after {
background: radial-gradient(circle, rgba(95, 155, 115, 0.16) 0%, transparent 70%);
}
/* — Blocs de listing — */
.agnes-articles-hero,
.agnes-articles-feat,
.agnes-articles-grid {
margin: 3rem 0;
}
.agnes-articles-feat {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.agnes-articles-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
}
/* — Carte article — base — */
.agnes-article-card {
--card-rot: 0deg;
position: relative;
background: #fff;
border: 1px solid var(--agnes-border);
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
transform: rotate(var(--card-rot));
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.25s ease;
box-shadow: 4px 4px 0 0 var(--agnes-blue-deep);
}
.agnes-article-card:hover {
transform: rotate(0) translate(-2px, -2px);
box-shadow: 7px 7px 0 0 var(--agnes-blue-deep);
}
/* Alternance de nuances sur la grille standard */
.agnes-articles-grid .agnes-article-card:nth-child(3n+2) {
background: var(--agnes-bg-alt);
}
.agnes-articles-grid .agnes-article-card:nth-child(3n+3) {
background: var(--agnes-bg-warm);
}
/* — Vignette — */
.agnes-article-card__thumb {
position: relative;
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--agnes-bg-warm);
}
.agnes-article-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.agnes-article-card:hover .agnes-article-card__thumb img {
transform: scale(1.06);
}
/* Badge « À la une » sur la vignette du hero */
.agnes-article-card__badge {
position: absolute;
top: 16px;
left: 16px;
background: var(--agnes-orange);
color: #fff;
font-family: var(--agnes-font-display);
font-size: 1.4rem;
padding: 4px 16px;
border-radius: 999px;
transform: rotate(-4deg);
box-shadow: 3px 3px 0 0 var(--agnes-blue-deep);
letter-spacing: 0.02em;
}
/* — Contenu — */
.agnes-article-card__body {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex: 1;
gap: 0.75rem;
}
.agnes-article-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-bottom: 0.25rem;
}
/* Date en tampon rond bicolore */
.agnes-article-card__date {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
background: #fff;
border: 2px solid var(--agnes-blue-deep);
border-radius: 12px;
box-shadow: 2px 2px 0 0 var(--agnes-blue-deep);
flex-shrink: 0;
transform: rotate(-3deg);
line-height: 1;
}
.agnes-article-card__date-day {
font-family: var(--agnes-font-serif);
font-size: 1.3rem;
font-weight: 700;
color: var(--agnes-charcoal);
}
.agnes-article-card__date-month {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--agnes-primary);
font-weight: 600;
margin-top: 2px;
}
/* Catégorie en petit badge */
.agnes-article-card__cat {
background: var(--agnes-primary);
color: #fff !important;
padding: 3px 12px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
text-decoration: none !important;
letter-spacing: 0.02em;
transition: background 0.2s ease, transform 0.2s ease;
}
.agnes-article-card__cat:hover {
background: var(--agnes-blue-deep);
transform: translateY(-1px);
}
/* Temps de lecture discret */
.agnes-article-card__time {
font-size: 0.8rem;
color: var(--agnes-text-light);
font-style: italic;
}
/* Titre */
.agnes-article-card__title {
font-family: var(--agnes-font-serif);
font-size: 1.25rem;
color: var(--agnes-charcoal);
margin: 0;
line-height: 1.25;
}
.agnes-article-card__title a {
color: inherit;
text-decoration: none;
background-image: linear-gradient(var(--agnes-primary), var(--agnes-primary));
background-repeat: no-repeat;
background-size: 0 2px;
background-position: 0 100%;
transition: background-size 0.25s ease, color 0.2s ease;
padding-bottom: 2px;
}
.agnes-article-card__title a:hover {
color: var(--agnes-primary);
background-size: 100% 2px;
}
.agnes-article-card__excerpt {
color: var(--agnes-text);
font-size: 0.98rem;
margin: 0;
flex: 1;
line-height: 1.55;
}
.agnes-article-card__more {
color: var(--agnes-primary);
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap 0.2s ease, color 0.2s ease;
}
.agnes-article-card__more:hover {
color: var(--agnes-blue-deep);
gap: 12px;
}
/* — Carte à la une — plein format horizontal — */
.agnes-article-card--hero {
--card-rot: -0.6deg;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 0;
box-shadow: 6px 6px 0 0 var(--agnes-blue-deep);
}
.agnes-article-card--hero .agnes-article-card__thumb {
aspect-ratio: auto;
height: 100%;
min-height: 320px;
}
.agnes-article-card--hero .agnes-article-card__body {
padding: 2.5rem;
justify-content: center;
}
.agnes-article-card--hero .agnes-article-card__title {
font-size: 2rem;
line-height: 1.15;
}
.agnes-article-card--hero .agnes-article-card__excerpt {
font-size: 1.05rem;
}
/* — Cartes mises en avant — */
.agnes-article-card--feat {
--card-rot: 0.4deg;
}
.agnes-article-card--feat:nth-child(2) {
--card-rot: -0.6deg;
}
.agnes-article-card--feat .agnes-article-card__title {
font-size: 1.4rem;
}
/* — Responsive — */
@media (max-width: 900px) {
.agnes-article-card--hero {
grid-template-columns: 1fr;
}
.agnes-article-card--hero .agnes-article-card__thumb {
min-height: 240px;
}
.agnes-article-card--hero .agnes-article-card__body {
padding: 1.75rem;
}
.agnes-article-card--hero .agnes-article-card__title {
font-size: 1.6rem;
}
.agnes-articles-feat {
grid-template-columns: 1fr;
}
}
/* — Pagination — */
.agnes-pagination {
display: flex;
justify-content: center;
gap: 0.5rem;
margin: 3rem 0;
flex-wrap: wrap;
}
.agnes-pagination a,
.agnes-pagination span {
padding: 0.5rem 1rem;
border-radius: 10px;
background: #fff;
color: var(--agnes-charcoal);
text-decoration: none;
border: 2px solid var(--agnes-blue-deep);
font-weight: 600;
transition: all 0.2s ease;
}
.agnes-pagination a:hover {
background: var(--agnes-primary);
color: #fff;
border-color: var(--agnes-primary);
box-shadow: 3px 3px 0 0 var(--agnes-blue-deep);
transform: translate(-1px, -1px);
}
.agnes-pagination .current {
background: var(--agnes-primary);
color: #fff;
border-color: var(--agnes-primary);
box-shadow: 3px 3px 0 0 var(--agnes-blue-deep);
}
/* — Empty state — */
.agnes-articles-empty {
text-align: center;
padding: 4rem 2rem;
margin: 3rem 0;
}
.agnes-articles-empty__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
background: var(--agnes-bg-alt);
color: var(--agnes-primary);
border-radius: 50%;
margin: 0 auto 1.5rem;
box-shadow: 6px 6px 0 0 var(--agnes-blue-deep);
transform: rotate(-4deg);
}
.agnes-articles-empty__icon .agnes-svg-icon {
width: 56px !important;
height: 56px !important;
}
.agnes-articles-empty h2 {
font-family: var(--agnes-font-display);
font-size: 2.2rem;
margin: 0 0 0.75rem;
}
.agnes-articles-empty p {
color: var(--agnes-text-light);
margin: 0 0 2rem;
font-size: 1.05rem;
}
/* ═══════════════════════════════════════════
SINGLE POST — mise en page éditoriale
═══════════════════════════════════════════ */
.agnes-single {
--single-accent: var(--agnes-orange);
position: relative;
}
/* — HERO bandeau — */
.agnes-single__hero {
position: relative;
padding: 2.5rem 0 4rem;
margin-bottom: 0;
background-color: var(--agnes-bg-warm);
background-image:
radial-gradient(circle, rgba(236, 82, 30, 0.08) 1.5px, transparent 2px),
radial-gradient(ellipse at 12% 25%, rgba(255, 226, 200, 0.45), transparent 55%),
radial-gradient(ellipse at 88% 85%, rgba(0, 164, 200, 0.18), transparent 55%);
background-size: 26px 26px, 100% 100%, 100% 100%;
background-repeat: repeat, no-repeat, no-repeat;
isolation: isolate;
overflow: hidden;
}
.agnes-single__hero::before,
.agnes-single__hero::after {
content: '';
position: absolute;
border-radius: 50%;
z-index: -1;
pointer-events: none;
}
.agnes-single__hero::before {
width: 220px; height: 220px;
top: -80px; right: -60px;
background: radial-gradient(circle, rgba(236, 82, 30, 0.14) 0%, transparent 70%);
}
.agnes-single__hero::after {
width: 260px; height: 260px;
bottom: -120px; left: -80px;
background: radial-gradient(circle, rgba(95, 155, 115, 0.18) 0%, transparent 70%);
}
.agnes-single__back {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--agnes-blue-deep);
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
padding: 0.35rem 0.9rem;
background: #fff;
border: 1px solid var(--agnes-border);
border-radius: 999px;
box-shadow: 2px 2px 0 0 var(--agnes-blue-deep);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.agnes-single__back:hover {
transform: translate(-2px, -2px);
box-shadow: 4px 4px 0 0 var(--agnes-blue-deep);
color: var(--single-accent);
}
.agnes-single__eyebrow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
margin: 1.8rem 0 0.8rem;
font-size: 0.95rem;
color: var(--agnes-text-light);
}
.agnes-single__dot {
color: var(--single-accent);
font-size: 0.55rem;
line-height: 1;
}
.agnes-single__cat {
display: inline-block;
background: var(--single-accent);
color: #fff;
font-family: var(--agnes-font-display);
font-size: 1.1rem;
padding: 3px 14px;
border-radius: 999px;
text-decoration: none;
transform: rotate(-1.5deg);
box-shadow: 2px 2px 0 0 var(--agnes-blue-deep);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.agnes-single__cat:hover {
transform: rotate(0) translateY(-1px);
color: #fff;
}
.agnes-single__time {
font-style: italic;
}
.agnes-single__title {
font-family: var(--agnes-font-display);
font-size: clamp(2.2rem, 5vw, 3.6rem);
line-height: 1.1;
color: var(--agnes-blue-deep);
margin: 0.3rem 0 1.2rem;
max-width: 900px;
letter-spacing: -0.5px;
}
.agnes-single__chapo {
font-size: 1.3rem;
line-height: 1.55;
color: var(--agnes-blue-deep);
max-width: 780px;
margin: 0 0 2rem;
font-weight: 500;
opacity: 0.88;
}
.agnes-single__byline {
display: inline-flex;
align-items: center;
gap: 0.9rem;
padding: 0.6rem 1.1rem 0.6rem 0.6rem;
background: #fff;
border: 1px solid var(--agnes-border);
border-radius: 999px;
box-shadow: 3px 3px 0 0 var(--agnes-blue-deep);
}
.agnes-single__avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--agnes-blue-deep);
}
.agnes-single__byline-text {
display: flex;
flex-direction: column;
line-height: 1.15;
}
.agnes-single__byline-by {
font-size: 0.8rem;
color: var(--agnes-text-light);
}
.agnes-single__byline-name {
font-family: var(--agnes-font-display);
font-size: 1.15rem;
color: var(--agnes-blue-deep);
}
/* — IMAGE À LA UNE qui flotte entre hero et contenu — */
.agnes-single__feat-wrap {
margin-top: -3rem;
margin-bottom: 3rem;
position: relative;
z-index: 2;
}
.agnes-single__feat {
margin: 0;
padding: 0;
border-radius: 18px;
overflow: hidden;
transform: rotate(-0.6deg);
box-shadow: 8px 8px 0 0 var(--agnes-blue-deep);
border: 1px solid var(--agnes-border);
background: #fff;
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.agnes-single__feat:hover {
transform: rotate(0);
}
.agnes-single__feat img {
display: block;
width: 100%;
height: auto;
max-height: 560px;
object-fit: cover;
}
/* — LAYOUT contenu + aside — */
.agnes-single__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 180px;
gap: 3rem;
margin-bottom: 3rem;
}
/* — CORPS texte : typographie soignée — */
.agnes-single__content {
font-size: 1.12rem;
line-height: 1.75;
color: var(--agnes-text);
max-width: 720px;
}
.agnes-single__content > p:first-of-type::first-letter {
font-family: 'Roboto Slab', serif;
font-size: 4.2rem;
line-height: 0.9;
float: left;
padding: 0.3rem 0.7rem 0 0;
color: var(--single-accent);
font-weight: 700;
}
.agnes-single__content h2 {
font-family: var(--agnes-font-display);
font-size: 2rem;
color: var(--agnes-blue-deep);
margin: 2.8rem 0 1rem;
position: relative;
padding-left: 1.2rem;
}
.agnes-single__content h2::before {
content: '';
position: absolute;
left: 0;
top: 0.5rem;
bottom: 0.5rem;
width: 5px;
background: var(--single-accent);
border-radius: 3px;
}
.agnes-single__content h3 {
font-family: var(--agnes-font-display);
font-size: 1.45rem;
color: var(--agnes-blue-deep);
margin: 2.2rem 0 0.8rem;
}
.agnes-single__content p {
margin: 0 0 1.3rem;
}
.agnes-single__content a {
color: var(--single-accent);
text-decoration: none;
background-image: linear-gradient(transparent 60%, rgba(236, 82, 30, 0.22) 60%);
background-size: 100% 100%;
transition: background-size 0.25s ease;
}
.agnes-single__content a:hover {
background-image: linear-gradient(transparent 0%, rgba(236, 82, 30, 0.28) 0%);
}
.agnes-single__content blockquote {
position: relative;
margin: 2.5rem 0;
padding: 1.8rem 2rem 1.8rem 3.5rem;
background: var(--agnes-bg-alt);
border: 1px solid var(--agnes-border);
border-radius: 14px;
font-family: var(--agnes-font-display);
font-size: 1.4rem;
line-height: 1.45;
color: var(--agnes-blue-deep);
box-shadow: 4px 4px 0 0 var(--agnes-blue-deep);
transform: rotate(-0.4deg);
}
.agnes-single__content blockquote::before {
content: '“';
position: absolute;
top: -0.6rem;
left: 0.8rem;
font-size: 5rem;
line-height: 1;
font-family: Georgia, serif;
color: var(--single-accent);
}
.agnes-single__content blockquote p {
margin: 0;
}
.agnes-single__content blockquote cite {
display: block;
margin-top: 0.8rem;
font-family: var(--agnes-font-body, inherit);
font-size: 0.95rem;
font-style: normal;
color: var(--agnes-text-light);
}
.agnes-single__content ul,
.agnes-single__content ol {
margin: 0 0 1.5rem 0;
padding-left: 1.5rem;
}
.agnes-single__content li {
margin-bottom: 0.4rem;
}
.agnes-single__content ul li::marker {
color: var(--single-accent);
}
.agnes-single__content img,
.agnes-single__content figure {
border-radius: 12px;
max-width: 100%;
height: auto;
}
.agnes-single__content figure {
margin: 2rem 0;
overflow: hidden;
box-shadow: 5px 5px 0 0 var(--agnes-blue-deep);
border: 1px solid var(--agnes-border);
}
.agnes-single__content figure img {
border-radius: 0;
display: block;
}
.agnes-single__content figure figcaption {
background: var(--agnes-cream);
padding: 0.6rem 1rem;
font-size: 0.9rem;
color: var(--agnes-text-light);
font-style: italic;
}
.agnes-single__content hr {
border: 0;
height: 30px;
margin: 3rem auto;
background: radial-gradient(circle, var(--single-accent) 3px, transparent 4px);
background-size: 24px 100%;
background-repeat: repeat-x;
background-position: center;
max-width: 240px;
}
/* — ASIDE : partage en colonne sticky — */
.agnes-single__side {
position: relative;
}
.agnes-single__side-inner {
position: sticky;
top: 100px;
padding: 1.2rem 0.8rem;
background: #fff;
border: 1px solid var(--agnes-border);
border-radius: 14px;
box-shadow: 3px 3px 0 0 var(--agnes-blue-deep);
text-align: center;
}
.agnes-single__side-title {
font-family: var(--agnes-font-display);
font-size: 0.95rem;
color: var(--agnes-blue-deep);
margin: 0 0 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.agnes-single__share {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
}
.agnes-single__share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--agnes-bg-warm);
color: var(--agnes-blue-deep);
border: 1px solid var(--agnes-border);
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
padding: 0;
text-decoration: none;
}
.agnes-single__share-btn:hover {
background: var(--single-accent);
color: #fff;
transform: scale(1.08) rotate(-5deg);
}
.agnes-single__share-copy.is-copied {
background: #5f9b73;
color: #fff;
}
/* — TAGS — */
.agnes-single__tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
padding: 1.5rem 0;
border-top: 2px dashed var(--agnes-border);
border-bottom: 2px dashed var(--agnes-border);
margin-bottom: 3rem;
}
.agnes-single__tags-label {
font-family: var(--agnes-font-display);
font-size: 1rem;
color: var(--agnes-blue-deep);
margin-right: 0.5rem;
}
.agnes-single__tag {
display: inline-block;
padding: 4px 14px;
background: var(--agnes-bg-alt);
color: var(--agnes-blue-deep);
border: 1px solid var(--agnes-border);
border-radius: 999px;
font-size: 0.9rem;
text-decoration: none;
transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.agnes-single__tag:hover {
background: var(--single-accent);
color: #fff;
transform: translateY(-2px);
}
/* — NAVIGATION prev / next — */
.agnes-single__nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 3.5rem;
}
.agnes-single__nav-link {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.2rem 1.5rem;
background: #fff;
border: 1px solid var(--agnes-border);
border-radius: 14px;
text-decoration: none;
color: var(--agnes-blue-deep);
box-shadow: 4px 4px 0 0 var(--agnes-blue-deep);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.agnes-single__nav-link:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 0 var(--agnes-blue-deep);
}
.agnes-single__nav-link--next {
text-align: right;
flex-direction: row-reverse;
}
.agnes-single__nav-arrow {
font-size: 1.6rem;
color: var(--single-accent);
flex-shrink: 0;
}
.agnes-single__nav-body {
display: flex;
flex-direction: column;
overflow: hidden;
}
.agnes-single__nav-label {
font-size: 0.8rem;
color: var(--agnes-text-light);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.agnes-single__nav-title {
font-family: var(--agnes-font-display);
font-size: 1.1rem;
line-height: 1.3;
color: var(--agnes-blue-deep);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* — CTA retour listing — */
.agnes-single__cta {
text-align: center;
padding: 3rem 2rem;
background: var(--agnes-bg-warm);
background-image: radial-gradient(circle, rgba(236, 82, 30, 0.09) 1.5px, transparent 2px);
background-size: 24px 24px;
border: 1px solid var(--agnes-border);
border-radius: 18px;
margin-bottom: 3rem;
box-shadow: 5px 5px 0 0 var(--agnes-blue-deep);
}
.agnes-single__cta p {
font-family: var(--agnes-font-display);
font-size: 1.5rem;
color: var(--agnes-blue-deep);
margin: 0 0 1.2rem;
}
/* — COMMENTAIRES (styling léger) — */
.agnes-single__comments {
margin-top: 3rem;
padding-top: 2rem;
border-top: 2px dashed var(--agnes-border);
}
.agnes-single__comments .comment-respond,
.agnes-single__comments .comments-title {
max-width: 720px;
}
.agnes-single__comments .comments-title,
.agnes-single__comments .comment-reply-title {
font-family: var(--agnes-font-display);
font-size: 1.8rem;
color: var(--agnes-blue-deep);
margin: 0 0 1.5rem;
}
/* — RESPONSIVE — */
@media (max-width: 900px) {
.agnes-single__layout {
grid-template-columns: 1fr;
gap: 2rem;
}
.agnes-single__side-inner {
position: static;
}
.agnes-single__share {
flex-direction: row;
justify-content: center;
}
.agnes-single__nav {
grid-template-columns: 1fr;
}
.agnes-single__feat img {
max-height: 360px;
}
}
@media (max-width: 600px) {
.agnes-single__hero {
padding: 1.8rem 0 3rem;
}
.agnes-single__title {
font-size: 2rem;
}
.agnes-single__chapo {
font-size: 1.1rem;
}
.agnes-single__content {
font-size: 1.05rem;
}
.agnes-single__content > p:first-of-type::first-letter {
font-size: 3.4rem;
}
.agnes-single__content blockquote {
font-size: 1.15rem;
padding: 1.4rem 1.2rem 1.4rem 2.8rem;
}
}
/* ═══════════════════════════════════════════
AUDIO PLAYER — lecteur avec forme d'onde
═══════════════════════════════════════════ */
.agnes-player {
position: relative;
background: #fff;
border: 1px solid var(--agnes-border);
border-radius: 16px;
padding: 1.2rem 1.4rem;
box-shadow: 5px 5px 0 0 var(--agnes-blue-deep);
transform: rotate(-0.5deg);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.25s ease;
margin-top: 1.5rem;
}
.agnes-player:hover {
transform: rotate(0);
box-shadow: 7px 7px 0 0 var(--agnes-blue-deep);
}
/* Badge "écoute" en coin */
.agnes-player::before {
content: '🎙';
position: absolute;
top: -12px;
right: 16px;
font-size: 1.6rem;
line-height: 1;
filter: drop-shadow(1px 1px 0 var(--agnes-blue-deep));
}
/* — Rangée supérieure : bouton + info — */
.agnes-player__row {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
/* Bouton play/pause */
.agnes-player__btn {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid var(--agnes-blue-deep);
background: var(--agnes-orange);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
background 0.2s ease;
box-shadow: 3px 3px 0 0 var(--agnes-blue-deep);
padding: 0;
}
.agnes-player__btn:hover {
transform: scale(1.08);
}
.agnes-player__btn:active {
transform: scale(0.96);
}
/* Icône play SVG */
.agnes-player__icon-play,
.agnes-player__icon-pause {
display: block;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.agnes-player__icon-pause {
display: none;
}
.agnes-player.is-playing .agnes-player__icon-play { display: none; }
.agnes-player.is-playing .agnes-player__icon-pause { display: block; }
/* Info label + temps */
.agnes-player__info {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.agnes-player__label {
font-family: var(--agnes-font-display);
font-size: 1.05rem;
color: var(--agnes-blue-deep);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.agnes-player__times {
font-size: 0.88rem;
color: var(--agnes-text-light);
font-variant-numeric: tabular-nums;
font-style: italic;
}
.agnes-player__time {
color: var(--agnes-orange);
font-weight: 600;
}
/* Spinner de chargement (avant is-ready) */
.agnes-player__loading {
font-size: 0.78rem;
color: var(--agnes-text-light);
font-style: italic;
display: block;
}
.agnes-player.is-ready .agnes-player__loading {
display: none;
}
/* — Zone canvas — */
.agnes-player__wave {
width: 100%;
line-height: 0;
cursor: pointer;
}
.agnes-player__canvas {
display: block;
width: 100%;
height: 80px;
border-radius: 8px;
}
/* Responsive */
@media (max-width: 480px) {
.agnes-player__label {
font-size: 0.95rem;
}
.agnes-player__btn {
width: 42px;
height: 42px;
}
}
/* ═══════════════════════════════════════════
FOOTER CUSTOM
═══════════════════════════════════════════ */
.agnes-footer {
background: var(--agnes-charcoal);
color: #d8d8d8;
padding: 4rem 0 1rem;
margin-top: 5rem;
position: relative;
}
.agnes-footer::before {
content: '';
display: block;
height: 6px;
background: linear-gradient(90deg, var(--agnes-primary) 0%, #4ec5de 50%, var(--agnes-charcoal) 100%);
position: absolute;
top: 0;
left: 0;
right: 0;
}
.agnes-footer__grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 3rem;
margin-bottom: 3rem;
}
.agnes-footer__col h3 {
font-family: var(--agnes-font-display);
font-weight: 400;
color: #fff;
font-size: 1.5rem;
margin: 0 0 1.25rem;
}
.agnes-footer__col h4 {
font-family: var(--agnes-font-serif);
font-weight: 600;
color: #fff;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 1.25rem;
position: relative;
padding-bottom: 0.5rem;
}
.agnes-footer__col h4::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 2px;
background: var(--agnes-primary);
}
.agnes-footer__col p,
.agnes-footer__col li {
color: #b0b0b0;
font-size: 0.95rem;
line-height: 1.7;
}
.agnes-footer__col ul {
list-style: none;
padding: 0;
margin: 0;
}
.agnes-footer__col ul li {
margin-bottom: 0.5rem;
}
.agnes-footer__col a {
color: #d8d8d8;
text-decoration: none;
transition: color 0.2s;
}
.agnes-footer__col a:hover {
color: var(--agnes-primary);
}
.agnes-footer__tagline {
font-family: var(--agnes-font-serif);
font-style: italic;
font-size: 1rem;
margin-top: 1rem;
}
.agnes-footer__contact-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.agnes-footer__contact-item .dashicons {
color: var(--agnes-primary);
flex-shrink: 0;
margin-top: 2px;
}
.agnes-footer__bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
font-size: 0.85rem;
color: #888;
}
.agnes-footer__bottom a {
color: #b0b0b0;
text-decoration: none;
}
.agnes-footer__bottom a:hover {
color: var(--agnes-primary);
}
.agnes-footer__charte {
background: rgba(255, 255, 255, 0.05);
padding: 0.5rem 1rem;
border-radius: var(--agnes-radius-pill);
font-size: 0.85rem;
}
@media (max-width: 900px) {
.agnes-footer__grid {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}
@media (max-width: 600px) {
.agnes-footer__grid {
grid-template-columns: 1fr;
}
.agnes-footer__bottom {
flex-direction: column;
text-align: center;
}
.agnes-page-header--presta h1,
.agnes-hero-presta h1 {
font-size: 2.25rem;
}
.agnes-hero-presta {
min-height: 360px;
}
.agnes-hero-presta__content {
padding: 3rem 1.5rem;
}
.agnes-hero-presta__intro {
font-size: 1.1rem;
}
.agnes-presta-block {
padding: 1.75rem;
}
}
/* ═══════════════════════════════════════════
REVEAL ON SCROLL
═══════════════════════════════════════════ */
.agnes-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s ease, transform 0.7s ease;
will-change: opacity, transform;
}
.agnes-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.agnes-reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* ═══════════════════════════════════════════
SOULIGNEMENTS TRACÉS À LA MAIN (SVG squiggle)
═══════════════════════════════════════════ */
.agnes-presta-block h2,
.agnes-section__title,
.agnes-page-header--presta h1 {
display: inline-block;
position: relative;
padding-bottom: 0.35em;
}
.agnes-presta-block h2::after,
.agnes-section__title::after,
.agnes-page-header--presta h1::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 10px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.9;
}
/* ═══════════════════════════════════════════
MENU BLOCKSY — override couleur hover en turquoise
═══════════════════════════════════════════ */
.ct-header [data-id="menu"] .menu-item > a:hover,
.ct-header [data-id="menu"] .current-menu-item > a,
.ct-header [data-id="menu"] .current-menu-ancestor > a,
.ct-header [data-id="menu"] .menu-item.active > a,
header nav a:hover,
header .menu a:hover,
#main-navigation a:hover,
.ct-header-cta:hover,
.wp-block-navigation-item a:hover {
color: var(--agnes-primary) !important;
}
/* Liens dans le contenu : hover turquoise au lieu d'orange */
.entry-content a:hover,
.agnes-container a:not(.agnes-btn):hover {
color: var(--agnes-primary-dark);
}
/* ═══════════════════════════════════════════
PAGE INTERVENTIONS — pictos cliquables
═══════════════════════════════════════════ */
.agnes-intervention__icon {
transition: var(--agnes-transition);
}
a.agnes-intervention__icon-link {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: inherit;
transition: var(--agnes-transition);
}
a.agnes-intervention__icon-link:hover {
transform: translateY(-4px) scale(1.05);
text-decoration: none;
}
a.agnes-intervention__icon-link:hover .agnes-intervention__icon {
background: var(--agnes-primary);
/* Ombre dure bleu foncé */
box-shadow: 6px 6px 0 0 var(--agnes-blue-deep);
color: #fff;
}
a.agnes-intervention__icon-link:hover .agnes-intervention__icon .agnes-svg-icon {
color: #fff;
}
a.agnes-intervention__icon-link:hover .agnes-intervention__icon svg {
stroke: #fff;
}
a.agnes-intervention__icon-link .agnes-intervention__icon {
cursor: pointer;
}
/* ═══════════════════════════════════════════
SVG ICONS — style dessiné / enfantin
═══════════════════════════════════════════ */
.agnes-svg-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.agnes-svg-icon svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
/* Hero presta : SVG blanc sur disque turquoise */
.agnes-hero-presta .agnes-presta-icon .agnes-svg-icon svg,
.agnes-page-header--presta .agnes-presta-icon .agnes-svg-icon svg {
stroke: #fff;
}
/* Cartes d'accueil : SVG turquoise sur fond blanc */
.agnes-prestation-card__icon .agnes-svg-icon {
width: 56px !important;
height: 56px !important;
color: var(--agnes-primary);
margin: 0 auto 1rem;
}
.agnes-prestation-card .dashicons {
display: none;
}
/* Animation hover : léger rebond */
a.agnes-prestation-card:hover .agnes-svg-icon svg {
animation: agnesWiggle 0.6s ease;
}
@keyframes agnesWiggle {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-8deg); }
75% { transform: rotate(8deg); }
}
/* Page interventions : SVG turquoise dans cercle tinté */
.agnes-intervention__icon .agnes-svg-icon {
width: 52px !important;
height: 52px !important;
color: var(--agnes-primary);
}
a.agnes-intervention__icon-link:hover .agnes-svg-icon svg {
animation: agnesWiggle 0.6s ease;
}
/* ═══════════════════════════════════════════
ARCHIVE LIVRES — filtres multi-critères
═══════════════════════════════════════════ */
.agnes-filtres-livres {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: flex-end;
margin: 2rem 0 2.5rem;
padding: 1.25rem 1.5rem;
background: var(--agnes-surface-2);
border-radius: var(--agnes-radius);
border: 2px solid var(--agnes-border);
}
.agnes-filtre-field {
display: flex;
flex-direction: column;
gap: 0.3rem;
flex: 1 1 160px;
min-width: 150px;
}
.agnes-filtre-field > span {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--agnes-text-light);
}
.agnes-filtre-field select {
padding: 0.55rem 0.75rem;
border: 2px solid var(--agnes-border);
border-radius: 8px;
background: var(--agnes-surface);
color: var(--agnes-text);
font-family: var(--agnes-font-body);
font-size: 0.95rem;
cursor: pointer;
transition: border-color 0.2s ease;
}
.agnes-filtre-field select:hover,
.agnes-filtre-field select:focus {
border-color: var(--agnes-primary);
outline: none;
}
.agnes-filtre-reset {
color: var(--agnes-primary);
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
padding: 0.55rem 0.9rem;
border-radius: 8px;
border: 2px dashed var(--agnes-primary);
transition: background 0.2s ease, color 0.2s ease;
align-self: center;
}
.agnes-filtre-reset:hover {
background: var(--agnes-primary);
color: #fff;
}
.agnes-livres-empty {
text-align: center;
padding: 3rem 1rem;
background: var(--agnes-surface-2);
border-radius: var(--agnes-radius);
}
/* Badge genre en coin sur la card livre */
.agnes-livre-card__cover {
position: relative;
}
.agnes-livre-card__badge {
position: absolute;
top: 0.5rem;
left: 0.5rem;
background: var(--agnes-primary);
color: #fff;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.3rem 0.7rem;
border-radius: 20px;
box-shadow: 2px 2px 0 0 var(--agnes-blue-deep);
}
/* ═══════════════════════════════════════════
SINGLE LIVRE — incipit, achats, revues
═══════════════════════════════════════════ */
.agnes-single-livre__genre {
display: inline-block;
background: var(--agnes-primary);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.3rem 0.8rem;
border-radius: 20px;
margin: 0 0 0.75rem;
box-shadow: 2px 2px 0 0 var(--agnes-blue-deep);
}
.agnes-single-livre__extrait {
background: var(--agnes-surface-2);
border-left: 4px solid var(--agnes-primary);
padding: 1.25rem 1.5rem;
margin: 1.5rem 0;
border-radius: 0 8px 8px 0;
font-family: var(--agnes-font-serif);
font-style: italic;
font-size: 1.05rem;
line-height: 1.6;
position: relative;
}
.agnes-single-livre__extrait-label {
display: block;
font-family: var(--agnes-font-display);
font-style: normal;
font-weight: var(--agnes-font-display-weight);
font-size: 1.5rem;
color: var(--agnes-primary);
margin-bottom: 0.5rem;
line-height: 1;
}
/* Boutons d'achat */
.agnes-single-livre__achats {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px dashed var(--agnes-border);
}
.agnes-single-livre__achats-intro {
font-weight: 600;
margin-bottom: 0.75rem !important;
}
.agnes-single-livre__achats-btns {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.agnes-single-livre__achats-hint {
font-size: 0.8rem;
color: var(--agnes-text-light);
font-style: italic;
margin-top: 0.75rem !important;
}
/* Revues de presse — version allégée, sans fond sombre */
.agnes-revues {
margin: 3rem 0 1rem;
padding: 2rem 0 1rem;
background: transparent;
color: var(--agnes-text);
position: relative;
}
.agnes-revues .agnes-section__title {
color: var(--agnes-blue-deep);
margin-bottom: 1.75rem;
font-size: 2rem;
}
/* Squiggle turquoise, plus large, centré sous le titre */
.agnes-revues .agnes-section__title::after {
background-color: transparent;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 140px;
height: 12px;
border-radius: 0;
}
.agnes-revues__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.25rem;
}
.agnes-revue {
margin: 0;
padding: 1.25rem 1.5rem 1.1rem;
background: #eaf5f8;
border-radius: 10px;
border-left: 4px solid var(--agnes-primary);
position: relative;
}
.agnes-revue__quote {
margin: 0 0 0.6rem;
font-family: var(--agnes-font-serif);
font-style: italic;
font-size: 1rem;
line-height: 1.55;
color: var(--agnes-blue-deep);
}
.agnes-revue__source {
font-size: 0.9rem;
font-weight: 600;
color: var(--agnes-blue-deep);
opacity: 0.85;
font-style: normal;
}
/* ═══════════════════════════════════════════
BIBLIOGRAPHIE — frise chronologique
═══════════════════════════════════════════ */
.agnes-biblio-container {
padding-top: 3rem;
padding-bottom: 3rem;
}
.agnes-biblio-timeline {
list-style: none;
padding: 0;
margin: 0;
position: relative;
}
.agnes-biblio-timeline::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 90px;
width: 3px;
background: linear-gradient(to bottom, var(--agnes-primary), var(--agnes-blue-deep));
border-radius: 2px;
}
.agnes-biblio-year {
display: flex;
align-items: flex-start;
gap: 2rem;
padding: 1.5rem 0;
position: relative;
}
.agnes-biblio-year__badge {
flex: 0 0 90px;
text-align: right;
font-family: var(--agnes-font-display);
font-weight: var(--agnes-font-display-weight);
font-size: 2rem;
color: var(--agnes-blue-deep);
line-height: 1;
padding-top: 0.5rem;
position: relative;
}
.agnes-biblio-year__badge::after {
content: "";
position: absolute;
top: 1rem;
right: -30px;
width: 18px;
height: 18px;
background: var(--agnes-primary);
border: 4px solid var(--agnes-bg);
border-radius: 50%;
box-shadow: 0 0 0 2px var(--agnes-primary);
z-index: 1;
}
.agnes-biblio-year__books {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
flex: 1;
padding-left: 1rem;
}
.agnes-biblio-item {
display: flex;
gap: 1rem;
background: var(--agnes-surface);
padding: 1rem;
border-radius: 10px;
border: 2px solid var(--agnes-border);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.agnes-biblio-item:hover {
transform: translate(-2px, -2px);
box-shadow: 4px 4px 0 0 var(--agnes-blue-deep);
border-color: var(--agnes-primary);
}
.agnes-biblio-item__cover {
flex: 0 0 70px;
display: block;
}
.agnes-biblio-item__cover img {
width: 70px;
height: 95px;
object-fit: cover;
border-radius: 4px;
display: block;
}
.agnes-biblio-item__cover-placeholder {
width: 70px;
height: 95px;
background: var(--agnes-surface-2);
border-radius: 4px;
}
.agnes-biblio-item__info {
flex: 1;
min-width: 0;
}
.agnes-biblio-item__title {
margin: 0 0 0.4rem;
font-family: var(--agnes-font-serif);
font-size: 1rem;
font-weight: 600;
line-height: 1.25;
}
.agnes-biblio-item__title a {
color: var(--agnes-text);
text-decoration: none;
}
.agnes-biblio-item__title a:hover {
color: var(--agnes-primary);
}
.agnes-biblio-item__meta {
font-size: 0.82rem;
margin: 0;
color: var(--agnes-text-light);
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.agnes-biblio-item__genre {
background: var(--agnes-primary-light);
color: var(--agnes-blue-deep);
padding: 0.1rem 0.5rem;
border-radius: 10px;
font-weight: 600;
}
.agnes-biblio-item__editeur {
font-weight: 600;
}
@media (max-width: 700px) {
.agnes-biblio-timeline::before {
left: 30px;
}
.agnes-biblio-year {
flex-direction: column;
gap: 1rem;
padding-left: 60px;
}
.agnes-biblio-year__badge {
flex: none;
font-size: 1.5rem;
text-align: left;
padding-top: 0;
}
.agnes-biblio-year__badge::after {
top: 0.3rem;
right: auto;
left: -45px;
}
.agnes-biblio-year__books {
grid-template-columns: 1fr;
padding-left: 0;
}
}
/* (Bloc FINAL OVERRIDES supprimé — voir "ALLÈGEMENT PAGES PRESTATIONS"
en fin de fichier qui gère l'habillage léger actuel.) */
/* ═══════════════════════════════════════════
CONTACT — Coordonnées + formulaire
═══════════════════════════════════════════ */
.agnes-contact-container {
padding-top: 30px;
padding-bottom: 80px;
}
.agnes-contact-intro {
max-width: 760px;
margin: 0 auto 40px;
font-size: 17px;
line-height: 1.7;
color: var(--agnes-text);
}
.agnes-contact-grid {
display: grid;
grid-template-columns: 320px 1fr;
gap: 50px;
align-items: start;
}
@media (max-width: 860px) {
.agnes-contact-grid {
grid-template-columns: 1fr;
gap: 32px;
}
}
.agnes-contact-aside {
display: flex;
flex-direction: column;
gap: 18px;
}
.agnes-contact-card {
background: var(--agnes-surface);
border: 1px solid var(--agnes-border);
border-radius: 14px;
padding: 20px 22px;
box-shadow: 3px 3px 0 0 var(--agnes-blue-deep); /* ombre dure */
}
.agnes-contact-card__title {
margin: 0 0 12px;
font-family: var(--agnes-font-display);
font-weight: var(--agnes-font-display-weight);
color: var(--agnes-blue-deep);
font-size: 26px;
line-height: 1.1;
}
.agnes-contact-card p {
margin: 0 0 10px;
line-height: 1.6;
color: var(--agnes-text);
}
.agnes-contact-card p:last-child { margin-bottom: 0; }
.agnes-contact-card__line {
display: flex;
gap: 10px;
align-items: flex-start;
}
.agnes-contact-card__icon {
flex-shrink: 0;
font-size: 18px;
line-height: 1.6;
}
.agnes-contact-card a {
color: var(--agnes-primary-dark);
text-decoration: underline;
text-underline-offset: 3px;
}
.agnes-contact-card a:hover { color: var(--agnes-blue-deep); }
.agnes-contact-card--charte {
background: var(--agnes-surface-2);
font-size: 14px;
}
.agnes-contact-form-wrap {
background: var(--agnes-surface);
border: 1px solid var(--agnes-border);
border-radius: 16px;
padding: 32px;
box-shadow: 5px 5px 0 0 var(--agnes-blue-deep); /* ombre dure */
}
@media (max-width: 600px) {
.agnes-contact-form-wrap { padding: 22px 18px; }
}
.agnes-contact-msg {
margin: -8px 0 22px;
padding: 14px 18px;
border-radius: 10px;
font-size: 15px;
line-height: 1.5;
}
.agnes-contact-msg--success {
background: #edfaef;
color: #1b5e20;
border-left: 4px solid #2e7d32;
}
.agnes-contact-msg--error {
background: #fcf0f1;
color: #8a1f23;
border-left: 4px solid #c62828;
}
.agnes-contact-msg a {
color: inherit;
text-decoration: underline;
font-weight: 600;
}
.agnes-contact-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 600px) {
.agnes-contact-row { grid-template-columns: 1fr; }
}
.agnes-contact-field {
display: block;
margin-bottom: 16px;
}
.agnes-contact-row .agnes-contact-field { margin-bottom: 0; }
.agnes-contact-label {
display: block;
margin-bottom: 6px;
font-weight: 600;
font-size: 14px;
color: var(--agnes-text);
}
.agnes-contact-label em {
color: #c62828;
font-style: normal;
font-weight: 700;
}
.agnes-contact-field input,
.agnes-contact-field textarea {
width: 100%;
padding: 11px 14px;
font-family: inherit;
font-size: 15px;
line-height: 1.5;
color: var(--agnes-text);
background: var(--agnes-surface);
border: 1.5px solid var(--agnes-border);
border-radius: 9px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.agnes-contact-field textarea {
resize: vertical;
min-height: 130px;
}
.agnes-contact-field input:focus,
.agnes-contact-field textarea:focus {
outline: none;
border-color: var(--agnes-primary);
box-shadow: 0 0 0 3px rgba(48, 138, 168, 0.18);
}
.agnes-contact-field.is-invalid input,
.agnes-contact-field.is-invalid textarea {
border-color: #c62828;
box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12);
}
.agnes-contact-rgpd {
margin: 18px 0;
font-size: 13px;
color: var(--agnes-text-muted, #666);
line-height: 1.5;
}
.agnes-contact-honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
}
/* ═══════════════════════════════════════════
MENTIONS LÉGALES
═══════════════════════════════════════════ */
.agnes-mentions-container {
padding-top: 30px;
padding-bottom: 80px;
max-width: 820px;
}
.agnes-mentions-content {
background: var(--agnes-surface);
border: 1px solid var(--agnes-border);
border-radius: 16px;
padding: 40px 44px;
box-shadow: 5px 5px 0 0 var(--agnes-blue-deep); /* ombre dure */
line-height: 1.7;
color: var(--agnes-text);
}
@media (max-width: 600px) {
.agnes-mentions-content { padding: 26px 22px; }
}
.agnes-mentions-content h2 {
margin: 36px 0 12px;
font-family: var(--agnes-font-display);
font-weight: var(--agnes-font-display-weight);
color: var(--agnes-blue-deep);
font-size: 30px;
}
.agnes-mentions-content h2:first-child { margin-top: 0; }
.agnes-mentions-content p { margin: 0 0 14px; }
.agnes-mentions-content ul { margin: 0 0 14px 22px; }
.agnes-mentions-content li { margin-bottom: 6px; }
.agnes-mentions-content a {
color: var(--agnes-primary-dark);
text-decoration: underline;
text-underline-offset: 3px;
}
.agnes-mentions-content a:hover { color: var(--agnes-blue-deep); }
.agnes-mentions-note {
background: #fff7d6;
border-left: 4px solid #cca800;
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
margin-bottom: 28px !important;
}
.agnes-mentions-date {
margin-top: 30px !important;
padding-top: 18px;
border-top: 1px dashed var(--agnes-border);
font-size: 13px;
color: var(--agnes-text-muted, #777);
}
/* ═══════════════════════════════════════════
PAGE 404
═══════════════════════════════════════════ */
.agnes-404 { padding-bottom: 80px; }
.agnes-404__hero {
padding: 70px 20px 50px;
text-align: center;
}
.agnes-404__code {
font-family: var(--agnes-font-display);
font-weight: var(--agnes-font-display-weight);
font-size: clamp(120px, 22vw, 220px);
line-height: 0.85;
margin: 0;
background: linear-gradient(135deg, var(--agnes-primary) 0%, var(--agnes-blue-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -0.05em;
user-select: none;
}
.agnes-404__title {
margin: 16px auto 18px;
max-width: 700px;
font-size: clamp(28px, 4vw, 38px);
line-height: 1.2;
color: var(--agnes-blue-deep);
}
.agnes-404__lead {
margin: 0 auto 32px;
max-width: 600px;
font-size: 17px;
line-height: 1.6;
color: var(--agnes-text);
}
.agnes-404__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-bottom: 36px;
}
.agnes-404__search {
display: inline-flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
justify-content: center;
max-width: 520px;
margin: 0 auto;
padding: 14px 18px;
background: var(--agnes-surface);
border: 1px solid var(--agnes-border);
border-radius: 999px;
box-shadow: 3px 3px 0 0 var(--agnes-blue-deep); /* ombre dure */
}
.agnes-404__search label {
font-size: 14px;
color: var(--agnes-text-muted, #666);
margin-right: 4px;
}
.agnes-404__search input[type="search"] {
flex: 1 1 200px;
min-width: 0;
padding: 8px 12px;
border: 1px solid var(--agnes-border);
border-radius: 999px;
font-size: 14px;
background: var(--agnes-surface);
color: var(--agnes-text);
}
.agnes-404__search input[type="search"]:focus {
outline: none;
border-color: var(--agnes-primary);
box-shadow: 0 0 0 3px rgba(48, 138, 168, 0.18);
}
.agnes-404__suggestions { margin: 60px auto 50px; }
.agnes-livres-grid--small {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
/* ═══════════════════════════════════════════
MUR DES MOTS D'ENFANTS (easter egg 404)
═══════════════════════════════════════════ */
.agnes-mur-mots {
margin-top: 70px;
padding: 60px 0 40px;
background:
radial-gradient(circle at 20% 20%, rgba(214, 238, 245, 0.45), transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 247, 214, 0.55), transparent 50%),
var(--agnes-surface-2);
border-top: 1px dashed var(--agnes-border);
border-bottom: 1px dashed var(--agnes-border);
}
.agnes-mur-mots__title {
text-align: center;
margin: 0 0 8px;
font-family: var(--agnes-font-display);
font-weight: var(--agnes-font-display-weight);
color: var(--agnes-blue-deep);
font-size: clamp(28px, 4vw, 38px);
cursor: pointer;
user-select: none;
}
.agnes-mur-mots__intro {
text-align: center;
margin: 0 auto 36px;
max-width: 600px;
font-size: 15px;
color: var(--agnes-text-muted, #666);
font-style: italic;
}
.agnes-mur-mots__board {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 24px;
padding: 10px;
}
.agnes-mur-mots__sticky {
--mur-rot: 0deg;
--mur-bg: #fff7d6;
--mur-shadow: rgba(0, 0, 0, 0.12);
position: relative;
margin: 0;
padding: 22px 20px 18px;
background: var(--mur-bg);
border-radius: 3px;
box-shadow: 4px 4px 0 0 var(--mur-shadow); /* ombre dure post-it */
transform: rotate(var(--mur-rot));
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.35s ease;
cursor: pointer;
z-index: 1;
}
.agnes-mur-mots__sticky::before {
content: "";
position: absolute;
top: -8px;
left: 50%;
width: 60px;
height: 16px;
background: rgba(255, 255, 255, 0.55);
box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.12); /* ombre dure scotch */
transform: translateX(-50%) rotate(-2deg);
pointer-events: none;
}
.agnes-mur-mots__sticky:hover,
.agnes-mur-mots__sticky:focus-visible {
transform: rotate(0deg) scale(1.06);
box-shadow: 8px 8px 0 0 var(--mur-shadow); /* ombre dure post-it */
z-index: 5;
outline: none;
}
.agnes-mur-mots__sticky.is-falling {
animation: agnes-mur-fall 0.7s cubic-bezier(0.55, 0, 0.45, 1) both;
}
@keyframes agnes-mur-fall {
0% { transform: rotate(var(--mur-rot)) translateY(0); }
40% { transform: rotate(calc(var(--mur-rot) + 25deg)) translateY(40px); }
70% { transform: rotate(calc(var(--mur-rot) + 12deg)) translateY(20px); }
100% { transform: rotate(var(--mur-rot)) translateY(0); }
}
.agnes-mur-mots__quote {
margin: 0 0 10px;
font-family: var(--agnes-font-display);
font-weight: 600;
font-size: 19px;
line-height: 1.35;
color: #2a2a2a;
quotes: "« " " »";
}
.agnes-mur-mots__quote::before { content: open-quote; }
.agnes-mur-mots__quote::after { content: close-quote; }
.agnes-mur-mots__author {
text-align: right;
font-size: 13px;
color: rgba(0, 0, 0, 0.55);
font-style: italic;
}
@media (prefers-reduced-motion: reduce) {
.agnes-mur-mots__sticky {
transform: none !important;
transition: box-shadow 0.2s ease;
}
.agnes-mur-mots__sticky:hover,
.agnes-mur-mots__sticky:focus-visible {
transform: scale(1.02) !important;
}
}
[data-theme="dark"] .agnes-mur-mots {
background:
radial-gradient(circle at 20% 20%, rgba(48, 138, 168, 0.18), transparent 50%),
radial-gradient(circle at 80% 80%, rgba(204, 168, 0, 0.14), transparent 50%),
var(--agnes-surface-2);
}
/* ═══════════════════════════════════════════
ALLÈGEMENT PAGES PRESTATIONS (option C)
Surcharge des règles plus haut dans le fichier
pour passer d'un look "cards lourdes" à un look
éditorial respirant.
═══════════════════════════════════════════ */
.agnes-presta-content {
padding: 2.5rem 1.5rem 4rem;
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 600px) {
.agnes-presta-content { padding: 1.5rem 1rem 3rem; }
}
/* — Sections normales : plus de card du tout, juste de l'air — */
.agnes-presta-content .agnes-presta-block {
background: transparent;
box-shadow: none;
border-left: none;
border-radius: 0;
padding: 2.25rem 0 0;
margin: 0 0 0.5rem;
}
/* Filet fin de séparation entre sections (pas avant la première) */
.agnes-presta-content .agnes-presta-block + .agnes-presta-block {
border-top: 1px solid var(--agnes-border);
margin-top: 1.25rem;
}
/* H2 conservés grands, le squiggle existant reste affiché */
.agnes-presta-content .agnes-presta-block h2 {
font-size: 1.75rem;
margin-bottom: 1rem;
color: var(--agnes-blue-deep);
}
/* Listes : on enlève les filets dashed entre items, on garde la flèche */
.agnes-presta-content .agnes-presta-block ul li {
border-bottom: none;
padding: 0.4rem 0 0.4rem 1.5rem;
}
/* — Sections "alt" : bande pastel douce, plus de gradient lourd — */
.agnes-presta-content .agnes-presta-block--alt {
background: linear-gradient(180deg, #eaf5f8 0%, #f5fbfc 100%);
border: 1px solid rgba(48, 138, 168, 0.18);
border-radius: 16px;
padding: 2rem 2rem 2.25rem;
margin: 2rem 0 1.5rem;
color: var(--agnes-text);
overflow: visible;
/* Mise en grille pour les sous-blocs */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.25rem;
}
@media (max-width: 600px) {
.agnes-presta-content .agnes-presta-block--alt {
padding: 1.5rem 1.25rem 1.75rem;
gap: 1rem;
}
}
/* Quand un alt suit un block normal, on supprime le border-top hérité */
.agnes-presta-content .agnes-presta-block + .agnes-presta-block--alt {
border-top: 1px solid rgba(48, 138, 168, 0.18);
}
/* Désactive le motif radial blanc (vestige du gradient sombre) */
.agnes-presta-content .agnes-presta-block--alt::before {
display: none;
}
/* H2 et paragraphe d'intro de l'alt occupent toute la largeur de la grille */
.agnes-presta-content .agnes-presta-block--alt > h2,
.agnes-presta-content .agnes-presta-block--alt > p {
grid-column: 1 / -1;
margin: 0 0 0.5rem;
}
.agnes-presta-content .agnes-presta-block--alt > h2 {
color: var(--agnes-blue-deep);
font-size: 1.65rem;
padding-bottom: 0.5rem;
}
.agnes-presta-content .agnes-presta-block--alt > p {
color: var(--agnes-text);
font-size: 1rem;
}
/* Squiggle redevient turquoise (il était blanc sur le gradient) */
.agnes-presta-content .agnes-presta-block--alt h2::after {
background-image: url("data:image/svg+xml;utf8,");
}
/* — Sous-blocs : mini-fiches blanches compactes en grille — */
.agnes-presta-content .agnes-presta-block--alt .agnes-presta-sub {
margin: 0;
padding: 1rem 1.1rem 1.1rem;
background: var(--agnes-surface);
border-left: 3px solid var(--agnes-primary);
border-radius: 8px;
box-shadow: 3px 3px 0 0 var(--agnes-blue-deep); /* ombre dure */
color: var(--agnes-text);
}
.agnes-presta-content .agnes-presta-block--alt .agnes-presta-sub h3 {
font-family: var(--agnes-font-serif);
color: var(--agnes-blue-deep);
font-size: 1.05rem;
margin: 0 0 0.4rem;
line-height: 1.25;
}
.agnes-presta-content .agnes-presta-block--alt .agnes-presta-sub p {
color: var(--agnes-text);
font-size: 0.95rem;
line-height: 1.55;
margin: 0;
}
/* Liens dans alt : turquoise foncé classique, pas de blanc */
.agnes-presta-content .agnes-presta-block--alt a:not(.agnes-btn) {
color: var(--agnes-primary-dark);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 2px;
}
.agnes-presta-content .agnes-presta-block--alt a:not(.agnes-btn):hover {
color: var(--agnes-blue-deep);
}
/* Listes dans alt (cas du bloc Formation "Modules supplémentaires") */
.agnes-presta-content .agnes-presta-block--alt > ul {
grid-column: 1 / -1;
margin: 0;
}
.agnes-presta-content .agnes-presta-block--alt > ul li {
border-bottom: none;
padding: 0.4rem 0 0.4rem 1.5rem;
color: var(--agnes-text);
}
.agnes-presta-content .agnes-presta-block--alt > ul li::before {
color: var(--agnes-primary);
}
/* Bouton PDF dans alt : style normal (plus besoin du blanc inversé) */
.agnes-presta-content .agnes-presta-block--alt .agnes-btn--secondary {
background: var(--agnes-surface);
color: var(--agnes-blue-deep);
border: 2px solid var(--agnes-primary);
}
.agnes-presta-content .agnes-presta-block--alt .agnes-btn--secondary:hover {
background: var(--agnes-primary);
color: #fff;
}
/* — CTA "intéressé·e ?" en fin de page : même langage léger — */
.agnes-presta-content .agnes-contact-cta {
background: linear-gradient(180deg, #eaf5f8 0%, #f5fbfc 100%);
color: var(--agnes-text);
padding: 2rem 1.5rem;
border-radius: 16px;
border: 1px solid rgba(48, 138, 168, 0.18);
margin-top: 2.5rem;
text-align: center;
}
.agnes-presta-content .agnes-contact-cta h2 {
color: var(--agnes-blue-deep);
font-size: 1.75rem;
margin: 0 0 0.5rem;
}
.agnes-presta-content .agnes-contact-cta p {
color: var(--agnes-text);
font-size: 1rem;
margin: 0 0 1.25rem;
}
.agnes-presta-content .agnes-contact-cta .agnes-btn--primary {
background: var(--agnes-primary);
color: #fff;
border: 2px solid var(--agnes-primary);
}
.agnes-presta-content .agnes-contact-cta .agnes-btn--primary:hover {
background: var(--agnes-blue-deep);
border-color: var(--agnes-blue-deep);
color: #fff;
}
/* — Dark mode : on ajuste les pastels — */
[data-theme="dark"] .agnes-presta-content .agnes-presta-block + .agnes-presta-block {
border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .agnes-presta-content .agnes-presta-block--alt,
[data-theme="dark"] .agnes-presta-content .agnes-contact-cta {
background: linear-gradient(180deg, rgba(48, 138, 168, 0.18) 0%, rgba(48, 138, 168, 0.08) 100%);
border-color: rgba(48, 138, 168, 0.35);
color: var(--agnes-text);
}
[data-theme="dark"] .agnes-presta-content .agnes-presta-block--alt .agnes-presta-sub {
background: var(--agnes-surface);
border-left-color: var(--agnes-primary);
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.5); /* ombre dure, mode sombre */
}
[data-theme="dark"] .agnes-presta-content .agnes-presta-block--alt > h2,
[data-theme="dark"] .agnes-presta-content .agnes-presta-block--alt .agnes-presta-sub h3,
[data-theme="dark"] .agnes-presta-content .agnes-contact-cta h2 {
color: var(--agnes-primary);
}
/* ═══════════════════════════════════════════
GARDE-FOU LISIBILITÉ — alt blocks
Force la couleur de texte foncée sur TOUT élément
à l'intérieur des sections .agnes-presta-block--alt.
═══════════════════════════════════════════ */
.agnes-presta-content .agnes-presta-block--alt,
.agnes-presta-content .agnes-presta-block--alt h2,
.agnes-presta-content .agnes-presta-block--alt h3,
.agnes-presta-content .agnes-presta-block--alt h4,
.agnes-presta-content .agnes-presta-block--alt p,
.agnes-presta-content .agnes-presta-block--alt li,
.agnes-presta-content .agnes-presta-block--alt strong,
.agnes-presta-content .agnes-presta-block--alt em,
.agnes-presta-content .agnes-presta-block--alt span:not(.agnes-btn) {
color: var(--agnes-text);
}
.agnes-presta-content .agnes-presta-block--alt > h2,
.agnes-presta-content .agnes-presta-block--alt .agnes-presta-sub h3 {
color: var(--agnes-blue-deep);
}
.agnes-presta-content .agnes-presta-block--alt strong {
color: var(--agnes-blue-deep);
font-weight: 700;
}
/* ═══════════════════════════════════════════
PAGE À PROPOS — adoption du portrait-badge
(override des anciennes règles .agnes-apropos__photo img
qui cassaient le format circulaire du badge.)
═══════════════════════════════════════════ */
.agnes-apropos__photo {
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 0.5rem;
}
.agnes-apropos__photo .agnes-portrait-badge {
width: 260px;
height: 260px;
}
/* Annule les styles génériques de l'ancienne image rectangulaire */
.agnes-apropos__photo .agnes-portrait-badge img {
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 6px 6px 0 0 var(--agnes-blue-deep);
border: 5px solid #fff;
object-fit: cover;
filter: grayscale(100%) contrast(1.05);
}
.agnes-apropos__photo .agnes-portrait-badge:hover img {
filter: grayscale(0%) contrast(1);
transform: rotate(-2deg);
}
@media (max-width: 700px) {
.agnes-apropos__photo .agnes-portrait-badge {
width: 200px;
height: 200px;
}
}
/* ═══════════════════════════════════════════
ATELIER EN LIGNE — Générateur d'histoires
═══════════════════════════════════════════ */
.agnes-page-header--atelier {
background-image:
/* Pois chauds jaunes très pâles, clin d'œil aux cartes à tirer */
radial-gradient(circle, rgba(255, 200, 80, 0.12) 1.5px, transparent 2px),
radial-gradient(ellipse at 15% 20%, rgba(255, 247, 214, 0.6), transparent 45%),
radial-gradient(ellipse at 85% 80%, rgba(214, 238, 245, 0.55), transparent 45%);
background-size: 26px 26px, 100% 100%, 100% 100%;
background-repeat: repeat, no-repeat, no-repeat;
background-position: 0 0, 0 0, 0 0;
}
.agnes-page-header--atelier::before {
background: radial-gradient(circle, rgba(255, 200, 80, 0.15) 0%, transparent 70%);
}
.agnes-page-header--atelier::after {
background: radial-gradient(circle, rgba(0, 164, 200, 0.12) 0%, transparent 70%);
}
.agnes-atelier {
padding-top: 30px;
padding-bottom: 80px;
}
/* — Intro — */
.agnes-atelier__intro {
text-align: center;
max-width: 720px;
margin: 0 auto 40px;
font-size: 17px;
line-height: 1.7;
color: var(--agnes-text);
}
.agnes-atelier__intro p { margin: 0 0 18px; }
/* — Grille de cartes — */
.agnes-atelier__cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 60px;
}
@media (max-width: 600px) {
.agnes-atelier__cards { gap: 14px; }
}
/* — Une carte — */
.agnes-atelier-card {
--card-rot: -1.5deg;
background: var(--agnes-surface);
border: 1px solid var(--agnes-border);
border-radius: 14px;
padding: 18px 16px 14px;
box-shadow: 4px 4px 0 0 var(--agnes-blue-deep); /* ombre dure */
cursor: pointer;
transform: rotate(var(--card-rot));
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.25s ease;
display: flex;
flex-direction: column;
min-height: 240px;
position: relative;
}
.agnes-atelier-card:nth-child(2n) { --card-rot: 1.2deg; }
.agnes-atelier-card:nth-child(3n) { --card-rot: -0.8deg; }
.agnes-atelier-card:nth-child(5n+1) { --card-rot: 1.8deg; }
.agnes-atelier-card:hover,
.agnes-atelier-card:focus-visible {
transform: rotate(0deg) translateY(-3px);
box-shadow: 6px 6px 0 0 var(--agnes-blue-deep); /* ombre dure */
outline: none;
}
.agnes-atelier-card__header {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--agnes-border);
margin-bottom: 12px;
}
.agnes-atelier-card__icon {
font-size: 26px;
line-height: 1;
}
.agnes-atelier-card__title {
margin: 0;
font-family: var(--agnes-font-display);
font-weight: var(--agnes-font-display-weight);
font-size: 22px;
line-height: 1;
color: var(--agnes-blue-deep);
}
.agnes-atelier-card__inner {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 12px 4px;
position: relative;
min-height: 100px;
}
.agnes-atelier-card__face {
width: 100%;
transition: opacity 0.25s ease;
}
.agnes-atelier-card__face--back {
color: var(--agnes-text-muted, #888);
font-size: 14px;
font-style: italic;
}
.agnes-atelier-card__dots {
display: block;
font-family: var(--agnes-font-display);
font-weight: var(--agnes-font-display-weight);
font-size: 38px;
color: var(--agnes-primary);
margin-bottom: 6px;
letter-spacing: 0.1em;
}
.agnes-atelier-card__face--front {
display: none;
}
.agnes-atelier-card__value {
margin: 0;
font-family: var(--agnes-font-serif);
font-size: 17px;
line-height: 1.4;
color: var(--agnes-text);
}
/* État révélé : on bascule les faces */
.agnes-atelier-card.is-revealed .agnes-atelier-card__face--back {
display: none;
}
.agnes-atelier-card.is-revealed .agnes-atelier-card__face--front {
display: block;
animation: agnes-atelier-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes agnes-atelier-pop {
0% { transform: scale(0.85); opacity: 0; }
60% { transform: scale(1.03); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
/* État "shuffle" : petit jiggle pendant le tirage */
.agnes-atelier-card.is-shuffling {
animation: agnes-atelier-shuffle 0.32s ease-in-out;
}
@keyframes agnes-atelier-shuffle {
0%, 100% { transform: rotate(var(--card-rot)) translateX(0); }
25% { transform: rotate(calc(var(--card-rot) + 4deg)) translateX(-3px); }
75% { transform: rotate(calc(var(--card-rot) - 4deg)) translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
.agnes-atelier-card,
.agnes-atelier-card.is-shuffling {
animation: none;
transition: none;
transform: none;
}
.agnes-atelier-card.is-revealed .agnes-atelier-card__face--front {
animation: none;
}
}
.agnes-atelier-card__actions {
margin-top: 10px;
text-align: center;
}
.agnes-atelier-card__btn {
background: transparent;
border: 1px solid var(--agnes-border);
color: var(--agnes-text-muted, #666);
padding: 5px 12px;
border-radius: 999px;
font-size: 12px;
cursor: pointer;
transition: all 0.15s ease;
}
.agnes-atelier-card__btn:hover {
background: var(--agnes-primary);
color: #fff;
border-color: var(--agnes-primary);
}
/* — Zone d'écriture — */
.agnes-atelier__writing {
background: var(--agnes-surface);
border: 1px solid var(--agnes-border);
border-radius: 18px;
padding: 36px 32px;
box-shadow: 4px 4px 0 0 var(--agnes-blue-deep); /* ombre dure */
margin-bottom: 50px;
}
@media (max-width: 600px) {
.agnes-atelier__writing { padding: 24px 18px; }
}
.agnes-atelier__writing-head {
text-align: center;
margin-bottom: 28px;
}
.agnes-atelier__writing-head h2 {
margin: 0 0 6px;
font-family: var(--agnes-font-display);
font-weight: var(--agnes-font-display-weight);
color: var(--agnes-blue-deep);
font-size: clamp(28px, 4vw, 36px);
}
.agnes-atelier__writing-sub {
margin: 0;
color: var(--agnes-text-muted, #777);
font-style: italic;
font-size: 15px;
}
.agnes-atelier__writing-grid {
display: grid;
grid-template-columns: 1fr 280px;
gap: 28px;
align-items: stretch;
}
@media (max-width: 760px) {
.agnes-atelier__writing-grid {
grid-template-columns: 1fr;
}
}
.agnes-atelier__writing-pad { display: flex; flex-direction: column; }
.agnes-atelier__label {
display: block;
margin-bottom: 8px;
font-weight: 600;
font-size: 14px;
color: var(--agnes-text);
}
.agnes-atelier__textarea {
flex: 1;
width: 100%;
min-height: 240px;
padding: 16px 18px;
font-family: var(--agnes-font-serif);
font-size: 17px;
line-height: 1.7;
color: var(--agnes-text);
background:
repeating-linear-gradient(
transparent 0,
transparent 28px,
rgba(0, 0, 0, 0.04) 28px,
rgba(0, 0, 0, 0.04) 29px
),
var(--agnes-surface);
border: 1.5px solid var(--agnes-border);
border-radius: 10px;
resize: vertical;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.agnes-atelier__textarea:focus {
outline: none;
border-color: var(--agnes-primary);
box-shadow: 0 0 0 3px rgba(48, 138, 168, 0.15);
}
.agnes-atelier__counter {
margin-top: 8px;
font-size: 13px;
color: var(--agnes-text-muted, #888);
text-align: right;
font-variant-numeric: tabular-nums;
}
/* — Carte conseil à droite — */
.agnes-atelier__tips {
background: linear-gradient(180deg, #fff7d6 0%, #fffae6 100%);
border: 1px solid rgba(204, 168, 0, 0.25);
border-radius: 12px;
padding: 20px 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
transform: rotate(1deg);
}
.agnes-atelier__tips-title {
margin: 0 0 8px;
font-family: var(--agnes-font-display);
font-weight: var(--agnes-font-display-weight);
color: var(--agnes-blue-deep);
font-size: 22px;
line-height: 1.2;
}
.agnes-atelier__tip {
margin: 0;
font-family: var(--agnes-font-serif);
font-size: 16px;
line-height: 1.55;
color: #5a4a00;
transition: opacity 0.2s ease;
}
.agnes-atelier__tips-btn {
background: transparent;
border: 1px dashed rgba(204, 168, 0, 0.5);
color: #7a5800;
padding: 8px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
align-self: flex-start;
transition: all 0.15s ease;
}
.agnes-atelier__tips-btn:hover {
background: rgba(204, 168, 0, 0.18);
border-style: solid;
}
.agnes-atelier__writing-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-top: 28px;
padding-top: 24px;
border-top: 1px dashed var(--agnes-border);
}
/* — Bloc d'aide — */
.agnes-atelier__help {
background: linear-gradient(180deg, #eaf5f8 0%, #f5fbfc 100%);
border: 1px solid rgba(48, 138, 168, 0.18);
border-radius: 16px;
padding: 28px 30px;
}
@media (max-width: 600px) {
.agnes-atelier__help { padding: 22px 18px; }
}
.agnes-atelier__help h2 {
margin: 0 0 16px;
font-family: var(--agnes-font-display);
font-weight: var(--agnes-font-display-weight);
color: var(--agnes-blue-deep);
font-size: 26px;
}
.agnes-atelier__help ul {
margin: 0 0 18px;
padding-left: 22px;
color: var(--agnes-text);
line-height: 1.7;
}
.agnes-atelier__help ul li { margin-bottom: 8px; }
.agnes-atelier__help strong { color: var(--agnes-blue-deep); }
.agnes-atelier__cta {
margin-top: 18px;
padding-top: 16px;
border-top: 1px dashed rgba(48, 138, 168, 0.3);
font-size: 15px;
}
.agnes-atelier__cta a {
color: var(--agnes-primary-dark);
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 600;
}
/* — Dark mode — */
[data-theme="dark"] .agnes-atelier__tips {
background: linear-gradient(180deg, rgba(204, 168, 0, 0.18) 0%, rgba(204, 168, 0, 0.08) 100%);
border-color: rgba(204, 168, 0, 0.35);
}
[data-theme="dark"] .agnes-atelier__tip { color: #ffe899; }
[data-theme="dark"] .agnes-atelier__help {
background: linear-gradient(180deg, rgba(48, 138, 168, 0.18) 0%, rgba(48, 138, 168, 0.08) 100%);
}
/* ═══════════════════════════════════════════
IMPRESSION — fiche atelier
═══════════════════════════════════════════ */
@media print {
/* On masque tout sauf la zone atelier */
body * { visibility: hidden; }
#agnes-atelier, #agnes-atelier * { visibility: visible; }
#agnes-atelier {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding: 20px;
}
/* Pas de header de page, pas de boutons d'action */
.agnes-atelier__intro,
.agnes-atelier-card__actions,
.agnes-atelier__writing-actions,
.agnes-atelier__tips-btn,
.agnes-atelier__help {
display: none !important;
}
/* Cartes simplifiées */
.agnes-atelier__cards {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.agnes-atelier-card {
transform: none !important;
box-shadow: none !important;
border: 1px solid #999 !important;
background: #fff !important;
page-break-inside: avoid;
min-height: auto;
}
.agnes-atelier-card__face--back { display: none !important; }
.agnes-atelier-card__face--front { display: block !important; }
/* Titre de la fiche */
.agnes-page-header h1 {
font-size: 28px;
margin: 0 0 16px;
}
.agnes-atelier__writing {
box-shadow: none !important;
border: 1px solid #999;
background: #fff !important;
page-break-before: always;
}
.agnes-atelier__writing-grid {
grid-template-columns: 1fr;
}
.agnes-atelier__tips {
background: #fffae6 !important;
transform: none !important;
}
.agnes-atelier__textarea {
background: #fff !important;
min-height: 400px;
}
}
/* ═══════════════════════════════════════════
LIENS AILLEURS — articles / podcasts / vidéos sur une fiche livre
═══════════════════════════════════════════ */
.agnes-liens-ailleurs {
margin: 60px 0 40px;
}
.agnes-liens-ailleurs__list {
list-style: none;
padding: 0;
margin: 30px 0 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 14px;
}
.agnes-liens-ailleurs__item {
margin: 0;
}
.agnes-liens-ailleurs__link {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: #e7f4f8; /* turquoise très pâle, rappel de la couleur du site */
border: 1px solid rgba(0, 164, 200, 0.18);
border-radius: 12px;
text-decoration: none !important;
color: inherit !important;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.agnes-liens-ailleurs__link:hover,
.agnes-liens-ailleurs__link:focus-visible {
transform: translate(-2px, -2px);
border-color: var(--agnes-primary, #00A4C8);
background: #fff;
box-shadow: 6px 6px 0 0 var(--agnes-blue-deep, #003d54); /* ombre dure turquoise */
outline: none;
}
/* Variante : une carte sur deux légèrement teintée de sauge pour casser la monotonie */
.agnes-liens-ailleurs__item:nth-child(even) .agnes-liens-ailleurs__link {
background: #eaf4ed; /* vert sauge pâle */
border-color: rgba(95, 155, 115, 0.2);
}
.agnes-liens-ailleurs__item:nth-child(even) .agnes-liens-ailleurs__link:hover,
.agnes-liens-ailleurs__item:nth-child(even) .agnes-liens-ailleurs__link:focus-visible {
border-color: #5f9b73;
box-shadow: 6px 6px 0 0 #2f6b45; /* ombre dure sauge foncé */
}
.agnes-liens-ailleurs__item:nth-child(even) .agnes-liens-ailleurs__arrow {
color: #5f9b73;
}
/* Mode sombre : garder l'esprit mais assombrir */
@media (prefers-color-scheme: dark) {
.agnes-liens-ailleurs__link {
background: rgba(0, 164, 200, 0.12);
border-color: rgba(0, 164, 200, 0.3);
}
.agnes-liens-ailleurs__item:nth-child(even) .agnes-liens-ailleurs__link {
background: rgba(95, 155, 115, 0.14);
border-color: rgba(95, 155, 115, 0.32);
}
.agnes-liens-ailleurs__label {
color: var(--agnes-text, #e8ecef);
}
}
/* Pastille ronde avec picto SVG — style cohérent avec .agnes-intervention__icon */
.agnes-liens-ailleurs__icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 50%;
color: var(--agnes-primary);
box-shadow: 2px 2px 0 0 var(--agnes-blue-deep);
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.agnes-liens-ailleurs__icon .agnes-svg-icon {
width: 28px !important;
height: 28px !important;
}
/* Variante sauge pour les cartes paires */
.agnes-liens-ailleurs__item:nth-child(even) .agnes-liens-ailleurs__icon {
color: #5f9b73;
box-shadow: 2px 2px 0 0 #2f6b45;
}
/* Hover : cercle plein coloré, picto blanc */
.agnes-liens-ailleurs__link:hover .agnes-liens-ailleurs__icon,
.agnes-liens-ailleurs__link:focus-visible .agnes-liens-ailleurs__icon {
background: var(--agnes-primary);
color: #fff;
box-shadow: 3px 3px 0 0 var(--agnes-blue-deep);
transform: rotate(-6deg);
}
.agnes-liens-ailleurs__item:nth-child(even) .agnes-liens-ailleurs__link:hover .agnes-liens-ailleurs__icon,
.agnes-liens-ailleurs__item:nth-child(even) .agnes-liens-ailleurs__link:focus-visible .agnes-liens-ailleurs__icon {
background: #5f9b73;
box-shadow: 3px 3px 0 0 #2f6b45;
}
.agnes-liens-ailleurs__text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.agnes-liens-ailleurs__label {
font-weight: 600;
line-height: 1.3;
color: #222;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.agnes-liens-ailleurs__meta {
font-size: 0.82rem;
color: #6b6b6b;
letter-spacing: 0.01em;
}
.agnes-liens-ailleurs__arrow {
color: var(--agnes-primary, #308aa8);
font-size: 1.2rem;
flex-shrink: 0;
opacity: 0.65;
transition: opacity 0.18s ease, transform 0.18s ease;
}
.agnes-liens-ailleurs__link:hover .agnes-liens-ailleurs__arrow,
.agnes-liens-ailleurs__link:focus-visible .agnes-liens-ailleurs__arrow {
opacity: 1;
transform: translate(2px, -2px);
}
@media (max-width: 600px) {
.agnes-liens-ailleurs__list {
grid-template-columns: 1fr;
}
}