/* === IMPORTS GOOGLE FONTS === */
/* === :ROOT (VARIABLES CSS) === */
:root {
    /* Palette Basic — vert sauge, terracotta, beige lin */
    --primary: #D73A42;
    --secondary: #D73A42;
    --accent: #CACBCF;
    --bg-light: #FFFFFF;
    --bg-card: #FFFFFF;
    --text-dark: #17181E;
    --text-light: #57585a;
    --white: #FFFFFF;
    /* Texte posé sur --primary/--secondary (boutons, blocs colorés) :
       clair en mode clair, sombre en mode sombre (contraste). */
    --on-primary: #FFFFFF;

    /* Variables site / éditeur (compatibilité) */
    --couleur-principale: var(--primary);
    --couleur-action: var(--secondary);
    --couleur-accent: var(--accent);
    --couleur-douce: #F3F3F3;
    --couleur-chaude: #D73A42;
    --fond-page: #FFFFFF;
    --fond-blanc: #FFFFFF;
    --texte: var(--text-dark);
    --texte-clair: var(--white);
    --ombre: rgba(94, 122, 60, 0.16);

    /* Formes douces */
    --border-radius: 3px;
    --border-radius-sm: 12px;
    --border-radius-lg: 28px;

    /* Typographie */
    --font-title: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    --font-body: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    --font-accent: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";

    /* Espacements */
    --spacing-xs: 0.6rem;
    --spacing-sm: 1.1rem;
    --spacing-md: 2.2rem;
    --spacing-lg: 3.4rem;
    --spacing-xl: 5rem;

    /* Transitions et ombres */
    --transition: all 0.3s ease;
    --box-shadow: 0 6px 18px var(--ombre);
    --box-shadow-lg: 0 14px 34px rgba(94, 122, 60, 0.22);
  --font-size-base: 100%;
  --font-scale-h1: 1;
  --font-scale-h2: 1;
  --font-scale-h3: 1;
  --font-scale-p: 1.1;
  --texte-sur-action: #FFFDF7;
}

/* === DARK MODE (Media Query) === */


/* === RESET + BASE STYLES === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: var(--font-size-base);
    background-color: var(--bg-light);
    /* Grain papier recyclé très subtil (hors bloc FOND : il reste en place
       quand l'éditeur réécrit le fond de la page). */
    background-image: none;
    background-size: 340px;
    background-repeat: repeat;
    background-attachment: fixed;
}

/* Paragraphes de contenu (hors menu, en-tête, pied de page) : réglage « Paragraphes » du studio. */
:where(p:not(nav p, header p, footer p)) {
  font-size: calc(1em * var(--font-scale-p));
}

body {
    font-family: var(--font-body);
    background-color: var(--fond-page);
    color: var(--text-dark);
    line-height: 1.8;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

::selection {
    background: var(--primary);
    color: var(--on-primary);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--bg-light);
}

/* === TYPOGRAPHIE === */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: var(--spacing-sm);
    letter-spacing: 0.02em;
}

h1 { font-size: calc(3.6rem * var(--font-scale-h1)); color: var(--text-dark); text-align: center; }
h2 { font-size: calc(2.9rem * var(--font-scale-h2)); color: var(--primary); text-align: center; }
h3 { font-family: var(--font-body); font-size: calc(1.9rem * var(--font-scale-h3)); font-weight: 700; color: var(--primary); }
h4 { font-size: 1.6rem; color: var(--secondary); }

p { margin-bottom: var(--spacing-sm); }

a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}
a:hover { color: var(--secondary); }

/* Petit séparateur « dessiné à la main » sous les titres de section */
section h2 { line-height: 1.1; }
section h2::after {
    content: '';
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%202%20120%2016'%3E%3Cpath%20d='M6%2010%20C%2018%206%2C%2028%2014%2C%2040%2010%20C%2048%207.5%2C%2052%207.5%2C%2060%2010%20C%2068%2012.5%2C%2072%2012.5%2C%2080%2010%20C%2092%206%2C%20102%2014%2C%20114%2010'%20stroke='%23B85C3F'%20stroke-width='2'%20fill='none'%20stroke-linecap='round'/%3E%3Cpath%20d='M60%2010%20L53%204%20L60%207%20L67%204%20Z'%20fill='%2358763A'/%3E%3Cpath%20d='M60%2010%20L53%2016%20L60%2013%20L67%2016%20Z'%20fill='%2389A36B'/%3E%3Ccircle%20cx='60'%20cy='10'%20r='1.8'%20fill='%23B85C3F'/%3E%3C/svg%3E") center / contain no-repeat;
    display: block;
    width: 112px;
    height: 15px;
    margin: 0.25rem auto 0;
}

/* === BOUTONS (style « dessinés à la main ») ===
   Scopés sur les classes du contenu du site (.btn/.button) : ne touche
   jamais les boutons/overlays de l'éditeur (qui utilisent des classes de
   la forme *-btn et sont gérés par editor.css). */
.btn, .button {
    font-family: var(--font-accent);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    display: inline-block;
    padding: 0.7rem 1.9rem;
    border-radius: 999px;
    background-color: var(--couleur-principale);
    color: var(--on-primary);
    border: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 14px var(--ombre);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
}

.btn:hover, .button:hover {
    background-color: var(--couleur-action);
    color: var(--texte-sur-action);
    transform: translateY(-3px);
    box-shadow: var(--box-shadow-lg);
}

.btn::before, .button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.12) 50%, transparent 55%);
    transform: translateX(-100%);
    transition: var(--transition);
}

.btn:hover::before, .button:hover::before {
    transform: translateX(100%);
}

/* Boutons de carrousel / jeu (déjà stylés, on neutralise l'héritage éditeur) */
.carousel-btn, .carousel-dots button, .rainette-bar button, .rainette-restart {
    font-family: inherit;
}

/* === IMAGES === */
img {
    max-width: 100%;
    height: auto;
}

/* Pas d'arrondi ni d'ombre global : appliqués par contexte
   (.card-img, .gallery-item img, .multi-col img, .img-round, .img-link img,
   .partners img, …) pour ne pas affecter les vignettes de l'éditeur. */

.img-round {
    border-radius: 50%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 5px solid var(--accent);
}

/* === NAVIGATION === */
.nav-horizontal {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(255, 253, 247, 0.85);
    backdrop-filter: blur(10px);
    padding: 0.7rem var(--spacing-md);
    border-bottom: 1px solid rgba(88, 118, 58, 0.12);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    box-shadow: var(--box-shadow);
}

.nav-horizontal ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
}

.nav-horizontal ul li {
    display: inline-block;
}

.nav-horizontal a,
.nav-horizontal .is-separator {
    font-family: var(--font-accent);
    font-size: 1.15rem;
    color: var(--text-dark);
    padding: 0.35rem 1.1rem;
    border-radius: 999px;
    transition: var(--transition);
    white-space: nowrap;
}

.nav-horizontal .is-separator {
    cursor: default;
}

.nav-horizontal a:hover {
    background-color: rgba(88, 118, 58, 0.12);
    color: var(--primary);
}

.nav-horizontal a.active {
    background-color: var(--primary);
    color: var(--on-primary);
}

/* Sous-menus déroulants (navigation 2 niveaux : parent-link/title +
   ul.navbar__submenu — rendu par nav_handlers.py) */
.nav-horizontal ul li.has-submenu {
    position: relative;
}

.nav-horizontal ul ul.navbar__submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 230px;
    list-style: none;
    background: var(--fond-blanc);
    border: 1px solid var(--couleur-accent);
    border-radius: 12px;
    box-shadow: 0 8px 24px var(--ombre);
    padding: 0.4rem;
    z-index: 1001;
}

