/* rwq9w */
@font-face{font-family:"Lora";font-style:normal;font-weight:400;font-display:swap;src:url(/visuels/11qqdim.woff2) format("woff2")}
@font-face{font-family:"Lora";font-style:normal;font-weight:700;font-display:swap;src:url(/visuels/02m8vcz.woff2) format("woff2")}

*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;background:#f6f8f8;color:#1d2f29;font-family:"Lora", Georgia, "Times New Roman", Times, serif;line-height:1.55}
h1,h2,h3,h4{font-family:"Lora", "Book Antiqua", "Palatino Linotype", Palatino, Georgia, serif;line-height:1.25;margin:3.10rem 0 1.55rem}
h1{font-size:1.953rem;margin-top:0}
h2{font-size:1.563rem}
h3{font-size:1.250rem}
h4{font-size:1rem}
p,ul,ol{margin:0 0 1.55rem}
a{color:#702350;text-decoration:underline}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.rwq9w-visuel{width:100%;height:auto;border-radius:2px;margin:3.10rem 0;display:block}
.rwq9w-page{max-width:87rem;margin:0 auto;padding:0 1.25rem}
/* ── LA BARRE D'EN-TETE ─────────────────────────────────────────────────
   Constat du proprietaire (2026-08-22) : « il faut un beau header car le
   menu a gauche ne ressemble a rien et il n'y a pas de logo ». Les six
   references montrees portent TOUTES la meme barre : logo a gauche, menu au
   centre, bouton a droite.

   La barre COLLE EN HAUT (position:sticky) comme celles d'E-Care et de
   Club Omnisports : sur un article long, le menu reste atteignable sans
   remonter. Le fond est opaque, sinon le texte defilant passerait dessous.

   Plus de trait de separation : c'est l'AIR sous la barre qui la detache,
   pas un filet. Les references n'en portent aucune. */
.rwq9w-entete{position:sticky;top:0;z-index:10;background:#f6f8f8;padding:1.71rem 0}
.rwq9w-entete .rwq9w-page{display:flex;flex-wrap:wrap;align-items:center;column-gap:1.5rem;row-gap:.75rem}
.rwq9w-marque{display:flex;flex-direction:row;align-items:center;gap:0.7rem;color:#1d2f29;text-decoration:none;margin-right:auto}
.rwq9w-nom{font-family:"Lora", "Book Antiqua", "Palatino Linotype", Palatino, Georgia, serif;font-size:1.4rem;font-weight:400;letter-spacing:-0.015em;margin-right:0.015em;line-height:1.1}
.rwq9w-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:1.1rem;margin:0;padding:0}
.rwq9w-nav a{color:#1d2f29;text-decoration:underline}
.rwq9w-nav a[aria-current]{color:#702350;font-weight:700}

/* LE BOUTON DE LA BARRE : plein, arrondi, cale a droite. Present dans cinq
   des six references, absent de toutes les pages de ce generateur. */
.rwq9w-entete-cta{margin-left:1.86rem;padding:.6rem 1.15rem;border-radius:999px;background:#702350;color:#ffffff;text-decoration:none;font-size:.92rem;font-weight:600;line-height:1;white-space:nowrap}
.rwq9w-entete-cta:hover{opacity:.9}

/* LE SECOND TON DU LOGOTYPE -- l'accent sur le dernier mot, comme CRUST et
   JURIS. Le reste de la marque (corps, interlettrage, casse) est tire par la
   graine et pose par marqueCss plus haut : margin-right:auto y a ete
   AJOUTE plutot que redeclare ici, une seconde regle sur le meme selecteur
   etant la garantie qu'elles divergeront un jour. */
.rwq9w-nom-accent{color:#702350}
.rwq9w-banniere{background:#702350;color:#ffffff;padding:3.10rem 0;border-radius:2px}
.rwq9w-banniere a{color:#ffffff}
.rwq9w-banniere-visuel{position:relative;overflow:hidden;padding:0;height:24rem;display:flex;align-items:flex-end}
.rwq9w-banniere-fond{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 50%}
.rwq9w-banniere-voile{position:absolute;inset:0;background:linear-gradient(to bottom,#70235000 0%,#702350 55%)}
.rwq9w-banniere-visuel .rwq9w-page{position:relative;width:100%;padding-top:1.55rem;padding-bottom:1.55rem}
.rwq9w-corps{padding:3.10rem 1.25rem}
.rwq9w-carte{background:#f6f8f8;border:1px solid #dce5e2;border-radius:2px;padding:1.16rem 1.16rem;margin-top:1.55rem;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.rwq9w-carte:first-child{margin-top:0}
.rwq9w-carte a{text-decoration:underline;font-weight:600}
.rwq9w-alterne{background:#f0f4f3}
.rwq9w-alterne.rwq9w-aside{padding:2.33rem}
.rwq9w-pied-mot{max-width:26rem;margin:0 0 1.55rem}
.rwq9w-chapo{font-size:1.1rem;font-weight:500}
.rwq9w-suite{margin:3.10rem 0 0;padding:1.55rem 1.25rem;border:1px solid #dce5e2;border-radius:2px}
.rwq9w-suite p{margin:0}
.rwq9w-plan{list-style:none;margin:1.55rem 0 0;padding:0}
.rwq9w-plan>li{break-inside:avoid;margin:0 0 1.55rem;font-weight:600}
.rwq9w-plan ul{list-style:none;margin:0;padding:0 0 0 1rem;font-weight:400}
.rwq9w-plan li{margin:0}
@media(min-width:720px){.rwq9w-plan{columns:2;column-gap:2.5rem}}
.rwq9w-pied{border-top:1px solid #dce5e2;padding:3.10rem 0;font-size:.92rem}
.rwq9w-pied a{text-decoration:underline}
.rwq9w-pied-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.8rem}
.rwq9w-banniere-duo{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.rwq9w-entete-centre{text-align:center}
.rwq9w-entete-centre .rwq9w-page{justify-content:center}
.rwq9w-entete-centre .rwq9w-nav{margin-left:0}

.rwq9w-nav>ul>li>a{font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.rwq9w-nav>ul>li+li::before{content:"\00B7";color:#dce5e2;margin-right:1.1rem}
.rwq9w-bascule,.rwq9w-declencheur{display:none}
@media(max-width:1034px),(hover:none){.rwq9w-bascule{display:block;position:absolute;opacity:0;pointer-events:none}.rwq9w-declencheur{display:inline-block;cursor:pointer;margin-left:auto;padding:.5rem .9rem;border:1px solid #dce5e2;border-radius:2px}.rwq9w-bascule:focus-visible~.rwq9w-declencheur{outline:2px solid #702350;outline-offset:2px}.rwq9w-panneau{max-height:0;overflow:hidden;transition:max-height .25s ease}.rwq9w-bascule:checked~.rwq9w-panneau{max-height:60rem}.rwq9w-entete .rwq9w-panneau{flex:0 0 100%;margin-left:0}.rwq9w-nav ul{flex-direction:column}.rwq9w-nav>ul>li+li::before{content:none}}
.rwq9w-nav li{position:relative}
.rwq9w-nav li ul{display:none;position:absolute;left:0;top:100%;background:#f6f8f8;border:1px solid #dce5e2;min-width:12rem;padding:.4rem 0;z-index:5}
.rwq9w-nav li ul li{padding:.15rem .8rem}
.rwq9w-nav li ul a{white-space:nowrap}
.rwq9w-nav li ul ul{display:block;position:static;border:0;padding:.1rem 0 .3rem .8rem;min-width:0}
.rwq9w-nav li:hover>ul,.rwq9w-nav li:focus-within>ul{display:block}
@media(max-width:1034px),(hover:none){.rwq9w-nav li ul{display:block;position:static;border:0;padding:0 0 0 1rem}.rwq9w-nav li ul li{padding:0}.rwq9w-nav li ul a{white-space:normal}}

.rwq9w-article{display:flex;gap:2.5rem;align-items:flex-start;flex-direction:row}
.rwq9w-texte{flex:1;min-width:0;max-width:40rem}
.rwq9w-aside{flex:0 0 16rem}
@media(max-width:1016px){.rwq9w-article{display:block}.rwq9w-texte{max-width:40rem}.rwq9w-aside{margin-top:3.10rem}}
.rwq9w-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:1.55rem;margin:3.10rem 0 0;padding:0;list-style:none}
.rwq9w-tuile{min-width:0;background:#f0f4f3;border:1px solid #dce5e2;border-radius:4px;padding:2.33rem}
.rwq9w-tuile-lien{display:flex;flex-direction:row;gap:1rem;align-items:flex-start;text-decoration:none;color:inherit}
.rwq9w-vignette{flex:0 0 35%;max-width:35%;min-width:0;aspect-ratio:16/9;object-fit:cover;border-radius:2px;display:block;background:#f0f4f3}
.rwq9w-tuile-titre{font-family:"Lora", "Book Antiqua", "Palatino Linotype", Palatino, Georgia, serif;font-size:1.250rem;line-height:1.3;min-width:0;overflow-wrap:break-word;margin:1.55rem 0 0}
.rwq9w-tuile-lien:hover .rwq9w-tuile-titre{color:#702350}
.rwq9w-tuile-accroche{margin:1.55rem 0 0;font-size:.94rem}
.rwq9w-sommaire{margin:6.20rem 0 0}
.rwq9w-intro{max-width:45rem;margin-top:4.65rem}

/* ── LE HERO ────────────────────────────────────────────────────────────
   Construction reprise des deux references retenues par le proprietaire le
   2026-08-22 (CRUST, JURIS) : texte a gauche, images composees a droite,
   titre immense en deux tons, pastille flottante.

   align-items:center plutot qu'un alignement haut : c'est ce qui fait que
   le bloc de texte et la pile d'images se repondent au lieu de partir du
   meme bord. Sur ecran etroit, la grille passe a UNE colonne et le texte
   passe DEVANT les images -- l'ordre du HTML, donc celui d'un lecteur
   d'ecran, est deja celui-la. */
.rwq9w-hero{padding:6.20rem 0 4.65rem}
.rwq9w-hero-grille{display:grid;grid-template-columns:1.05fr 1fr;gap:4.65rem;align-items:center}
.rwq9w-hero-mots{min-width:0}

/* LE TITRE PORTE TOUT LE POIDS. clamp fait varier le corps avec la
   largeur : 2.6rem sur telephone, jusqu'a 4.4rem sur grand ecran -- sans
   media query, et sans jamais deborder. text-wrap:balance repartit les
   lignes au lieu de laisser un mot seul en derniere ligne, ce qui se voit
   enormement a cette taille. */
.rwq9w-hero-titre{font-family:"Lora", "Book Antiqua", "Palatino Linotype", Palatino, Georgia, serif;font-size:clamp(2.6rem,5.2vw,4.4rem);line-height:1.04;letter-spacing:-0.02em;margin:0;text-wrap:balance}
.rwq9w-accentue{font-style:normal;color:#702350}
.rwq9w-hero-accroche{font-size:1.12rem;line-height:1.6;max-width:34rem;margin:1.55rem 0 0;color:#1d2f29;opacity:.82}

/* LE BOUTON : plein, arrondi, avec sa fleche. C'est l'element que AUCUNE
   des six references ne omet, et qu'aucune page de ce generateur n'avait. */
.rwq9w-bouton{display:inline-flex;align-items:center;gap:.55rem;margin-top:3.10rem;padding:.85rem 1.6rem;border-radius:999px;background:#702350;color:#ffffff;text-decoration:none;font-weight:600;line-height:1}
.rwq9w-bouton:hover{opacity:.9}

/* LES IMAGES SE SUPERPOSENT. La petite chevauche la grande par le bas et la
   gauche : c'est ce decalage, et lui seul, qui distingue une composition
   d'une image posee dans une case. position:relative sur le conteneur
   ancre les deux elements flottants. */
.rwq9w-hero-vues{position:relative;min-width:0}
.rwq9w-hero-vue{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.rwq9w-hero-vue-petite{position:absolute;left:-1.55rem;bottom:-2.33rem;width:38%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:12px;border:6px solid #f6f8f8;box-shadow:0 10px 30px rgba(0,0,0,.13)}
.rwq9w-hero-pastille{position:absolute;right:-0.78rem;top:2.33rem;margin:0;padding:.5rem 1rem;border-radius:999px;background:#f6f8f8;color:#1d2f29;font-size:.86rem;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.14)}

@media(max-width:960px){
.rwq9w-hero-grille{grid-template-columns:1fr;gap:3.88rem}
.rwq9w-hero-vue-petite{width:32%;left:0}
.rwq9w-hero-pastille{right:0}
}
@media(max-width:960px){.rwq9w-grille{grid-template-columns:repeat(2,1fr)}}
@media(max-width:960px){.rwq9w-grille{grid-template-columns:1fr}}