/* =========================================================
   Curaltone : la feuille de style commune à toutes les pages
   Couleurs et police : charte officielle d'octobre 2026.
   ========================================================= */

/* ---------- La police Poppins, hébergée avec le site ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../polices/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../polices/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../polices/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../polices/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("../polices/poppins-800.woff2") format("woff2"); }

/* ---------- Les couleurs ---------- */
:root {
  --rouge: #98322D;
  --orange: #C36B38;
  --noir: #15100F;
  --blanc: #FFFFFF;
  --degrade: linear-gradient(90deg, #98322D, #C36B38);
  --texte-doux: #4A4240;        /* texte secondaire sur fond clair (contraste 9:1) */
  --texte-doux-sombre: #D9D0CC; /* texte secondaire sur fond sombre (contraste 12:1) */
  --accent-sombre: #F2B48A;     /* petits titres sur fond sombre */
  --fond-doux: #F7F3F1;
  --trait: #E4DAD5;
  --carte-sombre: #221A18;
  --trait-sombre: #3A2E2B;
  --largeur: 1180px;
  /* le site garde ses couleurs : le « mode sombre forcé » de certains téléphones ne les inverse pas */
  color-scheme: only light;
}

/* ---------- La base ---------- */
* { box-sizing: border-box; }
/* 125 % = 20 px avec le réglage habituel du navigateur.
   Si la personne a choisi un texte plus grand dans son navigateur, le site le respecte. */
html { font-size: 125%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.grand-texte { font-size: 156.25%; }
body { margin: 0; background: var(--blanc); color: var(--noir); font-family: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif; line-height: 1.6; overflow-x: hidden; overflow-wrap: break-word; }
img, svg { max-width: 100%; }
a { color: var(--rouge); text-underline-offset: 3px; }
/* une adresse e-mail trop longue pour l'écran passe à la ligne au lieu de dépasser
   (les deux premières lignes servent aux navigateurs plus anciens) */
a[href^="mailto:"] { word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
/* les colonnes peuvent rétrécir avec l'écran */
.grille > *, .liste-pieces > *, .produits > *, .contact-cartes > *, .materiel-apercu > *, .pied .conteneur > * { min-width: 0; }
/* un mot trop long pour la case passe à la ligne au lieu de dépasser */
.materiel-apercu li { word-break: break-word; overflow-wrap: anywhere; }
.sombre a:not(.bouton) { color: var(--blanc); }
/* Le contour qui montre où l'on se trouve quand on navigue au clavier.
   Les navigateurs plus anciens l'affichent toujours ; les récents le cachent après un clic de souris. */
:focus { outline: 4px solid var(--rouge); outline-offset: 4px; }
.sombre :focus { outline-color: var(--accent-sombre); }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 4px solid var(--rouge); outline-offset: 4px; border-radius: 8px; }
.sombre :focus-visible { outline-color: var(--accent-sombre); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: 2.9rem; font-weight: 800; }
h2 { font-size: 2rem; font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }
.aller-contenu { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--blanc); color: var(--noir); padding: 12px 18px; border-radius: 12px; font-weight: 700; }
.aller-contenu:focus { top: 12px; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Les boutons (toujours au moins 48 px de haut, toujours avec du texte) ---------- */
/* Le texte d'un bouton peut passer sur deux lignes sur un petit écran, au lieu de dépasser. */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 8px 26px; border-radius: 999px; font: inherit; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; border: 3px solid transparent; transition: transform .2s, box-shadow .2s; }
.bouton:hover { transform: translateY(-2px); }
.bouton-plein { background: var(--degrade); color: var(--blanc); box-shadow: 0 10px 24px rgba(152, 50, 45, .28); }
.bouton-contour { background: var(--blanc); color: var(--noir); border-color: var(--noir); }
.sombre .bouton-contour { background: transparent; color: var(--blanc); border-color: var(--blanc); }
/* 19 px en gras : assez grand pour que le blanc sur le dégradé reste bien lisible */
.bouton-petit { min-height: 48px; padding: 6px 18px; font-size: .95rem; white-space: nowrap; }
.boutons { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Les ambiances ---------- */
.sombre { background: var(--noir); color: var(--blanc); }
.section { padding: 80px 0; }
.section-douce { background: var(--fond-doux); }
.surtitre { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--rouge); margin: 0 0 10px; }
.sombre .surtitre { color: var(--accent-sombre); }
.intro { font-size: 1.1rem; color: var(--texte-doux); max-width: 46ch; }
.sombre .intro { color: var(--texte-doux-sombre); }
.texte-degrade { background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- L'en-tête : le logo officiel, le nom et la devise ---------- */
.entete { background: var(--noir); border-bottom: 1px solid #2C2220; }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.marque { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--blanc); }
.marque img { width: 84px; height: auto; display: block; }
.marque-texte { display: flex; flex-direction: column; line-height: 1.15; }
.marque-nom { font-size: 1.6rem; font-weight: 700; letter-spacing: .3px; }
.marque-devise { font-size: .85rem; font-weight: 500; color: var(--accent-sombre); margin-top: 4px; }

/* ---------- La barre de menu : elle reste en haut sur les grands écrans ---------- */
.barre-menu { position: relative; z-index: 50; background: rgba(21, 16, 15, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid #2C2220; }
@media (min-width: 68.75em) { .barre-menu { position: -webkit-sticky; position: sticky; top: 0; } }
.barre-menu .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 8px 18px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
.menu { list-style: none; display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; }
.menu a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 10px; color: var(--blanc); text-decoration: none; font-weight: 500; font-size: .95rem; }
.menu a:hover { background: #2C2220; }
.menu a[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--orange); }
/* ---------- Le haut de la page d'accueil, sombre et lumineux ---------- */
.accroche { position: relative; overflow: hidden; padding: 64px 0 72px; isolation: isolate; }
/* les lueurs restent dans leur cadre (aussi sur les anciens Safari, qui laissaient parfois déborder les coins arrondis) */
.lueurs { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
/* le texte passe toujours devant les lueurs */
.accroche > .conteneur, .page-titre > .conteneur, .bandeau > :not(.lueurs) { position: relative; z-index: 1; }
.lueurs span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .38; animation: flotte 18s ease-in-out infinite alternate; }
.lueurs span:nth-child(1) { width: 560px; height: 560px; left: -160px; top: 40px; background: var(--rouge); }
.lueurs span:nth-child(2) { width: 480px; height: 480px; right: -160px; bottom: -120px; background: var(--orange); animation-delay: -7s; }
@keyframes flotte { to { transform: translate(70px, 40px) scale(1.1); } }
.accroche .conteneur { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.accroche > .conteneur > * { min-width: 0; }
.devise { color: var(--accent-sombre); font-weight: 600; letter-spacing: 4px; text-transform: uppercase; font-size: .8rem; margin: 0 0 14px; }
.accroche h1 em { font-style: normal; background: var(--degrade) left bottom / 100% .15em no-repeat; padding-bottom: .04em; }
.chapeau { font-size: 1.15rem; color: var(--texte-doux-sombre); margin: 0 0 28px; max-width: 34ch; }
.promesses { display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; margin: 28px 0 0; padding: 0; color: var(--texte-doux-sombre); font-size: .9rem; }
.promesses li::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--degrade); margin-right: 8px; }

/* ---------- La maison interactive ---------- */
.maison .toit { display: block; width: 100%; height: auto; }
.pieces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 20px 20px; border: 6px solid var(--blanc); border-top: none; border-radius: 0 0 26px 26px; margin-top: -6px; }
.etage { grid-column: 1 / -1; height: 6px; background: var(--blanc); border-radius: 3px; margin: 0 -20px; }
.piece { position: relative; overflow: hidden; isolation: isolate; min-height: 128px; padding: 12px 6px; border-radius: 16px; border: 2px solid var(--trait-sombre); background: var(--carte-sombre); color: var(--blanc); font: inherit; font-size: .85rem; font-weight: 600; line-height: 1.3; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; transition: box-shadow .4s; }
.piece svg { width: 52px; height: 52px; fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.piece.rempli { border-color: transparent; box-shadow: 0 0 44px rgba(195, 107, 56, .5); }
.panneau { margin-top: 18px; padding: 18px 22px; border-radius: 20px; background: var(--carte-sombre); border: 2px solid var(--trait-sombre); min-height: 264px; }
.panneau h3 { font-size: 1.15rem; }
.panneau .etiquette { margin: 12px 0 2px; color: var(--accent-sombre); font-size: .8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.panneau ul { margin: 0; padding-left: 22px; font-size: .92rem; }
.maison .astuce { font-size: .85rem; color: var(--texte-doux-sombre); margin: 12px 0 0; }

/* ---------- L'effet du lien d'inspiration : la couleur entre par où arrive la main ---------- */
.piece::before, .deverse::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: var(--degrade); -webkit-clip-path: circle(0% at var(--x, 50%) var(--y, 50%)); clip-path: circle(0% at var(--x, 50%) var(--y, 50%)); transition: clip-path .7s cubic-bezier(.2, .7, .2, 1), -webkit-clip-path .7s cubic-bezier(.2, .7, .2, 1); }
.piece.rempli::before, .deverse.rempli::before { -webkit-clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); }

/* ---------- Les cartes claires ---------- */
.grille { display: grid; gap: 20px; }
.grille-2 { grid-template-columns: repeat(2, 1fr); }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-4 { grid-template-columns: repeat(4, 1fr); }
.carte { position: relative; overflow: hidden; isolation: isolate; padding: 26px; border-radius: 26px; background: var(--fond-doux); transition: color .3s; }
.section-douce .carte { background: var(--blanc); }
.carte p { color: var(--texte-doux); margin: 0; }
.carte.rempli, .carte.rempli p, .carte.rempli h3 { color: var(--blanc); }
.carte .numero { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--noir); color: var(--blanc); font-size: 1.3rem; font-weight: 800; margin-bottom: 14px; }
.carte .icone { width: 56px; height: 56px; fill: none; stroke: var(--rouge); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 12px; transition: stroke .3s; }
.carte.rempli .icone { stroke: var(--blanc); }
.note { font-size: .85rem; color: var(--texte-doux); margin-top: 18px; }

/* ---------- La maison en liste simple ---------- */
.liste-pieces { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.liste-pieces article { background: var(--fond-doux); border-radius: 22px; padding: 22px 26px; border-left: 6px solid var(--orange); }
.section-douce .liste-pieces article { background: var(--blanc); }
.liste-pieces h3 { margin-bottom: 4px; }
.liste-pieces .etiquette { margin: 10px 0 2px; color: var(--rouge); font-size: .8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.liste-pieces ul { margin: 0; padding-left: 22px; }

/* ---------- Le bandeau du test ---------- */
.bandeau { position: relative; overflow: hidden; isolation: isolate; border-radius: 32px; padding: 48px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; }
.bandeau .lueurs span { opacity: .3; }

/* ---------- Le matériel (aperçu) ---------- */
.materiel-apercu { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.materiel-apercu li { background: var(--fond-doux); border-radius: 18px; padding: 16px; font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: 12px; }
.materiel-apercu svg { flex: none; width: 40px; height: 40px; fill: none; stroke: var(--rouge); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Le contact et le bas de page ---------- */
.appel { text-align: center; }
.grand-numero { display: inline-block; font-size: 2.6rem; font-weight: 800; letter-spacing: 1px; text-decoration: none; margin: 6px 0 4px; }
.pied { padding: 48px 0 40px; border-top: 1px solid #2C2220; font-size: .9rem; color: var(--texte-doux-sombre); }
.pied .conteneur { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; }
.pied h2 { font-size: 1rem; color: var(--blanc); margin-bottom: 10px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li a { display: inline-flex; min-height: 44px; align-items: center; }
.pied .numero-pied { font-size: 1.4rem; font-weight: 800; color: var(--blanc); text-decoration: none; }
.pied-intro { margin-top: 14px; }

/* ---------- Petits réglages de mise en page (ils remplacent les styles écrits dans les pages,
   pour que la règle de sécurité du site puisse interdire tout style venu d'ailleurs) ---------- */
.intro-centre { margin: 0 auto 28px; }
.boutons-centre { justify-content: center; }
.aligne-centre { align-items: center; }
.sans-marge-haut, .texte .sans-marge-haut { margin-top: 0; }
.marge-haut { margin-top: 28px; }
.marge-haut-large { margin-top: 40px; }
.titre-carte, .carte .titre-carte { font-size: 1.2rem; }
.carte .courriel-contact { font-size: 1.1rem; font-weight: 700; margin: 14px 0; }

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 62.5em) {
  h1 { font-size: 2.3rem; }
  .accroche .conteneur, .bandeau { grid-template-columns: 1fr; }
  .grille-3, .grille-4, .materiel-apercu { grid-template-columns: repeat(2, 1fr); }
  .pied .conteneur { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 43.75em) {
  /* 80 px : la taille minimale du logo demandée par la charte */
  .marque img { width: 80px; }
  .marque, .marque-texte { min-width: 0; }
  /* le nom ne devient jamais plus large que l'écran, même avec un très grand texte */
  .marque-nom { font-size: 1.35rem; font-size: min(1.35rem, 8.5vw); }
  .entete .bouton, .barre-menu .bouton { width: 100%; }
  .menu a { padding: 0 10px; font-size: .85rem; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  .accroche { padding: 36px 0 48px; }
  .boutons .bouton { width: 100%; }
  .section { padding: 56px 0; }
  .grille-2, .grille-3, .grille-4, .liste-pieces, .materiel-apercu, .pied .conteneur { grid-template-columns: 1fr; }
  .pieces { grid-template-columns: repeat(2, 1fr); padding: 0 12px 12px; }
  .etage { display: none; }
  .bandeau { padding: 32px 22px; }
  .grand-numero { font-size: 1.9rem; }
}

/* ---------- Pour ceux qui ont demandé moins d'animations ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lueurs span { animation: none; }
  .piece::before, .deverse::before, .bouton, .piece, .carte { transition: none; }
  .bouton:hover { transform: none; }
}

/* =========================================================
   Les pages intérieures
   ========================================================= */
.page-titre { position: relative; overflow: hidden; isolation: isolate; padding: 56px 0 48px; }
.page-titre .lueurs span { opacity: .3; }
.page-titre h1 { font-size: 2.5rem; max-width: 22ch; }
.texte { max-width: 760px; }
.texte h2 { font-size: 1.5rem; margin-top: 1.6em; }
.texte ul { padding-left: 24px; }
.texte li { margin-bottom: .4em; }
.encadre { background: var(--fond-doux); border-left: 6px solid var(--orange); border-radius: 0 22px 22px 0; padding: 22px 26px; margin: 28px 0; }
.encadre p:last-child { margin-bottom: 0; }
.a-completer { background: #FFF1B8; color: var(--noir); padding: 0 6px; border-radius: 6px; font-weight: 600; }

/* ----- Le matériel ----- */
.produits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.produit { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; }
.produit .illustration { width: 96px; height: 96px; border-radius: 24px; background: var(--blanc); display: grid; place-items: center; }
.produit .illustration svg { width: 60px; height: 60px; fill: none; stroke: var(--rouge); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.produit.rempli .illustration { background: rgba(255, 255, 255, .15); }
.produit.rempli .illustration svg { stroke: var(--blanc); }
.produit h3 { margin-bottom: 4px; }

/* ----- Le test ----- */
.test { max-width: 760px; }
.question { border: none; margin: 0 0 18px; padding: 22px 24px; background: var(--fond-doux); border-radius: 22px; }
.question legend { font-weight: 700; font-size: 1.05rem; padding: 0; margin-bottom: 12px; float: left; width: 100%; }
.question .choix { clear: both; display: flex; gap: 12px; flex-wrap: wrap; }
.question label { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px; border-radius: 999px; background: var(--blanc); border: 3px solid var(--trait); font-weight: 600; cursor: pointer; }
.question input { width: 26px; height: 26px; accent-color: var(--rouge); margin: 0; }
/* la réponse choisie est entourée de rouge (la classe « choisi » est posée par le script, pour tous les navigateurs) */
.question label.choisi { border-color: var(--rouge); }
.question label:has(input:checked) { border-color: var(--rouge); }
.question label:has(input:focus-visible) { outline: 4px solid var(--rouge); outline-offset: 3px; }
.resultat { margin-top: 28px; padding: 30px; border-radius: 26px; }
.resultat[hidden] { display: none; }
.resultat h2 { font-size: 1.6rem; }
.resultat ul { padding-left: 24px; }
.erreur { color: var(--rouge); font-weight: 700; }

/* ----- Le contact ----- */
.contact-cartes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.contact-cartes .carte { text-align: center; padding: 34px 26px; }
.contact-cartes .grand-numero { color: var(--noir); font-size: 2.2rem; }
.contact-cartes .carte.rempli .grand-numero, .contact-cartes .carte.rempli a { color: var(--blanc); }

@media (max-width: 62.5em) { .produits { grid-template-columns: 1fr; } }
@media (max-width: 43.75em) {
  .page-titre { padding: 36px 0 32px; }
  .page-titre h1 { font-size: 1.75rem; }
  .produit { grid-template-columns: 72px 1fr; gap: 14px; }
  .produit .illustration { width: 72px; height: 72px; }
  .produit .illustration svg { width: 46px; height: 46px; }
  .contact-cartes { grid-template-columns: 1fr; }
  .contact-cartes .grand-numero { font-size: 1.7rem; }
}

/* =========================================================
   Les derniers réglages pour téléphone et tablette
   (placés à la fin pour passer avant les règles du dessus)
   ========================================================= */
/* Les mots ne sont jamais coupés par un tiret (plus facile à lire) : un mot passe entier à la ligne.
   Seul un mot plus large que l'écran est coupé, pour ne pas dépasser. */
h1, h2, h3, .piece, .carte p { overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual; }

/* Le menu sur téléphone : des cases bien rangées, toutes de la même taille */
@media (max-width: 43.75em) {
  .barre-menu .conteneur { display: block; padding-top: 10px; padding-bottom: 10px; }
  .menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .menu a { display: flex; justify-content: center; text-align: center; line-height: 1.2; width: 100%; padding: 4px 6px; background: var(--carte-sombre); border: 1px solid var(--trait-sombre); }
  .barre-menu .bouton { margin-top: 10px; }
}
@media (max-width: 22.5em) { .menu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Sur tablette : le menu et le numéro, bien centrés */
@media (min-width: 43.8125em) and (max-width: 68.6875em) {
  .barre-menu .conteneur, .menu { justify-content: center; }
}
@media (max-width: 37.5em) { .grand-texte .menu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Avec « Agrandir le texte », 4 colonnes deviennent trop étroites : on passe à 2 */
@media (max-width: 80em) {
  .grand-texte .grille-4, .grand-texte .materiel-apercu { grid-template-columns: repeat(2, 1fr); }
}

/* Les tout petits téléphones (320 à 400 px de large) */
@media (max-width: 25em) {
  .conteneur { padding: 0 18px; }
  h1, .page-titre h1 { font-size: 1.5rem; }
  h2 { font-size: 1.35rem; }
  .grand-numero, .contact-cartes .grand-numero { font-size: 1.6rem; }
  .bouton { padding-left: 18px; padding-right: 18px; }
  .carte { padding: 22px 20px; }
  /* le matériel : le dessin passe au-dessus du texte */
  .produit { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* la maison : un peu plus de place pour le nom des pièces */
  .pieces { gap: 8px; padding: 0 8px 8px; }
  .piece { padding: 12px 4px; font-size: min(.85rem, 6vw); word-break: break-word; overflow-wrap: anywhere; }
}
@media (max-width: 25em) {
  .grand-texte .piece { font-size: .78rem; font-size: min(.78rem, 6vw); }
  .grand-texte .grille-4, .grand-texte .materiel-apercu { grid-template-columns: 1fr; }
}

/* =========================================================
   Les tablettes et téléphones plus anciens
   Certains (par exemple un iPad qui n'a plus de mises à jour depuis 2020)
   ne savent pas espacer tout seuls les boutons et les éléments côte à côte.
   Le script le détecte et ajoute « sans-gap » : ces marges prennent alors le relais.
   ========================================================= */
.sans-gap .boutons { margin-left: -7px; margin-right: -7px; margin-bottom: -14px; }
.sans-gap .boutons > * { margin: 0 7px 14px; }
.sans-gap .entete .conteneur > * { margin-top: 7px; margin-bottom: 7px; }
.sans-gap .marque img { margin-right: 14px; }
.sans-gap .promesses li { margin: 0 24px 10px 0; }
.sans-gap .piece svg { margin-bottom: 8px; }
.sans-gap .materiel-apercu svg { margin-right: 12px; }
.sans-gap .question .choix { margin-bottom: -12px; }
.sans-gap .question .choix label { margin: 0 12px 12px 0; }
.sans-gap .question input { margin-right: 10px; }
@media (min-width: 43.8125em) {
  .sans-gap .barre-menu .conteneur > * { margin: 4px 9px; }
  .sans-gap .menu > li { margin: 1px; }
}
/* sur téléphone, les boutons prennent toute la largeur : seulement un espace en dessous */
@media (max-width: 43.75em) {
  .sans-gap .boutons { margin-left: 0; margin-right: 0; }
  .sans-gap .boutons > * { margin-left: 0; margin-right: 0; }
}