/* Mobile et tablette : corrections de mise en page et confort tactile
   Chargé en dernier. Règle générale : dans une grille, un élément ne doit jamais être plus large que sa colonne
   (sinon toute la page déborde sur le côté), et tout ce qui se touche du doigt fait au moins 40 px. */

/* ============ Grilles : colonnes qui rétrécissent vraiment ============ */
.grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.shop .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid > *,.shop > *,.pp > *,.co > *,.cartp > *,.help > *,.ppr > *,.ppr-list > *,.cp-lines > *,.sbb > *,.sbb-grid > *,
.lhero-in > *,.tcreate > *,.prog-grid > *,.spot > *,.rv > *,.qz-in > *,.contact > *,.about-hero > *,
.fgrid > *,.st-body > *,.lcreate > *,.lman > *,.kinlines > *,.tmembers > *,.subtiles > *{min-width:0}
.tbl{max-width:100%}
/* Barre de recherche : le texte d'exemple se termine par « … » au lieu d'être coupé net */
.search input{text-overflow:ellipsis}
.search input::placeholder{text-overflow:ellipsis}
/* Résultats de recherche : vignettes à leur place, panneau assez large et limité à la hauteur de l'écran */
.results{z-index:70; min-width:min(360px,calc(100vw - 32px)); left:auto; max-height:min(440px,calc(100dvh - 140px)); overscroll-behavior:contain}
.results a{color:inherit}
.results .th{overflow:hidden; flex:none}
.results .th svg{position:static; transform:none; width:80%; height:80%}
.rvw header{flex-wrap:wrap; row-gap:4px}
.sbb-info select,.subline select{width:100%}
.tmock{max-width:min(400px,100%)}
.ton-visual{grid-template-columns:minmax(0,1fr); min-width:0}
.tmock > *,.tmock li > *{min-width:0}
.price{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:6px}
.price s{margin-left:0}
.cp-meta > *,.cp-meta select{max-width:100%; min-width:0}
.cp-meta select{text-overflow:ellipsis}
small{font-size:max(12px,.8333em)}
.size small,.fbt-item small,.rvw header small,.co small,.wa-msg time{font-size:12px}

