:root{
  --blanc:#ffffff; --sable:#fbe6b8; --ciel:#dceefa; --brume:#9cc4dd;
  --azur:#1567a6; --nuage:#eaf4fb; --ink:#12293d; --paper:#f7fafc;
  --dim:rgba(18,41,61,.6); --fade:rgba(18,41,61,.4); --sun:#f2a83c;
  --f-display:Georgia,"Iowan Old Style","DM Serif Display",serif;
  --f-sans:-apple-system,"Inter Tight",system-ui,sans-serif;
  --f-mono:"SF Mono","JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--blanc);color:var(--ink);font-family:var(--f-sans);-webkit-font-smoothing:antialiased}
em{font-style:italic;color:var(--azur);font-weight:400}
button{font-family:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2{text-wrap:balance;margin:0}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.note{background:var(--ink);color:var(--blanc);text-align:center;font:600 12px/1.5 var(--f-sans);padding:8px 16px}

.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-family:var(--f-sans);font-size:12px;font-weight:500;letter-spacing:.02em;background:var(--nuage);color:var(--ink)}

.wordmark{display:inline-flex;align-items:baseline;font-family:var(--f-display);font-weight:500;letter-spacing:-0.02em;line-height:1;color:var(--ink)}
.wordmark .i{position:relative}
.wordmark .heart{position:absolute;top:-65%;left:50%;transform:translateX(-50%);color:var(--azur)}

header.topbar{background:var(--blanc);padding:14px 32px;display:flex;justify-content:space-between;align-items:center;font-size:13px;position:sticky;top:0;z-index:30;border-bottom:1px solid rgba(18,41,61,.06)}
nav.links{display:flex;gap:28px;font-weight:500;flex-wrap:wrap}
nav.links a.active{color:var(--azur)}
/* « Je commande » n'est pas une rubrique de plus : c'est la caisse. Elle
   ouvre le menu, et sa pastille est plus grosse que les rubriques pour qu'on
   la voie en premier (elle, 05/09/2026 : « le bouton Je commande pourrais
   etre plus gros aussi »). La marge négative annule le supplément de hauteur :
   sans elle, l'en-tête collant grandirait de six pixels sur tout le site. */
a.nav-cta{background:var(--sable);padding:8px 18px;border-radius:999px;font-weight:600;font-size:15px;margin:-8px 0;white-space:nowrap}
a.nav-cta.active{color:var(--ink)}
/* « Bouboutik », le nom de la maison, à la place qu'occupait « Sur-mesure ».
   Elle, 05/09/2026 : « bouboutik devrait avoir un bouton bleu en fond ». Bleu
   PÂLE, pas plein : c'est un repère, pas une deuxième caisse. Le seul accent
   chaud de la barre reste « Je commande », contre le panier. */
a.nav-marque{background:var(--ciel);padding:6px 14px;border-radius:999px;font-weight:600;margin:-6px 0;white-space:nowrap}
a.nav-marque.active{color:var(--azur)}
.account{display:flex;gap:12px;align-items:center}

/* Téléphone et tablette : le logo et le panier restent en haut, les rubriques
   passent sur une bande qui défile au doigt. Pas de menu burger — rien n'est
   caché, et tout est atteignable au pouce. */
@media(max-width:900px){
  header.topbar{flex-wrap:wrap;padding:12px 0 0;gap:10px}
  header.topbar>.wordmark,header.topbar>.account{padding:0 20px}
  header.topbar>.wordmark{font-size:24px!important}
  /* écarts resserrés pour que la pastille « Sur-mesure », cinquième rubrique,
     tienne dans la largeur d'un téléphone sans qu'il faille faire défiler */
  /* Écarts resserrés + un dégradé sur le bord droit : sans ce repère visuel,
     personne ne devine qu'une bande défile — les gens ne glissent pas, ils
     supposent que c'est tout. Le dégradé montre qu'il y a une suite. */
  .navwrap{order:3;width:100%;position:relative;border-top:1px solid rgba(18,41,61,.06)}
  .navwrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:34px;pointer-events:none;
    background:linear-gradient(to right,rgba(255,255,255,0),var(--blanc) 78%)}
  nav.links{width:100%;flex-wrap:nowrap;overflow-x:auto;gap:13px;padding:10px 14px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  nav.links::-webkit-scrollbar{display:none}
  nav.links a{white-space:nowrap;flex:0 0 auto}
  .account{margin-left:auto}
  .account>span{display:none}   /* la loupe et « Compte » ne servent à rien tant qu'il n'y a pas de compte */
  /* Les rubriques ne faisaient que 16px de haut : la hauteur du texte, rien de
     plus. Sur une bande qui défile, on rate la cible une fois sur deux. */
  nav.links a{padding:9px 0}
  nav.links a.nav-marque{padding:7px 12px;margin:0}
  .account a.nav-cta{padding:7px 14px;font-size:14px;margin:0}
}
.bag{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:var(--ink);color:var(--blanc);font-size:12px;font-weight:600}
.announce{background:var(--ink);color:var(--blanc);padding:8px;text-align:center;font-size:12px;font-weight:500}
/* sur téléphone la ligne passe à deux : que le « ! » ne se retrouve pas seul */
.announce a{white-space:nowrap}

.photoslot{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;padding:24px;line-height:1.5}
.photo-cover{width:100%;height:100%;object-fit:cover}

section.hero{padding:40px 32px 60px}
.hero-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.hero h1{font-family:var(--f-display);font-weight:500;font-size:clamp(40px,5.5vw,88px);line-height:.98;letter-spacing:-0.03em;margin-top:24px}
.hero p.lead{font-size:17px;line-height:1.6;color:var(--dim);margin-top:24px;max-width:460px}
.cta-row{display:flex;gap:14px;margin-top:32px;align-items:center;flex-wrap:wrap}
.btn-primary{background:var(--ink);color:var(--blanc);border:none;border-radius:999px;padding:14px 28px;font-size:14px;font-weight:600;display:inline-block}
.btn-link{font-size:14px;color:var(--azur);font-weight:500;border-bottom:1px solid var(--azur);padding-bottom:2px}
.social-row{display:flex;gap:22px;margin-top:36px;align-items:center}
.avatars{display:flex}
.avatars span,.avatars img{width:32px;height:32px;border-radius:50%;margin-left:-10px;border:2px solid var(--blanc);display:block;object-fit:cover}
.avatars span:first-child,.avatars img:first-child{margin-left:0}
.social-text{font-size:13px;color:var(--dim);line-height:1.4}
.social-text b{color:var(--ink)}
.stars{color:var(--azur)}

.hero-photo{position:relative}
.hero-photo .frame{border-radius:32px;overflow:hidden;aspect-ratio:1/1;background:var(--ciel)}
/* La pastille se pose DANS la photo, pas à cheval sur son bord (elle,
   10/08/2026 : « ça dépasse ça fait pas jolie »). Le design de référence la
   met en `right:-16px`, débordant à droite ; ici elle avait été passée à
   gauche, où elle débordait dans le blanc de la page — d'où l'effet raté. */
.badge-top{position:absolute;top:20px;left:20px;background:var(--blanc);border-radius:999px;padding:8px 16px;box-shadow:0 4px 16px rgba(18,41,61,.15);font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
.badge-top .dot{width:8px;height:8px;border-radius:50%;background:var(--brume)}
.badge-quote{position:absolute;bottom:16px;right:-28px;background:var(--sable);border-radius:20px;padding:12px 16px;box-shadow:0 4px 16px rgba(18,41,61,.15);max-width:230px}
.badge-quote .label{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:2px}
.badge-quote .quote{font-family:var(--f-display);font-style:italic;font-size:18px;line-height:1.2}
section.quiz{background:var(--nuage);padding:64px 32px}
.quiz-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:center}
.quiz-grid h2{font-family:var(--f-display);font-weight:500;font-size:clamp(32px,4vw,56px);line-height:1;letter-spacing:-0.025em;margin-top:20px}
.quiz-grid p{font-size:15px;color:var(--dim);line-height:1.6;margin-top:18px;max-width:420px}
.quiz-card{background:var(--blanc);border-radius:28px;padding:28px;box-shadow:0 12px 32px -16px rgba(18,41,61,.25)}
.quiz-card .qtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.qtop .step{font-size:12px;color:var(--dim);font-family:var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.qtop .pct{font-size:11px;color:var(--azur);font-weight:600}
.progress{height:4px;background:var(--nuage);border-radius:999px;margin-bottom:22px;overflow:hidden}
.progress i{display:block;width:33%;height:100%;background:var(--azur)}
.qtitle{font-family:var(--f-display);font-weight:500;font-size:26px;line-height:1.2;letter-spacing:-0.02em}
.qopts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.qopts .qopt:last-child:nth-child(odd){grid-column:1/-1}
.qopt{display:block;padding:14px;border:1px solid rgba(18,41,61,.08);border-radius:16px;cursor:pointer;text-decoration:none;color:inherit;transition:border-color .15s,background .15s}
.qopt:hover{border-color:var(--azur)}
.qopt.sel{border:2px solid var(--azur);background:var(--nuage)}
.qopt .emoji{font-size:22px;margin-bottom:6px}
.qopt .lbl{font-size:14px;font-weight:600}
.qopt .sub{font-size:11px;color:var(--dim);margin-top:2px}
.qnext{display:flex;justify-content:flex-end;margin-top:18px}
.btn-azur{background:var(--azur);color:var(--blanc);border:none;border-radius:999px;padding:10px 22px;font-size:13px;font-weight:600;display:inline-block;text-decoration:none;cursor:pointer}

section.best{padding:80px 32px}
.best-head{max-width:1240px;margin:0 auto 32px;display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:16px}
.best-head h2{font-family:var(--f-display);font-weight:500;font-size:clamp(28px,4vw,48px);line-height:1;letter-spacing:-0.025em;margin-top:14px}
.best-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.best-grid{grid-template-columns:repeat(2,1fr)}.hero-grid,.quiz-grid,.founder-grid,.club-grid{grid-template-columns:1fr}}
.card{background:var(--paper);border-radius:24px;overflow:hidden;display:flex;flex-direction:column}
.card .thumb{aspect-ratio:1;position:relative;color:#fff;overflow:hidden}
.card .tag{position:absolute;top:14px;left:14px;color:var(--ink);font-size:10px;font-weight:600;padding:5px 12px;border-radius:999px;z-index:2}
.card .info{padding:18px}
.card .name{font-family:var(--f-display);font-size:19px;font-weight:500;letter-spacing:-0.01em}
.card .desc{font-size:12px;color:var(--dim);margin-top:4px;line-height:1.4}
.card .pricerow{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px}
.card .price{font-size:18px;font-weight:600}
.card .rating{font-size:10px;color:var(--azur);margin-top:2px}
.card .choose{font-size:12px;color:var(--azur);font-weight:600}

section.founder{background:var(--brume);color:var(--ink);padding:80px 32px}
.founder-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:center}
.founder-photo{position:relative}
.founder-photo .frame{border-radius:28px;overflow:hidden;aspect-ratio:4/5;background:#5f6852;color:#fff}
.founder-badge{position:absolute;bottom:-16px;left:-16px;background:var(--sable);color:var(--ink);border-radius:20px;padding:18px;max-width:220px;box-shadow:0 8px 24px rgba(18,41,61,.2)}
.founder-badge .label{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.founder-badge .brand{font-family:var(--f-display);font-style:italic;font-size:18px;font-weight:500;line-height:1.2}
.founder-copy h2{font-family:var(--f-display);font-weight:500;font-size:clamp(32px,4.5vw,56px);line-height:1;letter-spacing:-0.025em;margin-top:20px}
.founder-copy p{font-size:15px;opacity:.85;line-height:1.7;margin-top:18px;max-width:480px}
.btn-outline{margin-top:28px;background:transparent;color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:12px 22px;font-size:13px;font-weight:600;display:inline-block}

section.club{padding:80px 32px}
.club-box{max-width:1240px;margin:0 auto;background:var(--ink);color:var(--blanc);border-radius:32px;padding:64px 56px;position:relative;overflow:hidden}
.club-box .blob1{position:absolute;top:-60px;right:-60px;width:240px;height:240px;border-radius:50%;background:var(--azur);opacity:.9}
.club-box .blob2{position:absolute;bottom:-80px;right:140px;width:180px;height:180px;border-radius:50%;background:var(--ciel)}
.club-grid{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.club-grid h2{font-family:var(--f-display);font-weight:500;font-size:clamp(32px,5vw,64px);line-height:1;letter-spacing:-0.025em;margin-top:20px}
.club-grid h2 em{color:var(--sable)}
.club-grid>div>p{font-size:16px;margin-top:18px;opacity:.85;max-width:480px;line-height:1.6}
.perks{display:flex;flex-direction:column;gap:0;margin-top:28px;max-width:480px}
.perk{display:flex;align-items:center;gap:14px;padding:10px 0;border-top:1px solid rgba(255,255,255,.12)}
.perk:first-child{border-top:none}
.perk .ic{font-size:18px;width:36px;height:36px;background:var(--blanc);color:var(--ink);border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-family:var(--f-display);font-weight:700}
.perk span.txt{font-size:14px;opacity:.9}
.btn-sable{margin-top:32px;background:var(--sable);color:var(--ink);border:none;border-radius:999px;padding:14px 32px;font-size:14px;font-weight:700;display:inline-block}
/* La carte de membre a été remplacée par une photo : elle mettait en scène un
   membre et un numéro de carte qui n'existent pas. */
.club-photo{position:relative;z-index:2}
.club-photo img{width:100%;border-radius:24px;display:block;aspect-ratio:4/5;object-fit:cover;box-shadow:0 12px 32px rgba(0,0,0,.35)}
.membercard{background:var(--blanc);color:var(--ink);border-radius:22px;padding:22px;transform:rotate(-3deg);box-shadow:0 12px 32px rgba(0,0,0,.35);position:relative;z-index:2}
.membercard .mtop{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}
.membercard .label{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.membercard .since{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:22px}
.membercard .dogrow{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.membercard .avatar{width:50px;height:50px;border-radius:50%;background:var(--ciel)}
.membercard .dogname{font-family:var(--f-display);font-style:italic;font-size:22px;font-weight:500}
.membercard .doginfo{font-size:11px;color:var(--dim)}
.membercard .bday{background:var(--nuage);border-radius:14px;padding:14px}
.membercard .bday .l1{font-size:11px;color:var(--dim);font-family:var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.membercard .bday .l2{font-family:var(--f-display);font-size:22px;font-weight:500;margin-top:4px}
.membercard .bday .l3{font-size:11px;color:var(--dim);margin-top:2px}

section.reviews{padding:80px 32px}
.reviews-head{max-width:1240px;margin:0 auto 48px}
.reviews-head h2{font-family:var(--f-display);font-weight:500;font-size:clamp(28px,4.5vw,56px);line-height:1;letter-spacing:-0.025em;margin-top:14px}
.reviews-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.reviews-grid{grid-template-columns:1fr}}
.review{border-radius:22px;padding:26px}
.review .quote{font-family:var(--f-display);font-size:22px;font-weight:500;line-height:1.2;letter-spacing:-0.01em;margin-bottom:14px}
.review .body{font-size:14px;color:var(--ink);opacity:.8;line-height:1.55;margin-bottom:22px}
.review .who{border-top:1px solid rgba(18,41,61,.08);padding-top:14px;display:flex;align-items:center;gap:10px}
/* La pastille du boubou. 40px : assez pour reconnaître un chien, assez petit
   pour rester une signature et non une illustration. Découpée par
   outils/pastille-boubou.swift, qui vérifie qu'aucun boubou n'est coupé. */
.avis-photo{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.review .name{font-size:13px;font-weight:600}
.review .dog{font-size:11px;color:var(--dim)}

footer{background:var(--ciel);color:var(--ink);padding:64px 32px 28px}
.foot-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:48px;margin-bottom:40px;align-items:flex-start}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-desc{font-size:14px;line-height:1.6;margin-top:16px;max-width:280px;opacity:.8}
.newsletter-lbl{font-size:12px;font-weight:600;margin:24px 0 10px}
.nl-form{display:flex;gap:6px;max-width:320px}
.nl-form input{flex:1;border:none;border-radius:999px;padding:10px 16px;font-size:13px;background:var(--blanc)}
.nl-form button{background:var(--ink);color:var(--blanc);border:none;border-radius:999px;padding:10px 18px;font-size:12px;font-weight:600}
.foot-col h4{font-weight:700;margin:0 0 14px;font-size:13px}
.foot-col div{margin-bottom:8px;font-size:13px;opacity:.8}
.foot-bottom{max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(18,41,61,.15);padding-top:20px;font-size:11px;opacity:.7;flex-wrap:wrap;gap:8px}

/* Inner pages (Boutique, Sur-mesure, etc.) */
section.pagehead{padding:48px 32px 20px}
.pagehead-inner{max-width:1240px;margin:0 auto}
.pagehead h1{font-family:var(--f-display);font-weight:500;font-size:clamp(32px,4.5vw,52px);line-height:1;letter-spacing:-0.025em;margin-top:14px}
.pagehead p{font-size:15px;color:var(--dim);margin-top:14px;max-width:520px}

/* ------------------------------------------------------------------ *
 *  Téléphone (≤ 600px)
 *  Le site tenait déjà dans la largeur, mais il gardait des marges et
 *  un rythme vertical pensés pour un écran de bureau : sur 844px de
 *  haut, on passait son temps à faire défiler du vide.
 * ------------------------------------------------------------------ */
@media(max-width:600px){
  section.hero{padding:24px 20px 40px}
  section.quiz{padding:44px 20px}
  section.best{padding:48px 20px}
  section.founder{padding:48px 20px}
  section.club{padding:48px 20px}
  section.reviews{padding:48px 20px}
  section.pagehead{padding:32px 20px 16px}
  footer{padding:44px 20px 24px}
  .wrap{padding:0 20px}

  .hero p.lead{font-size:16px;margin-top:18px}
  .cta-row{margin-top:24px;gap:10px}
  .social-row{margin-top:26px;gap:14px}

  /* Bulles décoratives : elles étaient calées en négatif sur les marges du
     bureau. Ramenées dans le cadre, sinon elles poussent la page de côté. */
  .badge-top{left:14px;top:14px}
  .badge-quote{right:0;bottom:12px;max-width:196px}
  .badge-quote .quote{font-size:16px}
  .founder-badge{left:0;bottom:-10px;max-width:190px;padding:14px}
  .membercard{transform:none}

  .club-box{padding:36px 24px;border-radius:26px}
  .club-box .blob1{width:170px;height:170px;top:-40px;right:-40px}
  .club-box .blob2{width:120px;height:120px}
  .perk .ic{width:32px;height:32px;font-size:16px}

  .best-grid{gap:12px}
  .card .info{padding:14px}
  .card .name{font-size:17px}
  .card .tag{font-size:11px}     /* 10px sur une pastille colorée, illisible */
  .review{padding:20px}
  .review .quote{font-size:19px}

  .foot-grid{gap:26px;margin-bottom:28px}
  .foot-desc{max-width:none}

  /* Liens hauts de 15 à 17px : au doigt, on tape à côté. On les épaissit sans
     toucher à la taille du texte, en jouant seulement sur la zone cliquable. */
  .foot-col div{margin-bottom:1px}
  .foot-col div a{display:inline-block;padding:7px 0}
  .btn-link{display:inline-block;padding-bottom:7px}
  .card .same,.card .choose{display:inline-block;padding:7px 0}
  .card .pricerow{align-items:center}
}

/* Sur tablette aussi, la pastille de catégorie et les libellés de coupe
   descendaient à 10px. */
@media(max-width:900px){
  .card .tag{font-size:11px}
  body .guide-row .sigle small{font-size:11px}
  body .weave .star{font-size:11px}
}

/* Les pages intérieures définissent leurs conteneurs dans un <style> local, qui
   passe après cette feuille : le préfixe « body » leur reprend la main sans
   recourir à !important. Marges latérales alignées sur les 20px du reste. */
@media(max-width:600px){
  body .legal, body .guide-wrap, body .contact-wrap, body .box-hero, body .box-items,
  body .story-row, body .journal-empty, body .cfg-wrap, body .faq, body .quiz-wrap,
  body .guide, body .cat-grid, body .cat-title, body .grid-lead, body .weaves,
  body .values, body .process, body .cq, body .tr-hero{
    padding-left:20px;padding-right:20px}
  body .legal, body .guide-wrap{padding-bottom:56px}
  body .faq, body .contact-wrap, body .box-items, body .journal-empty{padding-bottom:48px}
  body .cat-grid{padding-bottom:40px}
  body .cat-title{margin-top:44px;font-size:27px}
  body .story-row, body .box-hero{padding-top:28px;gap:28px}
  body .tr-hero{padding-top:32px;gap:32px}
  body .values, body .process{padding-top:44px;padding-bottom:44px}
  body .form-card{padding:22px}
}

/* Le quiz : deux colonnes d'options tenaient dans la largeur, mais chaque
   descriptif partait sur quatre lignes de 11px. Une colonne, et ça se lit. */
@media(max-width:560px){
  body .qopts{grid-template-columns:1fr}
  .qopts .qopt:last-child:nth-child(odd){grid-column:auto}
  .qopt{padding:13px 15px}
  .qopt .sub{font-size:12px}
  .qopt .emoji{font-size:20px;margin-bottom:4px}
  .qtitle{font-size:23px}
  .quiz-card{padding:22px 18px;border-radius:22px}
}

/* ══════════════════════════════════════════════════════════════════════════
   RATTRAPAGES RESPONSIVE — à garder EN FIN DE FEUILLE, c'est tout l'intérêt.

   ⚠️ LE PIÈGE QUI A CAUSÉ DEUX DE CES BUGS. Le `@media(max-width:900px)` de la
   ligne 120 fait passer `.hero-grid`, `.quiz-grid`, `.best-grid`, `.founder-grid`
   et `.club-grid` en une seule colonne. Il ne marchait que pour les trois
   premiers — parce qu'eux sont définis AVANT lui (lignes 69, 95, 119), alors que
   `.founder-grid` (134) et `.club-grid` (148) sont définis APRÈS. À spécificité
   égale, c'est la règle la plus tardive qui gagne, media query ou pas : la mise
   en page bureau restait donc en place sur téléphone, et personne ne voyait
   d'erreur dans le CSS puisque la règle « existait ».
   D'où ce bloc en fin de fichier. Une correction responsive placée après TOUTES
   les définitions ne peut plus être écrasée par distraction.
   ══════════════════════════════════════════════════════════════════════════ */

/* Les avatars écrasaient « Plus de 500 boubous… ». `.avatars` est un élément
   flexible de `.social-row` : sans consigne, il accepte de rétrécir sous la
   largeur de son contenu (4 vignettes de 32px chevauchées = 98px). Une fois
   comprimé, les images débordent de leur boîte et se posent sur le texte.
   `flex-shrink:0` lui rend sa largeur ; le texte, lui, peut se replier. */
.avatars{flex-shrink:0}

@media(max-width:900px){
  /* La vraie place de la règle de la ligne 120, pour ces deux-là. */
  .founder-grid,.club-grid{grid-template-columns:1fr}
}

@media(max-width:600px){
  /* LE PIED DE PAGE PARTAIT EN ESCALIER. Il tombait de 5 colonnes à 2, jamais
     à 1 : le bloc de marque (mot-marque + description + formulaire) occupait
     la première case et dépassait largement en hauteur, si bien que
     « Bouboutik » se retrouvait seul en haut à droite et que les rubriques
     suivantes se décalaient d'une ligne sur deux.
     Le bloc de marque prend donc toute la largeur, et les quatre rubriques se
     rangent deux par deux dessous — plus compact qu'une seule colonne, et
     surtout aligné. */
  .foot-grid{grid-template-columns:1fr 1fr;gap:22px 26px}
  .foot-grid>*:first-child{grid-column:1 / -1}

  /* Une fois `.founder-grid` en une colonne, la photo prend toute la largeur :
     la pastille « ROXa + paprIKA » peut redescendre dans son coin sans manger
     l'image. Elle reste dans le cadre (pas de débordement latéral). */
  .founder-badge{left:12px;bottom:12px;max-width:180px}
}

@media(max-width:600px){
  /* LES BULLES DÉCORATIVES CROISAIENT LE CONTENU une fois la Team Roxika passée
     en une colonne : le titre s'étirait alors sur toute la largeur et allait
     rencontrer la grosse pastille azur, tandis que la pâle formait une bosse
     sous la photo, qu'on lisait comme un défaut d'affichage.
     Sur le bureau elles occupent un vide à droite du texte ; ici il n'y a plus
     de vide. Poussées plus loin dans les coins, elles ne gardent qu'un arc
     visible — ce qu'elles sont censées être, un accent, pas une forme. */
  .club-box .blob1{width:150px;height:150px;top:-72px;right:-58px}
  .club-box .blob2{width:110px;height:110px;bottom:-72px;right:-40px}

  /* LE MENU DÉFILE, ENCORE FAUT-IL QUE ÇA SE VOIE (elle, 14/08/2026 : « je vois
     que les 5 premiers onglets »). Les 7 rubriques font environ 530px : elles ne
     rentreront jamais dans 390, et le parti pris reste de tout laisser
     atteignable plutôt que de cacher derrière un burger.
     Ce qui invite à glisser, ce n'est pas le dégradé — c'est un libellé
     visiblement COUPÉ. Le dégradé le recouvrait presque entièrement : réduit de
     34 à 22px, et écarts resserrés, « Team… » dépasse assez pour qu'on comprenne
     qu'il y a une suite. */
  .navwrap::after{width:22px}
  nav.links{gap:11px;padding:10px 12px}
}


/* Écrans étroits (Android rend souvent en 360px là où un iPhone donne 390) :
   « Sur-mesure » y finissait pile au bord, donc AUCUN libellé suivant ne
   dépassait — et sans libellé coupé, rien ne dit que la bande défile. On
   resserre juste assez pour que « Tea… » réapparaisse. */
@media(max-width:400px){
  nav.links{gap:6px;padding:10px 8px;font-size:13px}
  .navwrap::after{width:18px}
}

@media(max-width:700px){
  /* PRIX ET LIEN SE CHEVAUCHAIENT SUR LES CARTES. `.pricerow` aligne les deux
     bouts en `space-between`, et le lien est en `white-space:nowrap` : sur une
     carte de ~165px (deux colonnes sur un 360), « Je veux le même → » ne peut
     pas tenir à côté de « dès 110€ », alors il déborde et se pose sur le prix.
     On autorise le retour à la ligne : quand ça tient, rien ne change ; quand
     ça ne tient pas, le lien prend la ligne suivante au lieu de mordre. */
  .card .pricerow{flex-wrap:wrap;gap:2px 10px}
}