/* gumf1 */


*,*::before,*::after{box-sizing:border-box}
html{font-size:17px;-webkit-text-size-adjust:100%}
body{margin:0;background:#f7f6f0;color:#142019;font-family:"Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;line-height:1.65}
h1,h2,h3,h4{font-family:"Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;line-height:1.25;margin:3.30rem 0 1.65rem}
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.65rem}
a{color:#073d27;text-decoration:underline}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.gumf1-visuel{width:100%;height:auto;border-radius:12px;margin:3.30rem 0;display:block}
.gumf1-page{max-width:64.5rem;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. */
.gumf1-entete{position:sticky;top:0;z-index:10;background:#f7f6f0;padding:1.82rem 0}
.gumf1-entete .gumf1-page{display:flex;flex-wrap:wrap;align-items:center;column-gap:1.5rem;row-gap:.75rem}
.gumf1-marque{display:flex;flex-direction:column;align-items:center;gap:0.7rem;color:#142019;text-decoration:none;margin-right:auto}
.gumf1-nom{font-family:"Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;font-size:1.6rem;font-weight:400;letter-spacing:0em;margin-right:0em;line-height:1.1}
.gumf1-signe{flex:none;display:block;width:auto;max-width:13.99rem;height:4rem;object-fit:contain;object-position:left center}
.gumf1-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:1.8rem;margin:0;padding:0}
.gumf1-nav a{color:#142019;text-decoration:none}
.gumf1-nav a[aria-current]{color:#073d27;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. */
.gumf1-entete-cta{margin-left:1.98rem;padding:.6rem 1.15rem;border-radius:999px;background:#073d27;color:#ffffff;text-decoration:none;font-size:.92rem;font-weight:600;line-height:1;white-space:nowrap}
.gumf1-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. */
.gumf1-nom-accent{color:#073d27}
.gumf1-banniere{background:#073d27;color:#ffffff;padding:4.95rem 0;border-radius:12px}
.gumf1-banniere a{color:#ffffff}
.gumf1-banniere-visuel{position:relative;overflow:hidden;padding:0;height:20rem;display:flex;align-items:flex-end}
.gumf1-banniere-fond{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 50%}
.gumf1-banniere-voile{position:absolute;inset:0;background:linear-gradient(to bottom,#073d2700 0%,#073d27 55%)}
.gumf1-banniere-visuel .gumf1-page{position:relative;width:100%;padding-top:1.65rem;padding-bottom:1.65rem}
.gumf1-corps{padding:3.30rem 1.25rem}
.gumf1-carte{background:#f7f6f0;border:1px solid #dde5d6;border-radius:12px;padding:1.24rem 1.24rem;margin-top:1.65rem;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.gumf1-carte:first-child{margin-top:0}
.gumf1-carte a{text-decoration:none;font-weight:600}
.gumf1-alterne{background:#eaf5e3}
.gumf1-alterne.gumf1-aside{padding:2.47rem}
.gumf1-pied-mot{max-width:26rem;margin:0 0 1.65rem}
.gumf1-chapo{font-size:1.1rem;font-weight:500}
.gumf1-suite{margin:3.30rem 0 0;padding:1.65rem 1.25rem;border:1px solid #dde5d6;border-radius:12px}
.gumf1-suite p{margin:0}
.gumf1-plan{list-style:none;margin:1.65rem 0 0;padding:0}
.gumf1-plan>li{break-inside:avoid;margin:0 0 1.65rem;font-weight:600}
.gumf1-plan ul{list-style:none;margin:0;padding:0 0 0 1rem;font-weight:400}
.gumf1-plan li{margin:0}
@media(min-width:697px){.gumf1-plan{columns:2;column-gap:2.5rem}}
.gumf1-pied{box-shadow:0 1px 3px rgba(0,0,0,.08);padding:3.30rem 0;font-size:.92rem}
.gumf1-pied a{text-decoration:none}
.gumf1-pied-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.8rem}
.gumf1-banniere-duo{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.gumf1-entete-centre{text-align:center}
.gumf1-entete-centre .gumf1-page{justify-content:center}
.gumf1-entete-centre .gumf1-nav{margin-left:0}

.gumf1-nav>ul>li>a{font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.gumf1-nav>ul>li+li{border-left:1px solid #dde5d6;padding-left:1.8rem}
.gumf1-bascule,.gumf1-declencheur{display:none}
@media(max-width:1241px),(hover:none){.gumf1-bascule{display:block;position:absolute;opacity:0;pointer-events:none}.gumf1-declencheur{display:inline-block;cursor:pointer;margin-left:auto;padding:.5rem .9rem;border:1px solid #dde5d6;border-radius:12px}.gumf1-bascule:focus-visible~.gumf1-declencheur{outline:2px solid #073d27;outline-offset:2px}.gumf1-panneau{max-height:0;overflow:hidden;transition:max-height .25s ease}.gumf1-bascule:checked~.gumf1-panneau{max-height:60rem}.gumf1-entete .gumf1-panneau{flex:0 0 100%;margin-left:0}.gumf1-nav ul{flex-direction:column}.gumf1-nav>ul>li+li{border-left:0;padding-left:0}}
.gumf1-nav li{position:relative}
.gumf1-nav li ul{display:none;position:absolute;left:0;top:100%;background:#f7f6f0;border:1px solid #dde5d6;min-width:12rem;max-width:24rem;padding:.4rem 0;z-index:5}
.gumf1-nav li ul li{padding:.15rem .8rem}
.gumf1-nav li ul a{white-space:normal}
.gumf1-nav>ul>li.gumf1-sous-gauche>ul{left:auto;right:0;width:20rem}
.gumf1-nav li ul ul{display:block;position:static;border:0;padding:.1rem 0 .3rem .8rem;min-width:0}
.gumf1-nav li:hover>ul,.gumf1-nav li:focus-within>ul{display:block}
.gumf1-nav{position:relative}
.gumf1-nav>ul>li.gumf1-mega{position:static}
.gumf1-nav li ul.gumf1-mega-liste{left:0;right:0;width:auto;min-width:0;max-width:none;column-gap:2rem;padding:.9rem 1.1rem}
.gumf1-nav li ul.gumf1-mega-liste li{break-inside:avoid;padding:.2rem .6rem}
.gumf1-nav li ul.gumf1-mega-liste a{white-space:normal}
.gumf1-nav li ul.gumf1-mega-2{columns:2}
.gumf1-nav li ul.gumf1-mega-3{columns:3}
@media(max-width:1241px),(hover:none){.gumf1-nav li ul{display:block;position:static;border:0;padding:0 0 0 1rem}.gumf1-nav li ul li{padding:0}.gumf1-nav li ul a{white-space:normal}.gumf1-nav li ul.gumf1-mega-liste{columns:1;padding:0 0 0 1rem}}
.gumf1-texte{max-width:36rem;margin:0 auto}
.gumf1-aside{margin-top:3.30rem}
.gumf1-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:1.65rem;margin:3.30rem 0 0;padding:0;list-style:none}
.gumf1-tuile{min-width:0}
.gumf1-tuile-lien{display:block;text-decoration:none;color:inherit}
.gumf1-vignette{width:100%;max-width:100%;min-width:0;aspect-ratio:16/9;object-fit:cover;border-radius:12px;display:block;background:#eaf5e3}
.gumf1-tuile-titre{font-family:"Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;font-size:1.250rem;line-height:1.3;min-width:0;overflow-wrap:break-word;margin:1.65rem 0 0}
.gumf1-tuile-lien:hover .gumf1-tuile-titre{color:#073d27}
.gumf1-tuile-accroche{margin:1.65rem 0 0;font-size:.94rem}
.gumf1-sommaire{margin:6.60rem 0 0}

/* ── LA BANDE DES RUBRIQUES ─────────────────────────────────────────────
   Le premier bloc apres le hero sur la page d'accueil (2026-08-23 : « elle
   ne fait pas homepage mais page au design d'un article de blog »). Une page
   d'accueil ORIENTE avant de raconter.

   FOND ALTERNE SUR TOUTE LA LARGEUR : c'est la bande de couleur qui separe
   deux blocs d'une page d'accueil, la ou un article n'a que des titres. Sans
   elle, les cartes flotteraient dans la meme nappe que la prose et la page
   redeviendrait une colonne continue.

   auto-fit ET minmax : autant de colonnes que la largeur en autorise, une
   seule sur telephone, sans aucune media query -- et une rubrique isolee
   occupe alors toute la ligne au lieu de laisser deux trous a cote d'elle. */
.gumf1-rubriques{background:#eaf5e3;padding:6.60rem 0;margin:6.60rem 0 0}
.gumf1-rubriques h2{margin-top:0}
.gumf1-rubriques-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.65rem}
.gumf1-rubrique{display:flex;flex-direction:column;background:#f7f6f0;border:1px solid #dde5d6;border-radius:12px;padding:1.98rem;text-decoration:none;color:#142019}
.gumf1-rubrique:hover{border-color:#073d27}
.gumf1-rubrique-titre{font-family:"Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;font-size:1.15rem;line-height:1.3;margin:0}
.gumf1-rubrique-mot{font-size:.92rem;line-height:1.5;margin:1.65rem 0 0;opacity:.8}
/* LE COMPTE EST POUSSE EN BAS (margin-top:auto) : sur une grille de cartes
   de hauteurs inegales, il s'aligne alors d'une carte a l'autre au lieu de
   flotter juste sous un texte plus ou moins long. */
.gumf1-rubrique-nb{font-size:.82rem;margin:0;margin-top:auto;padding-top:0.83rem;border-top:1px solid #dde5d6;color:#073d27;font-weight:600}

/* ── LE BANDEAU D'APPEL ─────────────────────────────────────────────────
   La bande coloree qui ferme la page d'accueil, juste avant le pied. C'est
   ce qui distingue une page d'accueil d'un article : un article se termine,
   une page d'accueil RENVOIE quelque part.

   LE BOUTON REPREND LA CLASSE GENERALE et n'en redefinit que ce qui doit
   changer sur fond d'accent -- une seconde definition complete divergerait
   un jour de la premiere. */
.gumf1-appel{background:#073d27;color:#ffffff;padding:5.78rem 0;margin:6.60rem 0 0}
.gumf1-appel .gumf1-page{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2.47rem}
.gumf1-appel-mot{font-family:"Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;font-size:1.45rem;line-height:1.35;margin:0;max-width:36rem}
.gumf1-appel-bouton{background:#f7f6f0;color:#073d27;margin-top:0;flex:none}
.gumf1-appel-bouton:hover{opacity:.85}
.gumf1-intro{max-width:43rem;margin-top:4.95rem}

/* ── 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. */
.gumf1-hero{padding:6.60rem 0 4.95rem}
.gumf1-hero-grille{display:grid;grid-template-columns:1.05fr 1fr;gap:4.95rem;align-items:center}
.gumf1-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. */
.gumf1-hero-titre{font-family:"Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;font-size:clamp(2.6rem,5.2vw,4.4rem);line-height:1.04;letter-spacing:-0.02em;margin:0;text-wrap:balance}
.gumf1-accentue{font-style:normal;color:#073d27}
.gumf1-hero-accroche{font-size:1.12rem;line-height:1.6;max-width:34rem;margin:1.65rem 0 0;color:#142019;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. */
.gumf1-bouton{display:inline-flex;align-items:center;gap:.55rem;margin-top:3.30rem;padding:.85rem 1.6rem;border-radius:999px;background:#073d27;color:#ffffff;text-decoration:none;font-weight:600;line-height:1}
.gumf1-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. */
.gumf1-hero-vues{position:relative;min-width:0}
.gumf1-hero-vue{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.gumf1-hero-vue-petite{position:absolute;left:-1.65rem;bottom:-2.47rem;width:38%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:12px;border:6px solid #f7f6f0;box-shadow:0 10px 30px rgba(0,0,0,.13)}
.gumf1-hero-pastille{position:absolute;right:-0.83rem;top:2.47rem;margin:0;padding:.5rem 1rem;border-radius:999px;background:#f7f6f0;color:#142019;font-size:.86rem;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.14)}

@media(max-width:1020px){
.gumf1-hero-grille{grid-template-columns:1fr;gap:4.13rem}
.gumf1-hero-vue-petite{width:32%;left:0}
.gumf1-hero-pastille{right:0}
}
@media(max-width:1020px){.gumf1-grille{grid-template-columns:repeat(2,1fr)}}
@media(max-width:510px){.gumf1-grille{grid-template-columns:1fr}}
.gumf1-hero-titre{font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.12}
.gumf1-nav>ul>li>a{font-size:.85rem;text-transform:none;letter-spacing:0;font-weight:500;text-decoration:none}
.gumf1-nav>ul{gap:1.5rem;align-items:center}
.gumf1-nav>ul>li+li{border-left:0;padding-left:0}
.gumf1-nav>ul>li+li::before{content:none}
.gumf1-nav ul ul a{font-size:.8rem;text-transform:none;letter-spacing:0;font-weight:400}
.gumf1-entete{padding:0.99rem 0}
.gumf1-bouton{background:#073d27;color:#ffffff;border:0;border-radius:8px;text-transform:none;letter-spacing:0;font-weight:600;padding:.85rem 1.5rem}
.gumf1-bouton:hover{background:#63c600;color:#ffffff}