@media (max-width:1080px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .help,.shop,.pp,.co,.cartp,.ppr{grid-template-columns:minmax(0,1fr)}
  .lcreate,.lman{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1000px){
  .sbb,.tcreate{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  #themeBtn{display:none}
}
@media (max-width:860px){
  .lhero-in{grid-template-columns:minmax(0,1fr)}
  .ton-visual .tmock{transform:none}
}

/* ============ Tablette (641 à 1080 px) ============ */
@media (min-width:641px) and (max-width:1080px){
  /* Sans le menu, la recherche occupe tout l'espace entre le logo et les icônes */
  .search{max-width:none; margin-left:12px; min-width:0}
  .bar{gap:12px}
  .wrap{width:min(1240px,100% - 48px)}
  .sbb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tperks,.lperks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-gal{max-width:560px; margin-inline:auto; width:100%}
  .sumcard{max-width:none}
  .acc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ============ Téléphone (jusqu'à 640 px) ============ */
@media (max-width:640px){
  .wrap{width:min(1240px,100% - 32px)}
  .announce li{font-size:12.5px; line-height:1.2; text-wrap:balance}
  .grid,.shop .grid,.acc-grid,.lg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sbb-grid,.kin-f,.tperks,.lperks{grid-template-columns:minmax(0,1fr)}
  .cp-line{grid-template-columns:84px minmax(0,1fr)}

  /* Rangées d'onglets : défilement horizontal au lieu de passer sur plusieurs lignes */
  .tabs{max-width:100%; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:0 0 auto; white-space:nowrap; padding:10px 16px; font-size:14px}
  .acc-tabs{display:flex}
  #railTabs{width:100%}
  .shead{flex-wrap:wrap; gap:14px}

  /* Carrousel : onglets lisibles et défilants */
  .h-ctrl .wrap{gap:10px}
  .tabs-h{overflow-x:auto; scrollbar-width:none; gap:14px}
  .tabs-h::-webkit-scrollbar{display:none}
  .tabs-h button{flex:0 0 auto; min-width:78px; min-height:44px; white-space:nowrap}
  .h-ctrl .arrows{margin-right:64px}

  /* Illustration de la tirelire de bébé (page /tirelire) */
  .tmock{padding:16px; border-radius:22px}
  .tmock-amt b{font-size:26px}
  .tmock li{padding:8px}
  .lhero-in{padding:10px 20px 30px}

  /* Titres un peu moins massifs, marges resserrées : moins de défilement */
  .shead h2{font-size:clamp(28px,8vw,36px)}
  .stepbox{padding:20px 16px}
  .flash{margin-bottom:64px}
  .programs{margin-bottom:64px}
  .prog-grid{gap:14px; margin-top:20px}
  .prog-card{padding:22px}
  .subsec h2,.legalp h2{font-size:20px}

  /* Aide : le tableau des tarifs défile dans son cadre */
  .tbl{padding:6px 12px}
  .help nav{gap:6px}
  .help nav a{background:var(--surface); border-radius:999px; padding:8px 14px; font-size:14px}

  /* Pied de page : colonnes aérées */
  footer.site .cols{grid-template-columns:1fr 1fr; gap:30px 20px}
  footer.site .cols > div:first-child{grid-column:1/-1}
}

/* ============ Étapes de l'accueil (Grossesse, Naissance…) : 2 × 2 pastilles sur téléphone ============ */
@media (max-width:640px){
  .timeline{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:6px 0 30px}
  .timeline::before,.timeline .fill{display:none}
  .st{flex-direction:row; align-items:center; gap:10px; min-height:56px; padding:8px 12px 8px 8px; border-radius:18px; background:var(--bg); text-align:left; line-height:1.2; font-size:14.5px; box-shadow:inset 0 0 0 1.5px transparent; transition:color .3s, box-shadow .3s, background .3s}
  .st .n{flex:none; width:36px; height:36px; font-size:14px}
  .st[aria-selected="true"]{box-shadow:inset 0 0 0 1.5px var(--rose); background:var(--surface)}
  .st[aria-selected="true"] .n{transform:none}
}

/* ============ Très petits écrans (jusqu'à 380 px) ============ */
@media (max-width:400px){
  .grid,.shop .grid{gap:22px 10px}
  .btn{padding:13px 20px}
  .s-btns .btn{flex:1 1 auto}
  .tmock li em{font-size:12px}
  .tmock-m{display:none}
}

/* ============ Écrans tactiles : cibles d'au moins 40 px ============ */
@media (pointer:coarse){
  .dots{gap:12px}
  .dot{position:relative}
  .dot::after{content:""; position:absolute; inset:-9px; border-radius:50%}
  .qty button{width:40px; height:40px}
  .rm,.subline .rm{display:inline-block; padding:10px 4px; margin:-10px 0}
  .guide-btn{display:inline-block; padding:10px 2px; margin:-10px 0 -10px 8px}
  .tabs-h button{min-height:44px}
  .heart{min-width:40px; min-height:40px}
  .size,.chip{min-height:40px}
  .qadd{min-height:40px}
  .pchip button,.promo button{min-height:40px}
  footer.site a,.help nav a,.ltoc a{display:inline-block; padding-block:6px}
}

/* ============ Cartes produit : la note passe à la ligne d'un bloc, jamais « (1 530 » puis « avis) » ============ */
.card .rate{flex-wrap:wrap; row-gap:0}
.card .rate > span{white-space:nowrap}

/* ============ Listes de naissance sur téléphone ============ */
@media (max-width:640px){
  .lpick{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 10px}
  .lg-grid > :only-child{grid-column:1 / -1}
  .lg-meta{padding:14px 14px 16px}
  .lg-act{flex-wrap:wrap}
  .lg-act .btn{white-space:normal; line-height:1.2; padding:11px 12px; font-size:14px; min-height:44px}
}
@media (max-width:640px){
  .oact{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:stretch}
  .oact .btn{width:100%; white-space:normal; line-height:1.2; padding:10px 12px; font-size:13.5px; min-height:44px}
}

/* ============ Commande : options (livraison, formule) : le prix passe sous le texte au lieu de l'écraser ============ */
@media (max-width:640px){
  .opt{column-gap:12px; padding:14px 14px}
  .opt:not(:has(img)){grid-template-columns:20px minmax(0,1fr); row-gap:6px}
  .opt:not(:has(img)) > em{grid-column:2; justify-self:start}
  .opt:not(:has(img)) > em small{display:inline; margin-left:4px}
}

/* ============ Mon abonnement : nom et taille sur toute la largeur, quantité en dessous ============ */
@media (max-width:640px){
  .subline{flex-wrap:wrap; row-gap:10px}
  .subline .grow{flex:1 1 calc(100% - 72px)}
  .subline .grow + *{margin-left:70px}
  .subline select{max-width:100%}
}
@media (max-width:640px){
  .bo{grid-template-columns:20px minmax(0,1fr); row-gap:6px; padding:14px}
  .bo > em{grid-column:2; justify-self:start}
}

/* ============ Tontine : moyens de paiement côte à côte seulement s'il y a la place ============ */
.tpay .payopts{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.payopts .opt b{white-space:nowrap}

/* ============ Tontine : initiales et mois à venir lisibles en mode sombre ============ */
.tm-h .av,.tmock-h .av{color:var(--ink)}
.tdots span:not(.ok):not(.wait){box-shadow:inset 0 0 0 1.5px var(--line)}
.tdots small{font-size:11.5px}
.tdots{row-gap:22px}

/* ============ Accueil : autant de colonnes que de catégories (une seule rangée) ============ */
.cats.c7{grid-template-columns:repeat(var(--n,7),minmax(0,1fr)); gap:12px}
.cats.c7 .cat b{font-size:clamp(13px,1.1vw,15px)}
@media (max-width:1080px){ .cats.c7{grid-template-columns:repeat(var(--n,7),minmax(110px,1fr)); overflow-x:auto} }

/* ============ Panier coulissant ============ */
.drawer .lines{padding:4px 24px 12px}
.dl{display:grid; grid-template-columns:72px minmax(0,1fr); gap:14px; padding:16px 0; border-bottom:1px solid var(--line); animation:slin .45s var(--ease)}
.dl .thumb{width:72px; height:72px; border-radius:16px}
.dl-main{display:grid; gap:6px; min-width:0}
.dl-top{display:flex; align-items:flex-start; gap:8px}
.dl-top h3{flex:1; min-width:0; font-family:var(--sans); font-size:14.5px; font-weight:700; letter-spacing:0; line-height:1.3}
.dl-top h3 a{text-decoration:none; color:inherit}
.dl-rm{flex:none; width:32px; height:32px; margin:-6px -6px 0 0; border-radius:50%; display:grid; place-items:center; color:var(--muted)}
.dl-rm:hover{background:var(--bg2); color:var(--rose-ink)}
.dl-rm .ico{width:17px; height:17px}
.dl-meta{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted)}
.dl-sels{display:grid; gap:6px}
.dl-sels .sz{display:grid; grid-template-columns:62px minmax(0,1fr); align-items:center; gap:8px; margin:0; font-size:12.5px}
.dl-sels .sz select{width:100%; min-width:0; padding:6px 8px; border-radius:10px; font-size:13px; text-overflow:ellipsis}
.dl-bot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:2px}
.dl-bot .qty{margin-top:0}
.dl-price{text-align:right; display:grid; justify-items:end}
.dl-price b{font-size:15.5px; font-weight:800; white-space:nowrap}
.dl-price small{color:#2F7F5C; font-weight:700; font-size:12px}
.drawer .lines .upsell{padding:18px 0 4px}
.drawer .d-foot{gap:8px; padding:14px 24px 18px}
.dpromo summary{cursor:pointer; font-size:14px; font-weight:700; color:var(--rose-ink); list-style:none; display:flex; align-items:center; gap:6px; width:max-content}
.dpromo summary::-webkit-details-marker{display:none}
.dpromo summary::before{content:"+"; font-size:17px; line-height:1}
.dpromo[open] summary::before{content:"−"}
.dpromo[open] summary{margin-bottom:8px}
.drawer .row{font-size:14.5px}
.drawer .row.total{font-size:18px}
.drawer .eta{font-size:12.5px}
@media (max-width:640px){ .drawer .lines,.drawer .d-foot{padding-inline:16px} .drawer .d-head{padding:16px} .drawer .ship{margin:0 16px} .dl{grid-template-columns:60px minmax(0,1fr); gap:12px} .dl .thumb{width:60px; height:60px} }
@media (max-height:760px){ .drawer .d-foot .giftl{font-size:13px} .drawer .d-head{padding-block:12px} .drawer .d-head h2{font-size:24px} }

/* ============ Liste de naissance : fenêtres « Offrir » et « Participer » ============ */
.gift{grid-template-columns:minmax(0,1fr); gap:16px; padding:34px 32px 24px}
.gift > *{min-width:0}
.gift .fgrid{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:14px}
.gift .fgrid .full{grid-column:1 / -1}
.gift-h h2{font-size:26px; line-height:1.15}
.gift-sum{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; background:var(--tint,var(--bg2)); border-radius:16px; padding:12px 16px; font-size:14px; color:var(--ink)}
.gift-sum b{font-weight:800}
.gift-sum > span:nth-child(2){color:var(--muted)}
.gbar{flex-basis:100%; height:8px; border-radius:99px; background:color-mix(in srgb,var(--surface) 70%,transparent); overflow:hidden; margin-top:4px}
.gbar b{display:block; height:100%; min-width:6px; border-radius:99px; background:var(--accent,var(--rose))}
.gift .payopts{grid-template-columns:minmax(0,1fr); gap:8px}
.gift .payopts .opt{padding:11px 14px; grid-template-columns:20px minmax(0,1fr) auto}
.gift .payopts .opt small{font-size:12.5px}
.gift .paylogo{flex:none}
.pl-card{display:grid; place-items:center; width:46px; height:30px; border-radius:8px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); color:var(--muted)}
.pl-card .ico{width:18px; height:18px}
.gift .amts{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px}
.gift-go{position:sticky; bottom:0; margin:0 -32px -8px; padding:12px 32px 10px; background:linear-gradient(transparent, var(--bg) 30%); z-index:2}
.gnote{margin:0; text-align:center; font-size:13px; color:var(--muted)}
@media (max-width:640px){
  .gift{padding:28px 18px 18px; gap:14px}
  .gift .fgrid{grid-template-columns:minmax(0,1fr)}
  .gift-h{grid-template-columns:64px 1fr; gap:12px}
  .gift-h .thumb{width:64px; height:64px; border-radius:16px}
  .gift-h h2{font-size:22px}
  .gift-go{margin:0 -18px -8px; padding:12px 18px 10px}
}

/* Liste de naissance, page de gestion : les lignes d'articles ne débordent plus */
.lit{grid-template-columns:96px minmax(0,1fr)}
.lit > *{min-width:0}
.lit .cp-meta select{max-width:100%}
@media (max-width:640px){ .lit{grid-template-columns:64px minmax(0,1fr); gap:12px} .lit .thumb{width:64px; height:64px} .lit-row{gap:10px} }

/* Ordinateur étroit (1081 à 1180 px) : on garde de la place pour la recherche */
@media (min-width:1081px) and (max-width:1180px){ #themeBtn{display:none} }

/* ============ Commande : récapitulatif « Votre commande » jamais rogné ============ */
.co-sum h2 small{font-family:var(--sans); font-size:14px; font-weight:600; color:var(--muted); margin-left:4px}
.co-sum .mini{border-bottom:1px solid var(--line); padding-bottom:12px}
.co-sum .mini div{grid-template-columns:56px minmax(0,1fr) auto}
.co-sum .mini div > span:nth-child(2){min-width:0}
@media (min-width:1081px){
  /* Le récapitulatif tient dans l'écran : seule la liste d'articles défile, le total et le bouton restent visibles */
  .co-sum{display:flex; flex-direction:column; max-height:calc(100dvh - 112px)}
  .co-sum > *{flex:none}
  .co-sum .mini{flex:0 1 auto; min-height:76px; max-height:none; overflow-y:auto; overscroll-behavior:contain; padding-top:8px; margin-top:-8px}
}
@media (min-width:1081px) and (max-height:600px){ .co-sum{position:static; max-height:none} .co-sum .mini{max-height:300px} }
.co-sum .mini.more{-webkit-mask-image:linear-gradient(#000 calc(100% - 34px), transparent); mask-image:linear-gradient(#000 calc(100% - 34px), transparent)}

/* ============ Accueil : avis clientes ============ */
.rv{gap:32px}
.rcard{padding:26px; gap:10px}
.rc-top{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.rcard .verif{margin-left:0}
.rcard footer{align-items:flex-start; margin-top:6px}
.rcard footer .av{flex:none; width:40px; height:40px}
.rcard footer > div{min-width:0; display:grid; gap:1px; line-height:1.35}
.rcard footer small{font-size:13px}
.rc-prod{font-size:13px; font-weight:600; color:var(--ink); text-underline-offset:2px}
/* Flèches sous les avis, à droite : elles ne recouvrent plus les cartes */
.rv .rail-wrap{padding-bottom:62px}
.rv .rail-wrap .arr{top:auto; bottom:0; box-shadow:none; border:1.5px solid var(--line)}
.rv .rail-wrap .prev{left:auto; right:56px}
.rv .rail-wrap .next{right:0}
@media (max-width:1080px){
  /* Carte de note compacte : chiffre à gauche, répartition à droite */
  .score{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:36px; align-items:center; padding:26px 28px}
  .score .big,.score .stars,.score p{grid-column:1}
  .score .bars{grid-column:2; grid-row:1 / span 3}
  .score p{margin:6px 0 0}
  .rcards{grid-auto-columns:calc((100% - 22px) / 2)}
  .rv .rail-wrap{padding-bottom:0}
}
@media (max-width:640px){
  .score{grid-template-columns:minmax(0,1fr); padding:22px 20px}
  .score .big{font-size:56px}
  .score .bars{grid-column:1; grid-row:auto; margin-top:16px; gap:6px}
  .rcards{grid-auto-columns:86%}
  .rcard{padding:22px 20px}
}

/* ============ Pied de page : un bloc prune qui se détache du reste du site ============ */
footer.site{--f-bg:#22385C; --f-ink:#F4F7FB; --f-muted:#C3CFE0; --f-line:rgba(255,255,255,.16); --f-hover:#F5B8C6;
  background:var(--f-bg); color:var(--f-ink); border-radius:44px 44px 0 0; margin-top:40px; padding:72px 0 36px; position:relative; overflow:hidden}
footer.site .cols h4{color:var(--f-ink)}
footer.site .cols ul,footer.site .cols p{color:var(--f-muted)}
footer.site .cols a:hover,footer.site .cols button:hover,footer.site .legal a:hover{color:var(--f-hover)}
footer.site .legal{border-top-color:var(--f-line); color:var(--f-muted)}
footer.site .legal a{color:inherit}
footer.site .logo-txt.lt{display:none}
footer.site .logo-txt.dk{display:inline-block}
footer.site .pays .pi{border-color:transparent}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) footer.site{--f-bg:#15233A; box-shadow:0 -1px 0 var(--line)} }
:root[data-theme="dark"] footer.site{--f-bg:#15233A; box-shadow:0 -1px 0 var(--line)}
@media (max-width:640px){ footer.site{border-radius:32px 32px 0 0; padding:56px 0 28px} }
footer.site .logo{display:inline-flex; align-items:center; gap:9px}