.nav-horizontal ul li.has-submenu:hover > ul.navbar__submenu,
.nav-horizontal ul li.has-submenu:focus-within > ul.navbar__submenu {
    display: block;
}

.nav-horizontal ul ul.navbar__submenu li {
    display: block;
    width: 100%;
}

.nav-horizontal ul ul.navbar__submenu li a,
.nav-horizontal ul ul.navbar__submenu li .is-separator {
    display: block;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    white-space: normal;
    text-align: left;
}

.nav-horizontal ul ul.navbar__submenu li a:hover {
    background-color: color-mix(in srgb, var(--couleur-accent) 18%, transparent);
    text-decoration: underline;
}

/* Burger (menu hamburger) — bouton injecté par js/main.js, affiché sur petit écran */
.nav-burger {
    display: none;
    background: none;
    border: 1px solid #D5D5D5;
    border-radius: 8px;
    padding: 0.55rem 0.65rem;
    cursor: pointer;
}

.nav-burger span {
    display: block;
    width: 26px;
    height: 3px;
    background: var(--couleur-principale);
    border-radius: 2px;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.nav-burger span + span { margin-top: 5px; }

/* Croix quand le menu est ouvert */
.nav-horizontal.nav-open .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-horizontal.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav-horizontal.nav-open .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav-vertical {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.nav-vertical a {
    font-family: var(--font-body);
    color: var(--text-light);
    padding: 0.2rem 0;
    transition: var(--transition);
}

.nav-vertical a:hover {
    color: var(--primary);
    padding-left: var(--spacing-xs);
}

/* Sélecteur de langue FR/EN */
.lang-switcher {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 1rem;
    background: var(--couleur-principale);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.lang-switcher a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}

.lang-switcher a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

.lang-switcher a.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}

.lang-switcher .lang-sep {
    color: rgba(255, 255, 255, 0.4);
}

[data-lang][hidden] {
    display: none !important;
}

html:not(.editor-lang-fr):not(.editor-lang-en)[data-lang-pending][lang="fr"] [data-lang="fr"] {
    display: inherit !important;
}
html:not(.editor-lang-fr):not(.editor-lang-en)[data-lang-pending][lang="fr"] [data-lang="en"] {
    display: none !important;
}
html:not(.editor-lang-fr):not(.editor-lang-en)[data-lang-pending][lang="en"] [data-lang="fr"] {
    display: none !important;
}
html:not(.editor-lang-fr):not(.editor-lang-en)[data-lang-pending][lang="en"] [data-lang="en"] {
    display: inherit !important;
}

/* === HERO === */
.hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    background-size: cover;
    background-position: center;
    padding: var(--spacing-xl) var(--spacing-md);
    color: var(--white);
    border-radius: var(--border-radius-lg);
    margin: var(--spacing-md) auto;
    max-width: 1400px;
    width: 100%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: var(--box-shadow-lg);
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Voile réglable dans l'éditeur (curseur « Voile » du hero) via
       --voile-hero (défaut 0.55 = rendu d'origine à l'identique). */
    background: linear-gradient(180deg, rgba(45, 74, 51, var(--voile-hero, 0.55)) 0%, rgba(45, 74, 51, calc(var(--voile-hero, 0.55) * 0.64)) 100%);
    border-radius: var(--border-radius-lg);
}

.hero > * {
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-size: calc(4.4rem * var(--font-scale-h1));
    color: var(--white);
    margin-bottom: var(--spacing-sm);
    text-shadow: 2px 3px 8px rgba(0, 0, 0, 0.45);
}

.hero p {
    font-size: calc(1.35rem * var(--font-scale-p));
    font-weight: 600;
    color: var(--white);
    max-width: 800px;
    margin: 0 auto;
    text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
}

/* === HERO PLEINE LARGEUR (marqueur inline explicite uniquement) ===
   Règle : le hero est une CARTE arrondie centrée par défaut (max-width,
   margin auto et border-radius du .hero ci-dessus — aucun style inline
   de largeur/marge/arrondi). Le plein-bleed collé en haut n'est appliqué
   que sur demande explicite via le marqueur inline "max-width: none".
   Dans ce cas l'inline bat le max-width du thème mais pas le
   margin/border-radius carte — ni le radius du ::before (inaccessible
   en inline). Ces overrides rendent la demande effective sans changer
   le look carte par défaut (hero sans marqueur). Spécificité
   (0,2,0) > .hero du @media 768px : pas besoin de les déplacer. */
.hero[style*="max-width: none"], .hero[style*="max-width:none"] {
    margin: 0;
    border-radius: 0;
    max-width: none;
    width: 100%;
}

.hero[style*="max-width: none"]::before, .hero[style*="max-width:none"]::before {
    border-radius: 0;
}

/* === STRUCTURE : SECTIONS ET COLONNES === */
section {
    padding: 1.4rem var(--spacing-md);
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.two-col {
    grid-template-columns: 1fr 1fr;
}

.multi-col {
    display: grid;
    gap: var(--spacing-lg);
    margin: var(--spacing-sm) 0;
    align-items: center;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}

.multi-col img {
    width: 100%;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.sec-col {
    flex: 1 1 0%;
    padding: var(--spacing-sm);
}

.fixed-height {
    height: 400px;
    overflow: hidden;
    position: relative;
    border-radius: var(--border-radius);
}

/* === CARTES === */
.card {
    background-color: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: 0;
    margin-bottom: var(--spacing-sm);
    box-shadow: var(--box-shadow);
    border: 1px solid rgba(88, 118, 58, 0.12);
    transition: var(--transition);
    overflow: hidden;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-lg);
    border-color: var(--accent);
}

/* Carte-lien SEO : <a class="card"> — rendu identique, sans style de lien. */
a.card {
    display: block;
    color: inherit;
    text-decoration: none;
}
a.card:hover {
    color: inherit;
}

.card-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    box-shadow: none;
}

.card-body {
    padding: var(--spacing-md);
}

.card-body h3 {
    font-size: calc(1.3rem * var(--font-scale-h3));
    color: var(--primary);
    margin-bottom: var(--spacing-xs);
}

.card-body p {
    font-size: calc(0.95rem * var(--font-scale-p));
    color: var(--text-light);
    line-height: 1.7;
}

.card-body .btn {
    margin-top: var(--spacing-sm);
}

.ferme-card {
    background-color: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    margin: var(--spacing-sm) 0;
    box-shadow: var(--box-shadow);
    border: 1px solid rgba(88, 118, 58, 0.12);
}

.ferme-card h3 {
    color: var(--primary);
    font-size: calc(1.5rem * var(--font-scale-h3));
    margin-bottom: var(--spacing-sm);
}

.ferme-card p {
    margin-bottom: var(--spacing-xs);
}

/* === GALERIE === */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.2rem;
}

.gallery-item {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    cursor: pointer;
    transition: var(--transition);
}

.gallery-item:hover {
    transform: scale(1.02);
    box-shadow: var(--box-shadow-lg);
}

.gallery-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.03);
    filter: brightness(1.05);
}

.gallery-item::after {
    content: attr(data-alt);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 1rem;
    background: linear-gradient(transparent 60%, rgba(88, 118, 58, 0.75));
    color: #fff;
    font-size: 0.85rem;
    line-height: 1.3;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.gallery-item:hover::after {
    opacity: 1;
}

.gallery-item:not([data-alt])::after,
.gallery-item[data-alt=""]::after {
    content: none;
}

/* === CARROUSEL === */
.carousel-container {
    position: relative;
    max-width: 100%;
    margin: var(--spacing-sm) auto;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--box-shadow-lg);
}

