/* p0oxd */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;src:url(/i/0iuou8v.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:700;font-display:swap;src:url(/i/1hz6cei.woff2) format("woff2")}

*,*::before,*::after{box-sizing:border-box}
html{font-size:18px;-webkit-text-size-adjust:100%}
body{margin:0;background:#fafafa;color:#241e23;font-family:"Source Serif 4", "Book Antiqua", "Palatino Linotype", Palatino, Georgia, serif;line-height:1.55}
h1,h2,h3,h4{font-family:"Source Serif 4", Georgia, "Times New Roman", Times, serif;line-height:1.25;text-transform:uppercase;letter-spacing:.04em;margin:3.10rem 0 1.55rem}
h1{font-size:1.728rem;margin-top:0}
h2{font-size:1.440rem}
h3{font-size:1.200rem}
h4{font-size:1rem}
p,ul,ol{margin:0 0 1.55rem}
a{color:#721d67;text-decoration:underline}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.p0oxd-visuel{width:100%;height:auto;border-radius:6px;margin:3.10rem 0;display:block}
.p0oxd-page{max-width:89rem;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. */
.p0oxd-entete{position:sticky;top:0;z-index:10;background:#fafafa;padding:1.71rem 0}
.p0oxd-entete .p0oxd-page{display:flex;flex-wrap:wrap;align-items:center;column-gap:1.5rem;row-gap:.75rem}
.p0oxd-marque{display:flex;flex-direction:row;align-items:center;gap:0.7rem;color:#241e23;text-decoration:none;margin-right:auto}
.p0oxd-nom{font-family:"Source Serif 4", Georgia, "Times New Roman", Times, serif;font-size:1.15rem;font-weight:700;letter-spacing:-0.015em;margin-right:0.015em;line-height:1.1}
.p0oxd-marque svg{flex:none;display:block;width:1.9rem;height:1.9rem}
.p0oxd-signe{flex:none;display:block;width:2.85rem;height:1.9rem;object-fit:contain;object-position:center;border-radius:6px}
.p0oxd-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:1.8rem;margin:0;padding:0}
.p0oxd-nav a{color:#241e23;text-decoration:underline}
.p0oxd-nav a[aria-current]{color:#721d67;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. */
.p0oxd-entete-cta{margin-left:1.86rem;padding:.6rem 1.15rem;border-radius:999px;background:#721d67;color:#ffffff;text-decoration:none;font-size:.92rem;font-weight:600;line-height:1;white-space:nowrap}
.p0oxd-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. */
.p0oxd-nom-accent{color:#721d67}
.p0oxd-banniere{background:#721d67;color:#ffffff;padding:3.10rem 0;border-radius:6px}
.p0oxd-banniere a{color:#ffffff}
.p0oxd-banniere-visuel{position:relative;overflow:hidden;padding:0;height:12rem;display:flex;align-items:flex-end}
.p0oxd-banniere-fond{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 65%}
.p0oxd-banniere-voile{position:absolute;inset:0;background:linear-gradient(to bottom,#721d6700 0%,#721d67 55%)}
.p0oxd-banniere-visuel .p0oxd-page{position:relative;width:100%;padding-top:1.55rem;padding-bottom:1.55rem}
.p0oxd-corps{padding:3.10rem 1.25rem}
.p0oxd-carte{background:#fafafa;border:1px solid #e5e1e5;border-radius:6px;padding:1.16rem 1.16rem;margin-top:1.55rem;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.p0oxd-carte:first-child{margin-top:0}
.p0oxd-carte a{text-decoration:underline;font-weight:600}
.p0oxd-alterne{background:#f5f4f5}
.p0oxd-alterne.p0oxd-aside{padding:2.33rem}
.p0oxd-pied-mot{max-width:26rem;margin:0 0 1.55rem}
.p0oxd-chapo{font-size:1.1rem;font-weight:500}
.p0oxd-suite{margin:3.10rem 0 0;padding:1.55rem 1.25rem;border:1px solid #e5e1e5;border-radius:6px}
.p0oxd-suite p{margin:0}
.p0oxd-plan{list-style:none;margin:1.55rem 0 0;padding:0}
.p0oxd-plan>li{break-inside:avoid;margin:0 0 1.55rem;font-weight:600}
.p0oxd-plan ul{list-style:none;margin:0;padding:0 0 0 1rem;font-weight:400}
.p0oxd-plan li{margin:0}
@media(min-width:846px){.p0oxd-plan{columns:2;column-gap:2.5rem}}
.p0oxd-pied{box-shadow:0 1px 3px rgba(0,0,0,.08);padding:3.10rem 0;font-size:.92rem}
.p0oxd-pied a{text-decoration:underline}
.p0oxd-pied-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.8rem}
.p0oxd-banniere-duo{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.p0oxd-entete-centre{text-align:center}
.p0oxd-entete-centre .p0oxd-page{justify-content:center}
.p0oxd-entete-centre .p0oxd-nav{margin-left:0}

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

.p0oxd-article{display:flex;gap:2.5rem;align-items:flex-start;flex-direction:row}
.p0oxd-texte{flex:1;min-width:0;max-width:42rem}
.p0oxd-aside{flex:0 0 16rem}
@media(max-width:1179px){.p0oxd-article{display:block}.p0oxd-texte{max-width:42rem}.p0oxd-aside{margin-top:3.10rem}}
.p0oxd-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:1.55rem;margin:3.10rem 0 0;padding:0;list-style:none}
.p0oxd-tuile{min-width:0;background:#f5f4f5;border:1px solid #e5e1e5;border-radius:12px;padding:2.33rem}
.p0oxd-tuile-lien{display:flex;flex-direction:row;gap:1rem;align-items:flex-start;text-decoration:none;color:inherit}
.p0oxd-vignette{flex:0 0 40%;max-width:40%;min-width:0;aspect-ratio:3/2;object-fit:cover;border-radius:6px;display:block;background:#f5f4f5}
.p0oxd-tuile-titre{font-family:"Source Serif 4", Georgia, "Times New Roman", Times, serif;font-size:1.200rem;line-height:1.3;min-width:0;overflow-wrap:break-word;margin:1.55rem 0 0}
.p0oxd-tuile-lien:hover .p0oxd-tuile-titre{color:#721d67}
.p0oxd-tuile-accroche{margin:1.55rem 0 0;font-size:.94rem}
.p0oxd-sommaire{margin:6.20rem 0 0}
.p0oxd-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. */
.p0oxd-hero{padding:6.20rem 0 4.65rem}
.p0oxd-hero-grille{display:grid;grid-template-columns:1.05fr 1fr;gap:4.65rem;align-items:center}
.p0oxd-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. */
.p0oxd-hero-titre{font-family:"Source Serif 4", Georgia, "Times New Roman", Times, serif;font-size:clamp(2.6rem,5.2vw,4.4rem);line-height:1.04;letter-spacing:-0.02em;margin:0;text-wrap:balance}
.p0oxd-accentue{font-style:normal;color:#721d67}
.p0oxd-hero-accroche{font-size:1.12rem;line-height:1.6;max-width:34rem;margin:1.55rem 0 0;color:#241e23;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. */
.p0oxd-bouton{display:inline-flex;align-items:center;gap:.55rem;margin-top:3.10rem;padding:.85rem 1.6rem;border-radius:999px;background:#721d67;color:#ffffff;text-decoration:none;font-weight:600;line-height:1}
.p0oxd-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. */
.p0oxd-hero-vues{position:relative;min-width:0}
.p0oxd-hero-vue{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.p0oxd-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 #fafafa;box-shadow:0 10px 30px rgba(0,0,0,.13)}
.p0oxd-hero-pastille{position:absolute;right:-0.78rem;top:2.33rem;margin:0;padding:.5rem 1rem;border-radius:999px;background:#fafafa;color:#241e23;font-size:.86rem;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.14)}

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