/* Le body du theme est en flex column et les sections en margin auto :
   sans largeur explicite, une section contenant un carrousel se retracte
   sur son contenu textuel (les slides absolues ne contribuent pas a la
   largeur intrinseque) et le carrousel parait minuscule. */
section:has(.carousel-container) {
    width: 100%;
}

/* Hauteur pilotee par le track (ratio fixe) : toutes les slides sont
   superposees en absolu, la hauteur ne depend plus des dimensions
   reelles des photos et ne bouge plus a chaque changement. */
.carousel-track {
    position: relative;
    aspect-ratio: 16/10;
}

.carousel-track img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    border-radius: 0;
    box-shadow: none;
}

.carousel-track img.active {
    opacity: 1;
    pointer-events: auto;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 253, 247, 0.92);
    color: var(--primary);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
    cursor: pointer;
    transition: var(--transition);
    z-index: 10;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
}

.carousel-btn:hover {
    background: var(--primary);
    color: var(--on-primary);
    transform: translateY(-50%) scale(1.1);
}

.carousel-btn.prev { left: 14px; }
.carousel-btn.next { right: 14px; }

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: var(--spacing-sm);
}

.carousel-dots button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--secondary);
    background: transparent;
    cursor: pointer;
    transition: var(--transition);
}

.carousel-dots button.active {
    background: var(--secondary);
    width: 26px;
    border-radius: 999px;
}

/* === GRILLE DE TARIFS === */
.price-grid {
    display: grid;
    gap: var(--spacing-md);
    max-width: 760px;
    margin: var(--spacing-md) auto;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.price-card {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    text-align: center;
    box-shadow: var(--box-shadow);
    border: 1px solid rgba(88, 118, 58, 0.12);
    transition: var(--transition);
}

.price-card:hover {
    transform: translateY(-5px) rotate(-1deg);
    box-shadow: var(--box-shadow-lg);
    border-color: var(--accent);
}

.price-card h3 {
    font-family: var(--font-title);
    color: var(--primary);
    font-size: calc(1.4rem * var(--font-scale-h3));
    margin-bottom: var(--spacing-xs);
}

.price {
    font-family: var(--font-accent);
    font-size: 2.2rem;
    color: var(--couleur-chaude);
    font-weight: 700;
}

.price small {
    font-size: 1rem;
    color: var(--text-light);
}

/* === BLOC CONTACT === */
.contact-block {
    background: var(--primary);
    color: var(--on-primary);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    margin: var(--spacing-md) auto;
    max-width: 820px;
    text-align: center;
    box-shadow: var(--box-shadow-lg);
}

.contact-block h2, .contact-block h3 {
    color: var(--on-primary);
    margin-bottom: var(--spacing-md);
}

.contact-block p {
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: var(--spacing-xs);
}

.contact-block a {
    color: var(--on-primary);
    text-decoration: underline;
}

.contact-block a:hover {
    color: var(--accent);
}

.phone-link {
    color: var(--secondary);
    font-weight: 700;
    text-decoration: none;
}

.phone-link:hover {
    color: var(--primary);
    text-decoration: underline wavy var(--secondary) 1px;
}

/* === IMAGE CLIQUABLE === */
.img-link {
    display: block;
    position: relative;
    width: fit-content;
    margin: var(--spacing-sm) auto;
    border-radius: 50%;
    overflow: hidden;
}

.img-link img {
    display: block;
    width: 300px;
    aspect-ratio: 1;
    object-fit: cover;
    transition: var(--transition);
}

.img-link:hover img {
    transform: scale(1.05);
}

.img-link .overlay {
    position: absolute;
    inset: 0;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(45, 74, 51, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
    color: var(--white);
    font-family: var(--font-accent);
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    padding: var(--spacing-sm);
}

.img-link:hover .overlay {
    opacity: 1;
}

/* === FAQ === */
.geo-faq-section {
    background-color: var(--bg-card);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-top: var(--spacing-md);
    box-shadow: var(--box-shadow);
    border: 1px solid rgba(88, 118, 58, 0.12);
}

.geo-faq-section h3 {
    color: var(--primary);
    font-size: calc(1.2rem * var(--font-scale-h3));
    margin-bottom: var(--spacing-xs);
}

.geo-faq-section p {
    color: var(--text-light);
    margin-bottom: var(--spacing-sm);
}

/* === PIED DE PAGE === */
footer {
    background: linear-gradient(135deg, #58763A 0%, #46622E 100%);
    color: var(--couleur-douce);
    padding: 3rem 2rem 1.5rem;
    margin-top: auto;
}

footer .footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

footer h3, footer .footer-title {
    font-family: var(--font-title);
    color: var(--accent);
    margin-bottom: 1rem;
    font-size: calc(1.4rem * var(--font-scale-h3));
    line-height: 1.2;
    font-weight: bold;
}

footer p, footer a {
    color: var(--couleur-douce);
    margin-bottom: 0;
    font-size: 0.9rem;
    line-height: 1.8;
    text-decoration: none;
}

footer a:hover {
    color: var(--accent);
    text-decoration: underline;
}

footer .nav-vertical {
    display: flex;
    flex-direction: column;
    gap: 0;
}

footer .nav-vertical p {
    margin-bottom: 0;
}

footer .nav-vertical p a {
    color: var(--couleur-douce);
    font-size: 0.9rem;
    line-height: 1.8;
    text-decoration: none;
    display: block;
    padding: 0.15rem 0;
}

footer .nav-vertical p a:hover {
    color: var(--accent);
    text-decoration: underline;
    padding-left: 0;
}

/* Sous-menus hiérarchiques en vertical : retrait niveau 2. */
.nav-vertical p.nav-sub,
footer .nav-vertical p.nav-sub {
    padding-left: 1.2rem;
}

footer .social-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 1.2rem;
    font-size: 0.9rem;
}

footer .partners {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-top: 0.5rem;
}

footer .partners img {
    height: 32px;
    width: auto;
    opacity: 0.8;
    transition: opacity 0.3s;
}

footer .partners img:hover {
    opacity: 1;
}

footer .copyright {
    text-align: center;
    padding-top: 2rem;
    margin-top: 2rem;
    border-top: 1px solid rgba(255, 253, 247, 0.2);
    font-size: 0.85rem;
}

footer .copyright p {
    margin-bottom: 0;
}

/* === PAGE 404 === */
.four-oh-four {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.four-oh-four h1 {
    font-size: calc(4rem * var(--font-scale-h1));
}

.four-oh-four h1 small {
    font-family: var(--font-body);
    font-size: 1.4rem;
    color: var(--text-light);
}

/* === JEU RAINETTE === */
.rainette-game {
    max-width: 960px;
    margin: 1.5rem auto;
    background: var(--couleur-principale);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 6px 24px var(--ombre);
}
.rainette-stage {
    position: relative;
    overflow: hidden;
    background: var(--couleur-principale);
    cursor: crosshair;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    aspect-ratio: 4 / 3;
}
.rainette-slide {
    display: none;
    position: relative;
    line-height: 0;
}
.rainette-slide.active {
    display: block;
}
.rainette-slide img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    box-shadow: none;
}
.rainette-markers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.rainette-cercle {
    position: absolute;
    box-sizing: border-box;
    border: 3px solid var(--couleur-accent);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--ombre);
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.3s;
}
.rainette-croix {
    position: absolute;
    pointer-events: none;
    z-index: 3;
}
.rainette-croix svg {
    display: block;
}
.rainette-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    background: var(--couleur-principale);
    color: var(--on-primary);
    font-size: 1.1rem;
    flex-wrap: wrap;
}
.rainette-bar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.rainette-bar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.rainette-bar button {
    background: var(--couleur-action);
    border: none;
    color: var(--texte-sur-action);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    font-size: 1.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    line-height: 1;
    box-shadow: none;
}
.rainette-bar button:hover {
    background: var(--couleur-chaude);
}
.rainette-idx {
    min-width: 64px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: 1.1rem;
}
.rainette-score {
    color: var(--couleur-accent);
    font-weight: 600;
    white-space: nowrap;
    font-size: 1.1rem;
}
.rainette-hint {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #ccc;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.5s;
}
.rainette-hint.show {
    opacity: 1;
}
.rainette-rain-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
}
.rainette-rain-frog {
    position: absolute;
    top: -40px;
    font-size: 26px;
    pointer-events: none;
    animation: rainette-fall linear forwards;
}
@keyframes rainette-fall {
    0% {
        top: -6%;
        transform: translateX(0px) rotate(0deg);
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        top: 106%;
        transform: translateX(var(--drift, 0px)) rotate(360deg);
        opacity: 0;
    }
}
.rainette-restart-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 1 auto;
    justify-content: center;
    min-width: 0;
}
.rainette-restart-label {
    color: var(--couleur-douce);
    font-size: 1rem;
    white-space: nowrap;
}
.rainette-bravo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    z-index: 10;
    pointer-events: none;
    animation: rainette-bravo-in 0.5s ease-out both;
    white-space: nowrap;
}
@keyframes rainette-bravo-in {
    0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.rainette-restart {
    background: var(--couleur-action);
    border: none;
    color: var(--texte-sur-action);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    font-size: 1.8rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
    line-height: 1;
    box-shadow: none;
}
.rainette-restart:hover {
    background: var(--couleur-chaude);
}
@keyframes rainette-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}
.rainette-next.rainette-blink {
    animation: rainette-blink 1s ease-in-out infinite;
}
.rainette-restart.rainette-blink {
    animation: rainette-blink 1.2s ease-in-out infinite;
}

/* === ANIMATIONS LÉGÈRES === */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.6s ease forwards;
}

/* === DARK MODE : lisibilité navigation + pied de page ===
   Placé APRÈS les règles de base : à spécificité égale, c'est l'ordre qui
   départage, donc ces surcharges doivent venir en dernier.
   (fond beige du menu codé en dur, var(--couleur-douce) du footer devenue
   sombre : texte clair sur fond clair / texte sombre sur fond vert.) */



/* === PUBLII (import) ===
   Typographie et contenu du thème Publii « Collectif Court Circuit officiel 2 2 ». Le contenu importé
   est dans .publii-content (section des pages, zone de texte des articles).
   --publii-fs = taille racine du site Publii (ses rem y sont rapportés). */
html { --publii-fs: clamp(1.1rem, 1.1rem + (0.09999999999999987 * ((100vw - 20rem) / 70)), 1.2rem); }
html body { color: #17181E; line-height: 1.7; font-size: var(--publii-fs); }
html h1, html h2, html h3, html h4, html h5, html h6 { font-family: var(--font-title); color: #17181E; text-align: left;
    letter-spacing: 0; font-weight: bold; line-height: 1.2; }
html h1 { font-size: clamp(calc(1.5710900065 * var(--publii-fs)), calc(1.5710900065 * var(--publii-fs)) + 1.424540906 * (100vw - calc(20 * var(--publii-fs))) / 70, calc(2.9956309125 * var(--publii-fs))); }
html h2 { font-size: clamp(calc(1.3808408252 * var(--publii-fs)), calc(1.3808408252 * var(--publii-fs)) + .9332127447 * (100vw - calc(20 * var(--publii-fs))) / 70, calc(2.3140535699 * var(--publii-fs))); }
html h3 { font-family: var(--font-title); font-size: clamp(calc(1.2136296308 * var(--publii-fs)), calc(1.2136296308 * var(--publii-fs)) + .4621997101 * (100vw - calc(20 * var(--publii-fs))) / 70, calc(1.6758293408 * var(--publii-fs))); color: #17181E; }
html h4 { font-size: clamp(calc(1.1377777785 * var(--publii-fs)), calc(1.1377777785 * var(--publii-fs)) + .1567604947 * (100vw - calc(20 * var(--publii-fs))) / 70, calc(1.2945382732 * var(--publii-fs))); color: #17181E; }
html h5 { font-size: clamp(calc(1.066666667 * var(--publii-fs)), calc(1.066666667 * var(--publii-fs)) + .0711111115 * (100vw - calc(20 * var(--publii-fs))) / 70, calc(1.1377777785 * var(--publii-fs))); }
html h6 { font-size: clamp(calc(1 * var(--publii-fs)), calc(1 * var(--publii-fs)) + 0 * (100vw - calc(20 * var(--publii-fs))) / 70, calc(1 * var(--publii-fs))); }
html section h2::after { display: none; }
html a { color: #D73A42; }
html a:hover { color: #D73A42; }
html .nav-horizontal { background-color: #FFFFFF; backdrop-filter: none; border-radius: 0; box-shadow: none; border-bottom: 1px solid #CACBCF; }
html .nav-horizontal a, html .nav-horizontal .is-separator { font-family: var(--font-body); font-size: 1rem; border-radius: 4px; }
html .nav-horizontal a:hover { background-color: transparent; color: #D73A42; }
html .nav-horizontal a.active { background-color: transparent; color: #D73A42; }
html .hero { background: none; box-shadow: none; min-height: 0; padding: 0 8vw calc(calc(0.28333 * var(--publii-fs)) * 6 + 1.5vw); margin: 0 auto; max-width: calc(calc(76 * var(--publii-fs)) + 2 * 8vw); width: 100%; align-items: flex-start; text-align: left; color: #17181E; border-radius: 0; }
html .hero::before { display: none; }
html .hero h1 { color: #17181E; text-shadow: none; font-size: clamp(calc(1.5710900065 * var(--publii-fs)), calc(1.5710900065 * var(--publii-fs)) + 1.424540906 * (100vw - calc(20 * var(--publii-fs))) / 70, calc(2.9956309125 * var(--publii-fs))); text-align: left; margin: calc(calc(0.28333 * var(--publii-fs)) * 6 + 1vw) 0 0; }
html .hero p { color: #17181E; text-shadow: none; font-weight: normal; margin: 0; }
html .hero.has-bg { min-height: 320px; color: #FFFFFF; border-radius: var(--border-radius); }
html .hero.has-bg::before { display: block; }
html .hero.has-bg h1, html .hero.has-bg p { color: #FFFFFF; }
html footer { background: #F3F3F3; color: #17181E; text-align: center; }
html footer p, html footer a, html footer .nav-vertical p a { color: #17181E; }
html footer h3, html footer .footer-title { color: #17181E; font-family: var(--font-title); }
html footer a:hover, html footer .nav-vertical p a:hover { color: #D73A42; }
html footer .copyright { border-top: none; margin-top: 0; padding-top: 0; }
html footer .copyright p { font-size: inherit; color: inherit; line-height: inherit; }

html footer { border-top:1px solid #CACBCF;font-size:calc(.9374999997 * var(--publii-fs));padding:calc(calc(0.28333 * var(--publii-fs)) * 9 + 1vw) 0 calc(calc(0.28333 * var(--publii-fs)) * 6 + 1vw);margin:calc(calc(0.28333 * var(--publii-fs)) * 12 + 1vw) auto 0;max-width:calc(76 * var(--publii-fs));text-align:center }
html footer .copyright { font-size:calc(.8239746086 * var(--publii-fs));margin-top:calc(0.28333 * var(--publii-fs)) }
.publii-content { --page-margin:8vw;--page-width:calc(76 * var(--publii-fs));--entry-width:calc(60 * var(--publii-fs));--navbar-height:calc(4.4 * var(--publii-fs));--border-radius:3px;--baseline:calc(0.28333 * var(--publii-fs));--gallery-gap:calc(var(--baseline) * 1.5);--body-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--heading-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--logo-font:var(--body-font);--menu-font:var(--heading-font);--font-weight-normal:400;--font-weight-bold:600;--line-height:1.7;--letter-spacing:0em;--headings-weight:500;--headings-transform:none;--headings-style:normal;--headings-letter-spacing:0em;--headings-line-height:1.2;--hero-height:50vh;--feed-image-size:calc(8 * var(--publii-fs));--white:#FFFFFF;--black:#17181E;--helper:#FFFFFF;--dark:#17181E;--gray:#57585a;--light:#CACBCF;--lighter:#F3F3F3;--page-bg:#FFFFFF;--color:#D73A42;--text-color:#17181E;--headings-color:#17181E;--link-color:#17181E;--link-color-hover:#D73A42;--nav-link-color:#17181E;--nav-link-color-hover:#17181E;--logo-color:#17181E;--highlight-color:#FFC700;--info-color:#67B1F3;--success-color:#00A563;--warning-color:#EE4E4E; ; color: var(--text-color); font-family: var(--body-font); font-size: var(--publii-fs); line-height: var(--line-height); max-width: calc(calc(60 * var(--publii-fs)) + 2 * var(--spacing-md)); padding-top: 0; padding-bottom: 0; --font-scale-p: 1; }
/* Paragraphes : ni agrandissement ni marge basse du thème de base (Publii : marge haute seule). */
.publii-content p { margin-bottom: 0; }
/* Body en flex (thème de base) : pas de fusion de marges avec le pied de
   page comme chez Publii ; on retire les marges basses de fin de contenu. */
html .publii-content.publii-content > div, html [data-article-content].publii-content.publii-content,
html .publii-content.publii-content > div > :last-child, html [data-article-content].publii-content.publii-content > :last-child { margin-bottom: 0; }
/* Page d'article : en-tête façon Publii (titre, ligne auteur/date en
   petit, pas de résumé ; il reste modifiable dans les propriétés). */
html article[data-article-slug] > section { padding: 0 8vw 0; max-width: calc(calc(76 * var(--publii-fs)) + 2 * 8vw); }
html article[data-article-slug] > section > div { padding-left: 0; padding-right: 0; }
html article[data-article-slug] [data-article-content].publii-content { max-width: calc(60 * var(--publii-fs)); margin-left: auto; margin-right: auto; }
html article[data-article-slug] > section > div > h1 { text-align: left; margin: calc(calc(0.28333 * var(--publii-fs)) * 6 + 1vw) 0 0; }
html article[data-article-slug] > section > div > .article-excerpt { display: none; }
html article[data-article-slug] > section > div > .article-meta { color: #57585a; font-size: calc(.8239746086 * var(--publii-fs)); text-align: left; margin: calc(calc(0.28333 * var(--publii-fs)) * 4 + .25vw) 0 0; padding-bottom: calc(calc(0.28333 * var(--publii-fs)) * 6 + 1.5vw); }
/* address et lignes div de Publii devenus p : pas de marge haute (lignes
   serrées), sauf juste après un titre si le thème a une règle h1+* (Taste). */
html :is(.publii-content > div, [data-article-content].publii-content) :is(p.publii-address, p.publii-div) { margin-top: 0; }
.publii-content p.publii-address { font-style: normal; }
/* h4-h6 Publii devenus h3 (mode Mise en page) : taille d'origine. */
html :is(.publii-content > div, [data-article-content].publii-content) h3.publii-h4 { font-size: clamp(calc(1.1377777785 * var(--publii-fs)), calc(1.1377777785 * var(--publii-fs)) + .1567604947 * (100vw - calc(20 * var(--publii-fs))) / 70, calc(1.2945382732 * var(--publii-fs))); }
html :is(.publii-content > div, [data-article-content].publii-content) h3.publii-h5 { font-size: clamp(calc(1.066666667 * var(--publii-fs)), calc(1.066666667 * var(--publii-fs)) + .0711111115 * (100vw - calc(20 * var(--publii-fs))) / 70, calc(1.1377777785 * var(--publii-fs))); }
html :is(.publii-content > div, [data-article-content].publii-content) h3.publii-h6 { font-size: clamp(calc(1 * var(--publii-fs)), calc(1 * var(--publii-fs)) + 0 * (100vw - calc(20 * var(--publii-fs))) / 70, calc(1 * var(--publii-fs))); }
/* Image nue (ex-figure.post__image) : marges de figure de Publii. */
.publii-content > div > img, [data-article-content].publii-content > img { display: block; margin-top: calc(var(--baseline) * 6 + .5vw); margin-bottom: calc(var(--baseline) * 6 + .5vw); }
.publii-content h1, .publii-content h2, .publii-content h3, .publii-content h4, .publii-content h5, .publii-content h6 { text-align: left; }
.publii-content h2::after { display: none; }
.publii-content li { list-style: inherit; }
.publii-content figure.content__featured-image { margin: 0 0 2rem; }
.publii-content img.content__featured-image { margin: 0 auto 2rem; border-radius: var(--border-radius); }
.publii-content .gallery { gap: 0; grid-template-columns: none; }
/* Galerie : la classe gallery-item (ajoutée pour l'éditeur) ne doit pas
   apporter le style du thème de base (carré, ombre, zoom, légende au survol). */
.publii-content .gallery-item, .publii-content .gallery-item:hover { box-shadow: none; border-radius: 0; overflow: visible; transform: none; }
.publii-content .gallery-item img, .publii-content .gallery-item:hover img { aspect-ratio: auto; transform: none; filter: none; }
.publii-content .gallery-item::after { content: none; }
html .publii-content > div > .gallery:first-child { margin-top: calc(var(--baseline) * 6 + .5vw); }
/* En-tête façon Publii (écran large ; en dessous, burger du thème de base).
   Le 1er lien du menu (Accueil) devient le logo texte : le menu est
   régénéré par l'éditeur, le logo vit donc dans le CSS. */
@media (min-width: 901px) {
html .nav-horizontal { display: flex; align-items: center; min-height: calc(6 * var(--publii-fs)); padding: 0 8vw; border-bottom: none; }
html .nav-horizontal > ul { width: 100%; justify-content: flex-start; flex-wrap: nowrap; gap: 0; }
html .nav-horizontal > ul > li:first-child:has(> a[href$="index.html"]) { margin-right: auto; }
html .nav-horizontal > ul > li > a, html .nav-horizontal > ul > li > .is-separator { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; font-size: calc(.8789062495 * var(--publii-fs)); letter-spacing: normal; color: #17181E; padding: 0 calc(.6 * var(--publii-fs)); }
html .nav-horizontal > ul > li:has(a.active) > .is-separator, html .nav-horizontal > ul > li > a.active { color: #D73A42; }
html .nav-horizontal > ul > li:first-child > a[href$="index.html"] { font-size: 0; letter-spacing: 0; padding: 0; background: none; }
html .nav-horizontal > ul > li:first-child > a[href$="index.html"]::after { content: "Collectif Court Circuit officiel"; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; font-size: calc(1.2136296308 * var(--publii-fs)); color: #17181E; white-space: nowrap; }
}
html .nav-horizontal ul li.has-submenu { text-decoration: none; }
/* Image mise en avant : hors colonne de texte, comme Publii (largeur de la
   page ; thème à hero : bandeau de hauteur fixe recadré). */
html .publii-content img.content__featured-image { display: block; max-width: none; width: calc(100vw - 2 * 8vw); object-fit: cover; border-radius: calc(3px * 4); position: relative; left: 50%; transform: translateX(-50%); margin: 0 0 calc(calc(0.28333 * var(--publii-fs)) * 6 + 1.5vw); }
@media (min-width: 56.25em) { html .publii-content img.content__featured-image { height: 50vh; } }
/* Chez Publii l'image est avant la zone de texte : la marge haute de celle-ci passe sous l'image (feat_mb). */
html .publii-content.publii-content > div:has(> img.content__featured-image:first-child) { margin-top: 0; }
.publii-content li{list-style:none}
.publii-content img{height:auto;max-width:100%;vertical-align:top}
.publii-content address{font-style:normal}
.publii-content a{color:var(--link-color);-webkit-transition:all .24s ease-out;transition:all .24s ease-out}
.publii-content a:hover{color:var(--link-color-hover)}
.publii-content a:active{color:var(--link-color-hover)}
.publii-content a:focus{outline:0}
.publii-content a{text-decoration:none}
.publii-content dl,.publii-content ol,.publii-content p,.publii-content ul{margin-top:calc(var(--baseline) * 4 + .25vw)}
.publii-content blockquote,.publii-content figure,.publii-content hr,.publii-content pre,.publii-content table{margin-top:calc(var(--baseline) * 6 + .5vw);margin-bottom:calc(var(--baseline) * 6 + .5vw)}
.publii-content h1,.publii-content h2,.publii-content h3,.publii-content h4,.publii-content h5,.publii-content h6{color:var(--headings-color);font-family:var(--heading-font);font-variation-settings:"wght" var(--headings-weight);font-style:var(--headings-style);-ms-hyphens:manual;hyphens:manual;letter-spacing:var(--headings-letter-spacing);line-height:var(--headings-line-height);margin-top:calc(var(--baseline) * 6 + 1vw);text-transform:var(--headings-transform)}
.publii-content .h1,.publii-content h1{font-size:clamp(calc(1.5710900065 * var(--publii-fs)), calc(1.5710900065 * var(--publii-fs)) + 1.424540906 * (100vw - calc(20 * var(--publii-fs))) / 70, calc(2.9956309125 * var(--publii-fs)));font-family:var(--heading-font)}
.publii-content .h2,.publii-content h2{font-size:clamp(calc(1.3808408252 * var(--publii-fs)), calc(1.3808408252 * var(--publii-fs)) + .9332127447 * (100vw - calc(20 * var(--publii-fs))) / 70, calc(2.3140535699 * var(--publii-fs)))}
.publii-content .h3,.publii-content h3{font-size:clamp(calc(1.2136296308 * var(--publii-fs)), calc(1.2136296308 * var(--publii-fs)) + .4621997101 * (100vw - calc(20 * var(--publii-fs))) / 70, calc(1.6758293408 * var(--publii-fs)))}
.publii-content .h4,.publii-content h4{font-size:clamp(calc(1.1377777785 * var(--publii-fs)), calc(1.1377777785 * var(--publii-fs)) + .1567604947 * (100vw - calc(20 * var(--publii-fs))) / 70, calc(1.2945382732 * var(--publii-fs)))}
.publii-content .h5,.publii-content h5{font-size:clamp(calc(1.066666667 * var(--publii-fs)), calc(1.066666667 * var(--publii-fs)) + .0711111115 * (100vw - calc(20 * var(--publii-fs))) / 70, calc(1.1377777785 * var(--publii-fs)))}
.publii-content .h6,.publii-content h6{font-size:clamp(calc(1 * var(--publii-fs)), calc(1 * var(--publii-fs)) + 0 * (100vw - calc(20 * var(--publii-fs))) / 70, calc(1 * var(--publii-fs)))}
.publii-content h2+*,.publii-content h3+*,.publii-content h4+*,.publii-content h5+*,.publii-content h6+*{margin-top:calc(var(--baseline) * 2 + .25vw)}
.publii-content b,.publii-content strong{font-variation-settings:"wght" var(--font-weight-bold)}
.publii-content blockquote{border-top:2px solid var(--dark);border-bottom:2px solid var(--dark);color:var(--headings-color);font-family:var(--heading-font);font-style:italic;font-variation-settings:"wght" var(--font-weight-bold);padding:calc(var(--baseline) * 6 + 1vw) calc(2 * var(--publii-fs));font-size:clamp(calc(1.1377777785 * var(--publii-fs)), calc(1.1377777785 * var(--publii-fs)) + .1567604947 * (100vw - calc(20 * var(--publii-fs))) / 70, calc(1.2945382732 * var(--publii-fs)))}
.publii-content blockquote>:first-child{margin-top:0}
.publii-content ol,.publii-content ul{margin-left:3ch}
.publii-content ol>li,.publii-content ul>li{list-style:inherit;padding:0 0 var(--baseline) 1ch}
.publii-content dl dt{font-variation-settings:"wght" var(--font-weight-bold)}
.publii-content pre{background-color:var(--lighter);font-size:calc(.8239746086 * var(--publii-fs));padding:calc(var(--baseline) * 6);white-space:pre-wrap;word-wrap:break-word}
.publii-content pre>code{color:var(--text-color);display:inline-block;font-size:inherit;padding:0}
.publii-content code{background-color:var(--lighter);color:var(--color);font-size:calc(.8239746086 * var(--publii-fs));font-family:Menlo,Monaco,Consolas,Courier New,monospace}
.publii-content table{border:1px solid var(--light);border-collapse:collapse;border-spacing:0;vertical-align:top;text-align:left;width:100%}
@media all and (max-width:37.4375em){
.publii-content table{display:block;overflow-x:auto}
}
.publii-content table th{font-variation-settings:"wght" var(--font-weight-bold);padding:calc(var(--baseline) * 2.5) calc(var(--baseline) * 4)}
.publii-content table td{border-top:1px solid var(--light);padding:calc(var(--baseline) * 2.5) calc(var(--baseline) * 4)}
.publii-content figcaption{clear:both;color:var(--gray);font-style:italic;font-size:calc(.7241964329 * var(--publii-fs));padding:calc(var(--baseline) * 3) 0 0;text-align:center}
.publii-content kbd{background:var(--dark);border-radius:2px;color:var(--white);font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:calc(.8789062495 * var(--publii-fs));padding:calc(var(--baseline) * .5) calc(var(--baseline) * 1.5)}
.publii-content sub,.publii-content sup{font-size:65%}
.publii-content small{font-size:calc(.8789062495 * var(--publii-fs))}
.publii-content .separator,.publii-content hr{background:0 0;border:none;height:auto;line-height:1;max-width:none;text-align:center}
.publii-content .separator::before,.publii-content hr::before{content:"•••";color:var(--dark);font-size:calc(1 * var(--publii-fs));font-variation-settings:"wght" var(--font-weight-bold);letter-spacing:calc(1.1377777785 * var(--publii-fs));padding-left:calc(1.1377777785 * var(--publii-fs))}
.publii-content .separator--dot::before{content:"•";color:var(--dark);font-size:calc(1 * var(--publii-fs));font-variation-settings:"wght" var(--font-weight-bold);letter-spacing:calc(1.1377777785 * var(--publii-fs));padding-left:calc(1.1377777785 * var(--publii-fs))}
.publii-content .separator--long-line{position:relative}
.publii-content .separator--long-line::before{content:"";height:calc(1 * var(--publii-fs))}
.publii-content .separator--long-line::after{border-top:1px solid var(--light);content:"";height:1px;position:absolute;width:100%;top:50%;left:0}
:is(.publii-content > div, [data-article-content].publii-content){margin-top:calc(var(--baseline) * 6 + 1.5vw);overflow-wrap:break-word}
:is(.publii-content > div, [data-article-content].publii-content)>:first-child{margin-top:0}
:is(.publii-content > div, [data-article-content].publii-content) a:not(.btn):not([type=button]):not([type=submit]):not(button):not(.post__toc a):not(.gallery__item a){color:var(--link-color-hover);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.2em;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}
:is(.publii-content > div, [data-article-content].publii-content) a:not(.btn):not([type=button]):not([type=submit]):not(button):not(.post__toc a):not(.gallery__item a):active,:is(.publii-content > div, [data-article-content].publii-content) a:not(.btn):not([type=button]):not([type=submit]):not(button):not(.post__toc a):not(.gallery__item a):focus,:is(.publii-content > div, [data-article-content].publii-content) a:not(.btn):not([type=button]):not([type=submit]):not(button):not(.post__toc a):not(.gallery__item a):hover{color:var(--link-color)}
:is(.publii-content > div, [data-article-content].publii-content)--nospace{margin-top:0}
.publii-content .post__image:not(.post__image--wide):not(.post__image--full):not(.post__image--center){display:inline-block;margin-bottom:calc(var(--baseline) * 2 + .25vw)}
.publii-content .post__image a,.publii-content .post__image img{border-radius:calc(var(--border-radius) * 4);display:inline-block}
.publii-content .post__image>figcaption{background-color:var(--page-bg)}
.publii-content .post__image--left{float:left;margin-right:calc(2 * var(--publii-fs));max-width:50%}
.publii-content .post__image--right{float:right;margin-left:calc(2 * var(--publii-fs));max-width:50%}
.publii-content .post__image--center{display:block;margin-left:auto;margin-right:auto;text-align:center}
.publii-content .post__image--wide{display:block}
@media all and (min-width:56.25em){
.publii-content .post__image--wide{margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);padding:0 var(--page-margin);text-align:center}
.publii-content .post__image--wide a,.publii-content .post__image--wide img{display:block;height:auto;margin:auto;max-width:var(--page-width);width:100%}
}
.publii-content .post__image--full{background-color:var(--lighter);display:block;margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);text-align:center}
.publii-content .post__image--full a,.publii-content .post__image--full img{border-radius:0;display:block;height:auto;width:100%}
.publii-content .post__iframe,.publii-content .post__video{display:block;margin-top:calc(var(--baseline) * 6 + .5vw);margin-bottom:calc(var(--baseline) * 6 + .5vw);overflow:hidden;padding:0;position:relative;width:100%}
.publii-content .post__iframe::before,.publii-content .post__video::before{display:block;content:"";padding-top:var(--embed-aspect-ratio)}
.publii-content .post__iframe iframe[height*="%"][width*="%"],.publii-content .post__iframe iframe[height]:not([height*="%"])[width]:not([width*="%"]),.publii-content .post__iframe video[height*="%"][width*="%"],.publii-content .post__iframe video[height]:not([height*="%"])[width]:not([width*="%"]),.publii-content .post__video iframe[height*="%"][width*="%"],.publii-content .post__video iframe[height]:not([height*="%"])[width]:not([width*="%"]),.publii-content .post__video video[height*="%"][width*="%"],.publii-content .post__video video[height]:not([height*="%"])[width]:not([width*="%"]){border:none;height:100%;left:0;position:absolute;top:0;bottom:0;width:100%}
.publii-content .post__iframe:has(iframe:not([height]))::before,.publii-content .post__iframe:has(iframe:not([width]))::before,.publii-content .post__iframe:has(video:not([height]))::before,.publii-content .post__iframe:has(video:not([width]))::before,.publii-content .post__video:has(iframe:not([height]))::before,.publii-content .post__video:has(iframe:not([width]))::before,.publii-content .post__video:has(video:not([height]))::before,.publii-content .post__video:has(video:not([width]))::before{display:none}
.publii-content .post__toc{margin-top:calc(var(--baseline) * 6 + .5vw)}
.publii-content .post__toc h3{border-bottom:1px solid var(--dark);font-size:calc(1 * var(--publii-fs));margin:0;padding-bottom:calc(var(--baseline) * 2 + .25vw)}
.publii-content .post__toc ul{counter-reset:item;list-style:decimal;margin:calc(var(--baseline) * 3 + .25vw) 0 0 3ch}
.publii-content .post__toc ul li{counter-increment:item;padding:0}
.publii-content .post__toc ul ul{margin-top:0}
.publii-content .post__toc ul ul li{display:block}
.publii-content .post__toc ul ul li:before{content:counters(item, ".") ". ";margin-left:-3ch}
.publii-content .align-left{text-align:left}
.publii-content .align-right{text-align:right}
.publii-content .align-center{text-align:center}
.publii-content .align-justify{text-align:justify}
.publii-content .msg{background-color:var(--lighter);border-left:3px solid var(--light);font-size:calc(.9374999997 * var(--publii-fs));padding:calc(var(--baseline) * 4) calc(var(--baseline) * 6);position:relative}
.publii-content .msg--highlight{border-left-color:var(--highlight-color)}
.publii-content .msg--info{border-left-color:var(--info-color)}
.publii-content .msg--success{border-left-color:var(--success-color)}
.publii-content .msg--warning{border-left-color:var(--warning-color)}
.publii-content .dropcap:first-letter{color:var(--headings-color);float:left;font-size:calc(3.6355864383 * var(--publii-fs));line-height:.7;margin-right:calc(.6 * var(--publii-fs));padding:calc(var(--baseline) * 2) calc(var(--baseline) * 2) calc(var(--baseline) * 2) 0}
.publii-content .gallery{margin:calc(var(--baseline) * 6 + 1vw) calc(var(--gallery-gap) * -1)}
@media all and (min-width:20em){
.publii-content .gallery{display:flex;flex-wrap:wrap}
}
@media all and (min-width:56.25em){
.publii-content .gallery-wrapper--wide{display:flex;justify-content:center;margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);padding:0 var(--page-margin)}
.publii-content .gallery-wrapper--wide .gallery{max-width:var(--page-width)}
}
@media all and (min-width:56.25em){
.publii-content .gallery-wrapper--full{margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);padding:0 var(--page-margin)}
}
@media all and (min-width:20em){
.publii-content .gallery[data-columns="1"] .gallery__item{flex:1 0 100%}
}
@media all and (min-width:30em){
.publii-content .gallery[data-columns="2"] .gallery__item{flex:1 0 50%}
}
@media all and (min-width:37.5em){
.publii-content .gallery[data-columns="3"] .gallery__item{flex:1 0 33.333%}
}
@media all and (min-width:56.25em){
.publii-content .gallery[data-columns="4"] .gallery__item{flex:0 1 25%}
}
@media all and (min-width:56.25em){
.publii-content .gallery[data-columns="5"] .gallery__item{flex:0 1 20%}
}
@media all and (min-width:56.25em){
.publii-content .gallery[data-columns="6"] .gallery__item{flex:0 1 16.666%}
}
@media all and (min-width:56.25em){
.publii-content .gallery[data-columns="7"] .gallery__item{flex:1 0 14.285%}
}
@media all and (min-width:56.25em){
.publii-content .gallery[data-columns="8"] .gallery__item{flex:1 0 12.5%}
}
.publii-content .gallery__item{margin:0;padding:var(--gallery-gap);position:relative}
@media all and (min-width:20em){
.publii-content .gallery__item{flex:1 0 50%}
}
@media all and (min-width:30em){
.publii-content .gallery__item{flex:1 0 33.333%}
}
@media all and (min-width:37.5em){
.publii-content .gallery__item{flex:1 0 25%}
}
.publii-content .gallery__item a{border-radius:calc(var(--border-radius) * 4);display:block;height:100%;width:100%}
.publii-content .gallery__item a::after{background:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.4)),to(rgba(0,0,0,0)));background:linear-gradient(to top,rgba(0,0,0,.4) 0,rgba(0,0,0,0) 100%);border-radius:inherit;bottom:var(--gallery-gap);content:"";display:block;opacity:0;left:var(--gallery-gap);height:calc(100% - var(--gallery-gap) * 2);position:absolute;right:var(--gallery-gap);top:var(--gallery-gap);-webkit-transition:all .24s ease-out;transition:all .24s ease-out;width:calc(100% - var(--gallery-gap) * 2)}
.publii-content .gallery__item a:hover::after{opacity:1}
.publii-content .gallery__item img{border-radius:inherit;display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}
.publii-content .gallery__item figcaption{bottom:calc(1.2 * var(--publii-fs));color:var(--white);left:50%;opacity:0;position:absolute;text-align:center;-webkit-transform:translate(-50%,calc(1.2 * var(--publii-fs)));transform:translate(-50%,calc(1.2 * var(--publii-fs)));-webkit-transition:all .24s ease-out;transition:all .24s ease-out}
.publii-content .gallery__item:hover figcaption{opacity:1;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}

/* === PUBLII-END === */

/* === FOND DE PAGE (dégradés doux sur grain papier) === */
/* === FOND-START === */
body {
  background-color: #FFFFFF;
  background-image: none;
}
/* === FOND-END === */

/* === DÉCOR (Calques pour l'éditeur de thèmes) === */

/* Ajustements du décor en mode sombre (après le bloc DECOR) */


/* === RESPONSIVE === */
@media (max-width: 768px) {
    h1 { font-size: calc(2.6rem * var(--font-scale-h1)); }
    h2 { font-size: calc(2.2rem * var(--font-scale-h2)); }
    h3 { font-size: calc(1.2rem * var(--font-scale-h3)); }

    .card, .price-card, .ferme-card {
        padding: var(--spacing-sm);
    }

    .nav-horizontal {
        padding: 0.5rem var(--spacing-sm);
    }

    .nav-horizontal ul {
        gap: 0.2rem;
    }

    .nav-horizontal a {
        font-size: 1rem;
        padding: 0.3rem 0.8rem;
    }

    /* Sous-menus : dépliés en flux sur mobile (pas de survol tactile) */
    .nav-horizontal ul ul.navbar__submenu {
        position: static;
        transform: none;
        display: block;
        box-shadow: none;
        border: none;
        border-left: 2px solid var(--couleur-accent);
        border-radius: 0;
        padding: 0 0 0 0.6rem;
        margin: 0.2rem 0 0.2rem 0.6rem;
        min-width: 0;
    }

    .hero {
        padding: var(--spacing-lg) var(--spacing-sm);
        min-height: 300px;
        border-radius: var(--border-radius);
        margin: var(--spacing-sm) auto;
    }

    .hero h1 { font-size: calc(2.8rem * var(--font-scale-h1)); }
    .hero p { font-size: calc(1.1rem * var(--font-scale-p)); }

    .multi-col, .two-col {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .contact-block {
        padding: var(--spacing-md);
    }

    /* Décor allégé sur mobile */
    
}

@media (max-width: 600px) {
    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

@media (max-width: 480px) {
    section {
        padding: 1.2rem var(--spacing-sm);
    }

    .hero h1 {
        font-size: calc(2.2rem * var(--font-scale-h1));
    }

    .hero p {
        font-size: calc(1rem * var(--font-scale-p));
    }

    .btn {
        padding: 0.6rem 1.4rem;
font-size: 1.4rem;
    }

    .img-link img,
    .img-link .overlay {
        width: 200px;
        height: 200px;
    }

    .rainette-bar { font-size: 0.9rem; padding: 0.6rem 0.7rem; gap: 0.4rem; }
    .rainette-bar button { width: 64px; height: 64px; font-size: 1.5rem; }
    .rainette-bar-left { gap: 0.3rem; }
    .rainette-idx { min-width: 48px; font-size: 0.9rem; }
    .rainette-score { font-size: 0.85rem; }
    .rainette-restart-group { gap: 0.3rem; }
    .rainette-restart-label { font-size: 0.8rem; }
    .rainette-restart { width: 64px; height: 64px; font-size: 1.5rem; }
}

@media (max-width: 400px) {
    .rainette-bar { padding: 0.5rem; gap: 0.3rem; }
    .rainette-bar button { width: 56px; height: 56px; font-size: 1.3rem; }
    .rainette-bar-left { gap: 0.2rem; }
    .rainette-idx { min-width: 36px; font-size: 0.8rem; }
    .rainette-score { font-size: 0.75rem; }
    .rainette-restart-label { font-size: 0.7rem; }
    .rainette-restart { width: 56px; height: 56px; font-size: 1.3rem; }
    .rainette-restart-group { gap: 0.15rem; }
    .rainette-bravo { font-size: 2rem; }
}

/* Réactif du décor : la chouette disparaît sur smartphone (≤ 480px) via le
   flag hideMobile du calque — la variante @media est générée dans le bloc
   DÉCOR et survit aux enregistrements de l'éditeur. */

/* Burger mobile (10/10/2026 : menu replié + bouton hamburger sous 900px.
   Sans JS le menu reste déplié grâce au garde html.js posé par js/main.js) */
@media (max-width: 900px) {
  .nav-horizontal ul {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    text-align: center;
  }
  .nav-burger { display: block; margin-left: auto; }
  .nav-horizontal ul li { width: 100%; }
  html.js .nav-horizontal > ul { display: none; }
  html.js .nav-horizontal.nav-open > ul { display: flex; }
  .nav-horizontal ul li a { white-space: normal; }
  .nav-horizontal ul ul.navbar__submenu {
    position: static;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--couleur-accent);
    border-radius: 0;
    padding-left: 0.6rem;
    margin: 0.2rem 0 0.2rem 0.6rem;
    transform: none;
    min-width: 0;
  }
  /* FR/EN posé à gauche du burger, sur la même ligne : plus de bande vide
     (19/10/2026). Sous html.js seulement : sans JS le menu déplié occupe
     la ligne et le sélecteur reste en bandeau. */
  html.js .lang-switcher {
    position: absolute;
    top: 0.7rem;
    left: var(--spacing-md);
    z-index: 1001;
    height: 2.4rem;
    padding: 0 0.5rem;
    gap: 0.3rem;
    border: 0;
    border-radius: 999px;
  }
}
@media (max-width: 768px) {
  html.js .lang-switcher { top: 0.5rem; left: var(--spacing-sm); }
}
/* === DECOR-START === */
/* === DECOR-END === */

/* Justifié illisible sur téléphone (trous entre les mots) : gauche + césure douce. */
@media (max-width: 600px) {
    [style*="text-align: justify"], [style*="text-align:justify"], .align-justify {
        text-align: left !important;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}