/* ============================================================
   Configurateur de bidons T.A. — styles du plugin
   ------------------------------------------------------------
   Autonome : chaque variable a un repli sur la charte T.A., donc
   le configurateur reste presentable sur n'importe quel theme.
   Un theme qui definit ces variables reprend la main.
   ============================================================ */

.config [hidden],.devis [hidden]{display:none!important}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--corps, 'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);font-weight:700;font-size:.96rem;
  padding:13px 22px;border-radius:var(--r, 3px);border:1.5px solid transparent;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s;
  text-decoration:none!important;line-height:1.2;
}
.btn--plein{background:var(--marine, #1F4E79);color:#fff}
.btn--plein:hover{background:var(--marine-fonce, #173B5C)}
.btn--vif{background:var(--bleu, #2E74B5);color:#fff}
.btn--vif:hover{background:var(--marine, #1F4E79)}
.btn--contour{background:transparent;color:var(--marine, #1F4E79);border-color:var(--gris-3, #C9D2DE)}
.btn--contour:hover{border-color:var(--bleu, #2E74B5);background:var(--bleu, #2E74B5);color:#fff}
.section--nuit .btn--contour,
.hero .btn--contour,
.ruban .btn--contour,
.page-tete .btn--contour,
.carte--sombre .btn--contour{color:#fff;border-color:rgba(255,255,255,.38)}
.section--nuit .btn--contour:hover,
.hero .btn--contour:hover,
.ruban .btn--contour:hover,
.page-tete .btn--contour:hover,
.carte--sombre .btn--contour:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn--blanc{background:#fff;color:var(--marine, #1F4E79)}
.btn--blanc:hover{background:var(--bleu, #2E74B5);color:#fff}
.btn[disabled]{opacity:.45;cursor:not-allowed}


/* ---------- nuancier ---------- */
.nuancier{display:flex;flex-wrap:wrap;gap:10px}
.teinte{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--texte-2, #586A7C);
  border:1px solid var(--gris-2, #E4E9F0);border-radius:var(--r, 3px);padding:6px 11px 6px 7px;background:#fff}
.pastille{
  width:19px;height:19px;border-radius:50%;flex:0 0 19px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);
}
.pastille--translucide{position:relative;overflow:hidden}
.pastille--translucide::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.75) 0 45%,rgba(255,255,255,0) 45%);
}


/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--gris-2, #E4E9F0)}
.faq details{border-bottom:1px solid var(--gris-2, #E4E9F0)}
.faq summary{
  cursor:pointer;padding:20px 40px 20px 0;font-family:var(--gout, 'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);font-weight:800;
  font-size:1.04rem;position:relative;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';position:absolute;right:6px;top:17px;font-size:1.5rem;font-weight:400;
  color:var(--bleu, #2E74B5);font-family:var(--corps, 'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);transition:transform .18s;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq__rep{padding:0 40px 20px 0;color:var(--texte-2, #586A7C);font-size:.98rem}
.faq .faq__rep p:last-child{margin-bottom:0}


/* ---------- formulaire ---------- */
.champ{margin-bottom:18px}
.champ label{display:block;font-weight:600;font-size:.91rem;margin-bottom:6px}
.champ .aide{font-weight:400;color:var(--texte-2, #586A7C);font-size:.85rem}
.champ input,.champ select,.champ textarea{
  width:100%;padding:11px 13px;border:1px solid var(--gris-3, #C9D2DE);border-radius:var(--r, 3px);
  font-family:var(--corps, 'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);font-size:.97rem;background:#fff;color:var(--texte, #1B2430);
}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:2px solid var(--bleu, #2E74B5);outline-offset:-1px;border-color:var(--bleu, #2E74B5);
}
.champ textarea{min-height:120px;resize:vertical}
.champs-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}


/* ============================================================
   CONFIGURATEUR
   ============================================================ */
/* Deux blocs de meme largeur, droite et gauche (Remy, 03/09/2026) : la vue
   du bidon ne gagne rien a etre etriquee, et les etapes respirent mieux. */
.config{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start}
/*
 * La colonne de gauche reste collee en haut, mais bornee a la hauteur de
 * l'ecran : la vue, ses commandes et le debut du recapitulatif tiennent
 * dedans, le reste s'atteint en faisant defiler la colonne. Sans cette
 * borne elle faisait 1 400 px et debordait de tous les ecrans.
 */
.config__scene{
  position:sticky;top:92px;
  max-height:calc(100vh - 104px);overflow-y:auto;scrollbar-width:thin;
}
/*
 * LE FOND DE LA SCÈNE
 *
 * L'ancien empilait trois dégradés — deux radiaux et une diagonale gris-bleu
 * de #F8FAFD à #DAE2EC. Trois sources de lumière qui ne se recoupaient pas,
 * un coin plus sombre que l'autre, et l'aspect d'un fond de boutique en
 * ligne des années 2010.
 *
 * Ici : un seul plan clair et neutre, et une seule lumière — douce, venue
 * d'en haut, centrée sur le bidon. Le sol se distingue du mur par une
 * nuance, pas par un trait ; l'ombre de contact est portée par le bidon
 * lui-même (voir #vue), courte et proche, plutôt que par un halo diffus.
 * C'est un studio, pas un dégradé.
 */
.scene{
  position:relative;
  background:#FFFFFF;
  border:1px solid var(--gris-2, #E4E9F0);
  border-radius:var(--r, 3px);padding:14px 14px 12px;text-align:center;
}
/*
 * LE CADRE, ET LA TOILE DEDANS
 *
 * La toile est dessinée à la hauteur du plus grand modèle. Le PRO n'en
 * occupait que 77 % : un quart de vide au-dessus de lui, et un bidon qui
 * paraissait trapu dans son cadre alors que ses proportions sont justes au
 * millimètre — 198 mm contre 195 au BAT, quand le configurateur de T.A.
 * en dessine 186.
 *
 * Le cadre se rogne donc sur le bidon réellement dessiné. --utile est la
 * part de la toile qu'il occupe (0,770 au PRO, 0,992 au MAX) ; la toile est
 * agrandie d'autant et calée sur le bas — les deux bidons sont posés sur le
 * culot, en bas de l'image —, et le vide est coupé par le haut. Chaque
 * modèle remplit sa vue.
 *
 * La toile se dimensionne par sa HAUTEUR : c'est elle qui doit tenir dans
 * l'écran, la scène étant collante. « width:auto » déduit la largeur du
 * rapport de la toile, donc le bidon garde ses proportions quelle que soit
 * la fenêtre.
 */
.scene__cadre{
  /* L'air laissé sous le culot : la place de l'ombre de contact. Sans
     elle, le bidon était coupé net par le bas du cadre. */
  --socle: 24px;
  /*
   * L'AIR AUTOUR DU BIDON (Rémy, 04/09/2026 : « rajoute un peu d'espace
   * dans la vue 2D pour le max »). Le MAX touchait le haut et le bas de son
   * cadre : il n'était pas coupé, mais il étouffait.
   *
   * ⚠ C'est un facteur, pas une marge — et c'est ce qui GARDE LES
   * PROPORTIONS. Il réduit le dessin des deux modèles de la même quantité,
   * après le rognage commun : le PRO continue d'occuper 77,6 % de la
   * hauteur du MAX, son rapport réel. Une marge en pixels, elle, aurait
   * rongé une part différente sur chacun.
   */
  --air: .90;
  --sol: 88%;                        /* l'horizon, un peu sous le culot */
  position:relative;overflow:hidden;
  height:clamp(320px, 54vh, 580px);
  border-radius:calc(var(--r, 3px) - 1px);
  background:
    /* une seule lumière, haute et large */
    radial-gradient(78% 46% at 50% 4%,
      rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 74%),
    /* le sol, distingué du mur par une nuance, pas par un trait */
    linear-gradient(#EFF3F8 0%, #EDF1F7 var(--sol), #E2E8F1 100%);
}
#vue{
  position:absolute;left:50%;bottom:var(--socle);transform:translateX(-50%);
  height:calc((100% - var(--socle)) / var(--utile, 1) * var(--air, 1));
  width:auto;max-width:none;display:block;
  /* Une ombre de contact, courte et proche : le bidon touche le sol. */
  filter:drop-shadow(0 9px 10px rgba(27,36,48,.19))
         drop-shadow(0 2px 2px rgba(27,36,48,.13));
  touch-action:none;
}
/* ---------- curseur de rotation ----------
   Un vrai curseur plutot qu'un « glissez sur le bidon » que personne ne lit.
   Les crans de 10 degres viennent du pas de l'input, pas du script. */
.rotation{
  display:flex;align-items:center;gap:12px;margin:18px auto 0;max-width:340px;
}
.rotation__titre{
  font-family:var(--mono, ui-monospace,monospace);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texte-2, #586A7C);white-space:nowrap;
}
.rotation__valeur{
  font-family:var(--mono, ui-monospace,monospace);font-size:.82rem;font-variant-numeric:tabular-nums;
  color:var(--marine, #1F4E79);min-width:3.4em;text-align:right;
}
.rotation__curseur{
  flex:1;-webkit-appearance:none;appearance:none;background:transparent;height:22px;margin:0;cursor:pointer;
}
.rotation__curseur:focus-visible{outline:2px solid var(--bleu, #2E74B5);outline-offset:3px;border-radius:3px}
.rotation__curseur::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;background:var(--gris-2, #E4E9F0);
}
.rotation__curseur::-moz-range-track{height:4px;border-radius:2px;background:var(--gris-2, #E4E9F0)}
.rotation__curseur::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;margin-top:-7px;
  background:var(--bleu, #2E74B5);border:2px solid #fff;box-shadow:0 1px 4px rgba(27,36,48,.35);
}
.rotation__curseur::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;border:2px solid #fff;background:var(--bleu, #2E74B5);
  box-shadow:0 1px 4px rgba(27,36,48,.35);
}
@media (max-width:480px){.rotation__titre{display:none}}
.scene__vides{display:flex;justify-content:center;gap:7px;margin-top:12px}
.vue-btn{
  font-family:var(--mono, ui-monospace,monospace);font-size:.72rem;letter-spacing:.06em;padding:6px 12px;
  border:1px solid var(--gris-3, #C9D2DE);background:#fff;border-radius:var(--r, 3px);cursor:pointer;color:var(--texte-2, #586A7C);
  transition:border-color .14s,background .14s,color .14s;
}
.vue-btn:hover{border-color:var(--bleu, #2E74B5);background:#EDF4FB;color:var(--marine, #1F4E79)}
.vue-btn[aria-pressed="true"]{background:var(--marine, #1F4E79);border-color:var(--marine, #1F4E79);color:#fff}
.vue-btn--tour{display:inline-flex;align-items:center;gap:6px;padding-left:9px}
.vue-btn--tour svg{width:14px;height:14px;flex:none}
.vue-btn--tour.est-actif{
  background:var(--bleu, #2E74B5);border-color:var(--bleu, #2E74B5);color:#fff;
}
.vue-btn--tour.est-actif svg{animation:bp-tourne 2s linear 2}
@keyframes bp-tourne{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  /* Sans animation, le bouton n'a plus d'objet. */
  .vue-btn--tour{display:none}
  .vue-btn--tour.est-actif svg{animation:none}
}
.scene__aide{font-size:.78rem;line-height:1.45;color:var(--texte-2, #586A7C);margin:10px 0 0}
.scene__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.scene__actions .btn{flex:1 1 46%;justify-content:center;padding:10px 12px;font-size:.85rem;text-align:center}
/* le bouton de devis garde sa ligne : c'est l'action principale */
.scene__actions .btn--vif{flex-basis:100%}

.recap{margin-top:18px;border:1px solid var(--gris-2, #E4E9F0);border-radius:var(--r, 3px);background:#fff;padding:20px}
.recap h3{font-size:1rem;margin-bottom:14px}
.recap dl{margin:0;font-size:.9rem}
.recap dl div{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px dashed var(--gris-2, #E4E9F0)}
.recap dl div:last-child{border-bottom:0}
.recap dt{color:var(--texte-2, #586A7C)}
.recap dd{margin:0;font-weight:600;text-align:right}


/* Les etapes etaient trop aerees : on resserre le pas vertical sans toucher
   a la lisibilite des intitules. */
/* Le modele et la collerette cote a cote : deux choix binaires qui
   prenaient deux ecrans a eux seuls. Le filet vertical remplace le filet
   horizontal qui les separait. */
.etapes-paire{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
.etapes-paire .etape-config{padding-top:0;border-top:0}
.etapes-paire .etape-config + .etape-config{border-left:1px solid var(--gris-2, #E4E9F0);padding-left:30px}
/* Les deux colonnes portent la meme suite — titre, aide, choix, note — mais
   pas des textes de meme longueur : on reserve deux lignes a l'aide pour que
   les cases tombent a la meme hauteur. */
.etapes-paire .etape-config__aide{min-height:2.7em}
@media (max-width:900px){.etapes-paire .etape-config__aide{min-height:0}}
.etapes-paire .choix label{padding:9px 6px}
.etapes-paire .choix b{font-size:.9rem}
/* Entre 900 et 1200 px les deux colonnes sont a l'etroit : « MAX 800 ml »
   frole le bord. On resserre le corps plutot que de laisser le mot
   deborder de la pastille. */
@media (max-width:1200px){.etapes-paire .choix b{font-size:.86rem}}
.etapes-paire .choix small{font-size:.78rem}
@media (max-width:900px){
  .etapes-paire{grid-template-columns:1fr;gap:0}
  .etapes-paire .etape-config + .etape-config{
    border-left:0;padding-left:0;border-top:1px solid var(--gris-2, #E4E9F0);padding-top:18px;
  }
}
.etape-config{border-top:1px solid var(--gris-2, #E4E9F0);padding:16px 0}
.etape-config:first-child{border-top:0;padding-top:0}
.etape-config__tete{display:flex;align-items:baseline;gap:10px;margin-bottom:7px}
.etape-config__num{font-family:var(--mono, ui-monospace,monospace);font-size:.75rem;color:var(--bleu, #2E74B5)}
.etape-config h2{font-size:1.2rem;margin:0}
.etape-config__aide{font-size:.88rem;line-height:1.4;color:var(--texte-2, #586A7C);margin:-2px 0 10px}
/* ---------- les deux choix binaires : le bouton segmente de la 3D ----------
   Meme objet que la bascule PRO/MAX du simulateur (.simu3d .onglets) : un
   etui clair aux bords ronds, le cote actif en pastille marine sur texte
   blanc. L'etui prend TOUTE la largeur du bloc : ses deux bords tombent
   d'aplomb sur le titre au-dessus et sur la note en dessous.
   Pas de « pouce » glissant ici — sans JS, input:checked+label suffit et
   donne exactement le meme dessin. */
.choix{
  position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:0;width:100%;
  margin-bottom:30px;padding:3px;background:#fff;
  border:1px solid var(--gris-2, #E4E9F0);border-radius:999px;
}
.choix:focus-within{box-shadow:0 0 0 3px rgba(46,116,181,.22)}
.choix input{position:absolute;opacity:0;pointer-events:none}
.choix label{
  display:flex;align-items:center;justify-content:center;
  padding:9px 10px;border-radius:999px;text-align:center;cursor:pointer;
  white-space:nowrap;color:var(--texte-2, #586A7C);transition:background .2s,color .2s;
}
.choix label:hover{color:var(--bleu, #2E74B5)}
.choix input:checked+label{background:var(--marine, #1F4E79);color:#fff}
.choix input:focus-visible+label{outline:2px solid var(--bleu, #2E74B5);outline-offset:2px}
.choix b{
  font-family:var(--gout, 'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);
  font-size:.95rem;font-weight:600;line-height:1.2;
}
/* La legende ne tient pas DANS la pastille : deux lignes de plus et le
   bouton devient un oeuf. Elle se pose sous l'etui, centree, et seule
   celle du cote actif s'affiche — d'ou le positionnement absolu. */
.choix small{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  font-size:.8rem;line-height:1.3;text-align:center;color:var(--texte-2, #586A7C);
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.choix input:checked+label small{opacity:1}

.swatches{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- le nuancier du corps, en deux familles ----------
   Les opaques d'abord, les translucides ensuite, chacune sous son intitule
   (Remy, 03/09/2026, proposition A). Dix-neuf teintes dont onze
   translucides : sans ce partage, l'oeil ne savait plus ou il en etait.
   Les autres pieces gardent une seule rangee — la collerette n'a qu'une
   teinte translucide sur dix, un intitule pour une pastille ferait plus de
   bruit que de service.
   /!\ Regle presente dans configurateur.css ET dans style.css, chargee
   apres : les deux doivent rester identiques. */
.nuance-titre{
  display:block;margin:14px 0 8px;
  font-family:var(--mono, ui-monospace,monospace);font-size:.72rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gris-3, #C9D2DE);
}
.nuance-titre:first-child{margin-top:0}

.swatch{position:relative;line-height:0}
.swatch input{position:absolute;opacity:0;pointer-events:none}
.swatch label{
  /* flex et non block : la pastille est un span inline, ses dimensions
     seraient ignorees dans un conteneur en flux normal. */
  display:flex;border:2px solid transparent;border-radius:50%;padding:2px;cursor:pointer;
  transition:border-color .14s;
}
.swatch label:hover{border-color:var(--gris-3, #C9D2DE)}
.swatch input:checked+label{border-color:var(--marine, #1F4E79)}
.swatch input:focus-visible+label{outline:2px solid var(--bleu, #2E74B5);outline-offset:2px}

/* ---------- choix des teintes : une ligne par piece ----------
   Quatre nuanciers ouverts en permanence prenaient trois ecrans de haut.
   La ligne rappelle la teinte retenue, la palette s'ouvre a la demande. */
/* Dans la palette la pastille est la seule cible : elle doit etre assez
   grosse pour se cliquer au doigt. Dans le rappel de ligne, elle reste
   petite, elle n'est la que pour situer la teinte. */
.piece__palette .pastille{width:28px;height:28px;flex:0 0 28px}
.pieces{margin-bottom:14px}
.piece{border:1px solid var(--gris-2, #E4E9F0);border-radius:var(--r, 3px);margin-bottom:6px;background:#fff}
.piece--ouverte{border-color:var(--marine, #1F4E79)}
.piece__tete{
  display:flex;align-items:center;gap:12px;width:100%;padding:9px 14px;
  background:none;border:0;cursor:pointer;text-align:left;font:inherit;
}
.piece__tete:hover{background:#F7FAFD}
.piece__tete:focus-visible{outline:2px solid var(--bleu, #2E74B5);outline-offset:-2px}
.piece__nom{font-family:var(--gout, 'Archivo',sans-serif);font-size:.9rem;color:var(--texte, #1B2430);flex:0 0 128px}
.piece__val{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.85rem;color:var(--texte-2, #586A7C);flex:1;min-width:0}

/* « Sélection actuelle : » — seulement palette ouverte (Remy, 03/09/2026).
   Fermee, la ligne dit la teinte retenue et n'a rien a nommer ; ouverte, la
   meme teinte est aussi cerclee dans le nuancier juste en dessous, et c'est
   ce doublon qu'il faut expliquer.
   /!\ Regle presente dans configurateur.css ET dans style.css. */
.piece__val-libelle{display:none}
/* white-space:nowrap : dans le panneau 3D, plus etroit, « SÉLECTION
   ACTUELLE » et son deux-points se retrouvaient l'un au-dessus de l'autre.
   La ligne entiere, elle, a le droit de passer a la ligne. */
.piece--ouverte .piece__val-libelle{
  display:inline;white-space:nowrap;font-family:var(--mono, ui-monospace,monospace);font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gris-3, #C9D2DE);
}
.piece__val-teinte{display:flex;align-items:center;gap:8px;min-width:0}

.piece__val b{font-weight:500;color:var(--texte, #1B2430);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.piece__act{
  font-family:var(--mono, ui-monospace,monospace);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bleu, #2E74B5);white-space:nowrap;
}
.piece__act-fermer{display:none}
.piece__tete[aria-expanded="true"] .piece__act-ouvrir{display:none}
.piece__tete[aria-expanded="true"] .piece__act-fermer{display:inline}
.piece__palette{padding:2px 14px 14px}
@media (max-width:520px){
  .piece__nom{flex-basis:100%;margin-bottom:2px}
  .piece__tete{flex-wrap:wrap;gap:8px}
}

.bloc-couleur{margin-bottom:16px}
.bloc-couleur h3{font-size:.95rem;margin-bottom:10px;display:flex;align-items:center;gap:9px}
.bloc-couleur h3 .etiquette{font-weight:400}

.depose{
  border:2px dashed var(--gris-3, #C9D2DE);border-radius:var(--r, 3px);padding:30px 22px;text-align:center;
  background:var(--gris, #F4F6F9);transition:border-color .14s,background .14s;cursor:pointer;
}
.depose:hover,.depose.survol{border-color:var(--bleu, #2E74B5);background:#EDF4FB}
.depose b{display:block;font-family:var(--gout, 'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);margin-bottom:5px}
.depose small{color:var(--texte-2, #586A7C);display:block;font-size:.86rem}
.depose input{display:none}
.fichier{
  display:flex;align-items:center;gap:14px;border:1px solid var(--gris-2, #E4E9F0);border-radius:var(--r, 3px);
  padding:12px 14px;margin-top:12px;background:#fff;
}
.fichier img{width:52px;height:52px;object-fit:contain;background:var(--gris, #F4F6F9);border-radius:2px;flex:0 0 52px}
.fichier__info{flex:1;min-width:0;font-size:.88rem}
.fichier__info b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fichier__info small{color:var(--texte-2, #586A7C)}
.fichier button{
  background:none;border:0;color:var(--alerte, #C4451C);cursor:pointer;font-size:.85rem;font-weight:600;
  font-family:var(--corps, 'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);padding:6px;
}

/* --- commande segmentee : nombre de couleurs d'impression --- */
.segmente{position:relative;display:inline-flex;border:1.5px solid var(--gris-2, #E4E9F0);border-radius:var(--r, 3px);overflow:hidden;background:#fff}
.segmente input{position:absolute;opacity:0;pointer-events:none}
.segmente label{
  display:block;min-width:46px;padding:9px 6px;text-align:center;cursor:pointer;
  font-family:var(--mono, 'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:.92rem;color:var(--texte-2, #586A7C);border-left:1px solid var(--gris-2, #E4E9F0);
  transition:background .14s,color .14s;
}
.segmente label:first-of-type{border-left:0}
.segmente label:hover{background:#EDF4FB;color:var(--marine, #1F4E79)}
.segmente input:checked+label{background:var(--marine, #1F4E79);color:#fff;font-weight:600}
.segmente input:focus-visible+label{outline:2px solid var(--bleu, #2E74B5);outline-offset:-2px}

/* --- encres : pastilles cliquables + une seule palette --- */
.encres-slots{display:flex;flex-wrap:wrap;gap:9px}
.encre-slot{
  display:flex;align-items:center;gap:9px;background:#fff;cursor:pointer;text-align:left;
  border:1.5px solid var(--gris-2, #E4E9F0);border-radius:var(--r, 3px);padding:6px 13px 6px 8px;
  font-family:var(--corps, 'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);
  transition:border-color .14s,background .14s;
}
.encre-slot:hover{border-color:var(--bleu, #2E74B5);background:#EDF4FB}
.encre-slot.est-actif{border-color:var(--marine, #1F4E79);background:#F4F8FC}
.encre-slot:focus-visible{outline:2px solid var(--bleu, #2E74B5);outline-offset:2px}
.encre-slot__txt{display:block;line-height:1.25}
.encre-slot__txt small{display:block;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--texte-2, #586A7C)}
.encre-slot__txt b{font-size:.85rem;color:var(--texte, #1B2430);font-weight:600}
.encres-palette{
  display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;padding:12px;
  border:1px solid var(--gris-2, #E4E9F0);border-radius:var(--r, 3px);background:var(--gris, #F4F6F9);
}
.encres-palette[hidden]{display:none}
.encre-choix{
  display:flex;align-items:center;gap:7px;background:#fff;cursor:pointer;
  border:1.5px solid var(--gris-2, #E4E9F0);border-radius:var(--r, 3px);padding:5px 11px 5px 6px;
  font-family:var(--corps, 'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);
  font-size:.83rem;color:var(--texte-2, #586A7C);transition:border-color .14s,color .14s;
}
.encre-choix:hover{border-color:var(--bleu, #2E74B5);background:#EDF4FB}
.encre-choix.est-pris{border-color:var(--marine, #1F4E79);color:var(--texte, #1B2430);font-weight:600;background:#F4F8FC}
/* Une teinte de collerette identique au corps ne se verrait pas : elle est
   RETIREE de la rangee. Elle etait barree, avec une bulle d'explication ;
   Remy, le 04/09/2026 : « ne pas faire apparaitre la teinte qui ne sert a
   rien ». Une case barree prend une place et appelle un clic pour rien. */
.swatch.est-cachee{display:none}
.swatch input:disabled + label,
.swatch label.est-indisponible{opacity:.3;cursor:not-allowed;filter:grayscale(.55)}
.swatch input:disabled + label:hover{transform:none}
.encre-choix.est-indisponible{
  opacity:.34;cursor:not-allowed;border-style:dashed;
}
.encre-choix.est-indisponible:hover{border-color:var(--gris-2, #E4E9F0);background:#fff}
.encre-choix:focus-visible{outline:2px solid var(--bleu, #2E74B5);outline-offset:2px}

.alerte{
  border-left:3px solid var(--bleu, #2E74B5);background:#EDF4FB;padding:14px 18px;border-radius:0 var(--r, 3px) var(--r, 3px) 0;
  font-size:.92rem;color:var(--texte-2, #586A7C);margin-top:18px;
}
.alerte b{color:var(--texte, #1B2430)}
.alerte--attention{border-left-color:var(--alerte, #C4451C);background:#FCF1ED}



/* ---------- mise en page propre a WordPress ---------- */
.recap__cta .btn{width:100%;justify-content:center}
.recap__note{font-size:.82rem;color:var(--texte-2, #586A7C);margin:12px 0 0}
.recap__visuel{
  display:block;max-width:120px;margin:0 auto 14px;
  background:var(--gris, #F4F6F9);border-radius:var(--r, 3px);
}
.recap--devis{margin:0 0 30px}
.etape-config__note{font-size:.85rem;color:var(--texte-2, #586A7C);margin-top:12px}
.champ--court{max-width:320px}
.champ__note{
  font-size:.85rem;color:var(--alerte, #C4451C);margin:8px 0 0;line-height:1.45;
}
.btn--large{width:100%;justify-content:center}
.faq__groupe{font-size:1.4rem;margin:40px 0 18px}
.faq__groupe:first-child{margin-top:0}
.nuancier-bloc{margin-bottom:34px}
.nuancier-bloc h3{margin-bottom:12px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.etiquette{
  display:inline-block;font-family:var(--mono, monospace);font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;background:#EAF2FA;color:var(--marine, #1F4E79);
  padding:5px 10px;border-radius:var(--r, 3px);font-weight:400;
}
.liste-check{list-style:none;padding:0;margin:0}
.liste-check li{position:relative;padding-left:28px;margin-bottom:11px}
.liste-check li::before{
  content:'';position:absolute;left:0;top:.5em;width:13px;height:7px;
  border-left:2px solid var(--ok, #00843D);border-bottom:2px solid var(--ok, #00843D);
  transform:rotate(-45deg);
}
.carte{
  background:#fff;border:1px solid var(--gris-2, #E4E9F0);border-radius:var(--r, 3px);padding:26px;
}
.carte--sombre{
  background:var(--nuit-2, #16202C);border-color:var(--nuit-3, #1E2A38);
  color:var(--texte-clair, #C6CDD6);
}
.carte--sombre h3{color:#fff}
.carte h3{margin-top:0}
/*
 * LE TITRE D'UNE CARTE N'EST PAS UN TITRE DE PAGE.
 *
 * « Ce qui accélère les choses » est écrit en <h2> — c'est le bon niveau
 * pour le plan du document — mais aucune règle ne le disait. Il retombait
 * donc sur la taille générale des h2, clamp(1.7rem, 3.6vw, 2.6rem), soit
 * 41 px dans une colonne de 290 : trois lignes de titre pour quatre lignes
 * de texte, et la colonne de droite écrasait le formulaire qu'elle
 * accompagne. Exactement la panne du pied de page, au même endroit du
 * raisonnement.
 *
 * Les deux sélecteurs sont là pour que le prochain changement de balise ne
 * refasse pas le coup.
 */
.carte h2,
.carte h4{font-size:1.22rem;line-height:1.22;margin:0 0 14px;letter-spacing:-.01em}
.carte--sombre h2,
.carte--sombre h4{color:#fff}
.alerte--info{border-left-color:var(--bleu, #2E74B5);background:#F1F6FC}
.alerte--ok{border-left-color:var(--ok, #00843D);background:#E9F5ED}
.devis{display:grid;grid-template-columns:1.4fr .9fr;gap:48px;align-items:start}
.devis__aside .carte + .carte{margin-top:26px}
.devis__mentions{font-size:.84rem;color:var(--texte-2, #586A7C);margin-top:18px}
/*
 * LE BLOC DE VÉRIFICATION (captcha Turnstile), 10/09/2026.
 * Le contrôle de Cloudflare mesure 300 x 65 px et se dessine dans un iframe :
 * on lui réserve sa hauteur pour que la page ne saute pas quand il arrive,
 * et on le laisse tel quel — il n'est pas habillable.
 */
.devis__verif{max-width:340px}
.devis__verif .cf-turnstile{min-height:65px}
@media (max-width:359px){
  .devis__verif .cf-turnstile{transform:scale(.92);transform-origin:0 0;min-height:60px}
}

.tacb-piege{position:absolute!important;left:-9999px!important;height:1px;overflow:hidden}

@media (max-width:1000px){
  .config{grid-template-columns:1fr;gap:34px}
  .config__scene{position:static}
  .devis{grid-template-columns:1fr;gap:32px}
}
@media (max-width:760px){
  .choix{grid-template-columns:1fr}
  .champs-2{grid-template-columns:1fr}
}

/* ---------- pages juridiques : CGV et mentions légales ----------
   Une seule présentation pour les deux pages, celle de la page Mentions
   légales de reparermaroue.fr (prise pour modèle le 03/09/2026) : deux
   colonnes de blocs, un titre de bloc sobre, le texte en gris, une ligne
   par point avec son intitulé en gras. Une page juridique se parcourt,
   elle ne se lit pas au fil de l'eau. */
.cgv__chapo{
  font-family:var(--mono, monospace);font-size:.78rem;letter-spacing:.08em;
  color:var(--texte-2, #586A7C);border-left:3px solid var(--bleu, #2E74B5);
  padding:10px 0 10px 16px;margin-bottom:30px;
}
.cgv__grille{display:grid;grid-template-columns:minmax(0,1fr);gap:0 56px}
@media (min-width:880px){
  .cgv__grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cgv__col>.cgv__bloc:first-child{border-top:0;padding-top:0}
}
.cgv__col:first-child>.cgv__bloc:first-child{border-top:0;padding-top:0}
.cgv__bloc{padding:18px 0 6px;border-top:1px solid var(--gris-2, #E4E9F0)}
.cgv__bloc h2{
  font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.25;letter-spacing:-.01em;
  color:var(--texte, #1B2430);margin:0 0 8px;max-width:none;
}
.cgv__bloc p,.cgv__bloc li{color:var(--texte-2, #586A7C);font-size:.95rem;line-height:1.5;max-width:none}
.cgv__bloc p{margin:0 0 10px}
.cgv__bloc ul{margin:0 0 10px;padding-left:18px}
.cgv__bloc li{margin-bottom:5px}
.cgv__bloc li b,.cgv__bloc p b{color:var(--texte, #1B2430);font-weight:600}
.cgv__bloc a{color:var(--marine, #1F4E79)}
/* La fiche d'identité de l'éditeur : un cadre, pour qu'on la trouve d'un
   coup d'œil au milieu du texte. */
.cgv__fiche{
  background:#fff;border:1px solid var(--gris-2, #E4E9F0);border-radius:4px;
  padding:12px 15px;color:var(--texte, #1B2430);
}
.cgv__fiche b{font-family:var(--gout, sans-serif);letter-spacing:.02em}
/* Le bloc court des conditions, repris sur le devis : intitulé à gauche,
   valeur à droite. */
.cgv__liste{margin:0}
.cgv__liste div{
  display:grid;grid-template-columns:200px 1fr;gap:20px;
  padding:8px 0;border-bottom:1px solid var(--gris-2, #E4E9F0);
}
.cgv__liste div:last-child{border-bottom:0}
.cgv__liste dt{font-weight:600;color:var(--marine, #1F4E79);font-size:.9rem;line-height:1.45}
.cgv__liste dd{margin:0;color:var(--texte-2, #586A7C);font-size:.92rem;line-height:1.45}
.cgv__liste--courte div{grid-template-columns:180px 1fr;padding:7px 0}
@media (max-width:700px){
  .cgv__liste div,.cgv__liste--courte div{grid-template-columns:1fr;gap:4px}
}

/* ---------- catalogue de la gamme standard ---------- */
.cat{margin-bottom:72px}
.cat:last-of-type{margin-bottom:48px}
.cat__tete{
  display:flex;align-items:flex-start;justify-content:space-between;gap:28px;
  flex-wrap:wrap;padding-bottom:20px;border-bottom:2px solid var(--marine, #1F4E79);
}
.cat__tete h2{margin:0 0 6px}
.cat__resume{color:var(--texte-2, #586A7C);margin:0;max-width:56ch}
.cat__prix{text-align:right;white-space:nowrap}
.cat__prix b{
  display:block;font-family:var(--gout, sans-serif);font-weight:800;font-size:1.9rem;
  line-height:1;color:var(--marine, #1F4E79);
}
.cat__prix span{
  font-family:var(--mono, monospace);font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--texte-2, #586A7C);
}
.cat__specs{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin:0 0 40px;padding:0;background:var(--gris-2, #E4E9F0);
  border:1px solid var(--gris-2, #E4E9F0);border-top:0;
}
.cat__specs li{background:#fff;padding:14px 18px}
.cat__specs span{
  display:block;font-family:var(--mono, monospace);font-size:.66rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--texte-2, #586A7C);margin-bottom:5px;
}
.cat__specs b{font-family:var(--gout, sans-serif);font-size:.98rem}

.cat__famille{margin-bottom:42px}
.cat__famille h3{margin-bottom:4px;font-size:1.08rem}
.cat__famille-desc{color:var(--texte-2, #586A7C);font-size:.93rem;margin-bottom:22px}

.cat__grille{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:20px;
}
.produit:hover{
  border-color:var(--gris-3, #C9D2DE);box-shadow:0 8px 22px rgba(27,36,48,.09);
  transform:translateY(-2px);
}
.produit__image{
  background:linear-gradient(170deg,#F8FAFD,#EAF0F6);border-radius:var(--r, 3px);
  padding:14px 10px;margin-bottom:14px;
}
.produit__image img{
  width:auto;height:150px;margin:0 auto;display:block;
  filter:drop-shadow(0 8px 12px rgba(27,36,48,.16));
}
.produit h4{
  font-size:.9rem;margin:0 0 6px;display:flex;align-items:center;justify-content:center;
  gap:7px;line-height:1.25;
}
.produit__prix{
  font-family:var(--gout, sans-serif);font-weight:800;font-size:.98rem;
  color:var(--marine, #1F4E79);margin:0;
}

.cat__pied{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--gris-2, #E4E9F0);padding-top:24px;
}
.cat__pied p{margin:0;color:var(--texte-2, #586A7C);font-size:.93rem;max-width:52ch}

/* éditions spéciales */
.editions__groupe{margin:34px 0 0}
.editions__groupe h3{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;font-size:1.02rem}
.editions__liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.edition{
  border:1px solid var(--gris-2, #E4E9F0);border-radius:var(--r, 3px);
  padding:16px 18px;background:#fff;
}
.edition__bande{display:flex;height:9px;border-radius:2px;overflow:hidden;margin-bottom:12px}
.edition__bande i{flex:1;display:block}
.edition b{display:block;font-family:var(--gout, sans-serif);font-size:.98rem;margin-bottom:3px}
.edition small{
  font-family:var(--mono, monospace);font-size:.68rem;color:var(--texte-2, #586A7C);
  word-break:break-all;
}

.cat__note{
  border-left:3px solid var(--gris-3, #C9D2DE);padding:12px 0 12px 18px;
  color:var(--texte-2, #586A7C);font-size:.86rem;margin:0;
}

@media (max-width:820px){
  .cat__specs{grid-template-columns:repeat(2,1fr)}
  .cat__prix{text-align:left}
  .cat__grille{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
  .produit__image img{height:120px}
}
.produit__desc{font-size:.82rem;color:var(--texte-2, #586A7C);margin:0 0 8px;line-height:1.4}

.note-prix{
  margin:26px 0 0;padding:13px 16px;font-size:.9rem;line-height:1.5;
  border-left:3px solid var(--bleu, #2E74B5);background:#F2F7FC;
  color:var(--texte-2, #586A7C);border-radius:0 var(--r, 3px) var(--r, 3px) 0;
}

/* ---------- galerie de réalisations ---------- */
.realisations{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:22px;margin:0;
}
.realisation{margin:0}
.realisation__image{
  background:linear-gradient(170deg,#F8FAFD,#E7EDF4);border-radius:var(--r, 3px);
  border:1px solid var(--gris-2, #E4E9F0);padding:20px 12px;margin-bottom:14px;
}
.realisation__image img{
  width:auto;height:210px;margin:0 auto;display:block;
  filter:drop-shadow(0 10px 16px rgba(27,36,48,.18));
}
.realisation figcaption b{
  display:block;font-family:var(--gout, sans-serif);font-weight:800;font-size:.98rem;
  margin-bottom:5px;line-height:1.25;
}
.realisation figcaption span{
  display:block;font-size:.86rem;color:var(--texte-2, #586A7C);line-height:1.45;
}
@media (max-width:760px){
  .realisations{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
  .realisation__image img{height:150px}
}
/*
 * Lignes partagées : image, nom, description tombent à la même hauteur dans
 * toutes les vignettes — même règle que les tuiles du thème.
 *
 * « Maison Mercier » tient sur une ligne, « Vélo Club de Sissonne » sur deux :
 * la description démarrait 19,6 px plus bas dans trois vignettes sur cinq, et
 * cela dans les six langues (relevé le 24/09/2026).
 *
 * figcaption passe en display:contents pour que le nom et la description
 * soient des cases de la grille et non le contenu d'une seule. Elle ne porte
 * aucun style propre — seuls ses enfants en ont —, la boîte ne manque donc à
 * personne.
 *
 * gap:0 sur la vignette : les 22 px du parent séparent deux rangs de
 * vignettes, pas l'image de son titre. L'écartement interne reste porté par
 * les marges (14 px sous l'image, 5 px sous le nom).
 */
@supports (grid-template-rows:subgrid){
  .realisations{grid-template-rows:repeat(3,auto)}
  .realisation{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:0}
  .realisation figcaption{display:contents}
}

/* ---------- gamme standard : catalogue photo ---------- */
.gamme-std__famille{margin:0 0 36px}
.gamme-std__famille h3{font-size:1.34rem;margin:0 0 4px}
.gamme-std__intro{color:var(--texte-2, #586A7C);font-size:.95rem;margin:0 0 14px}
/*
 * UNE SEULE LIGNE QUI GLISSE, par famille (Remy, 04/09/2026).
 *
 * La grille repliait : huit vignettes puis une neuvieme seule sur sa ligne.
 * Le defilement est celui du navigateur — d'ou le doigt, le pave tactile et
 * la molette inclinee sans une ligne de script ; gamme.js n'ajoute que les
 * deux fleches.
 *
 * scroll-snap aligne la vignette sur le bord gauche apres chaque saut : sans
 * lui on s'arretait au milieu d'une carte, et on ne savait plus si on l'avait
 * vue. scroll-padding tient compte du retrait qui laisse la place aux
 * fleches.
 */
.gamme-std__grille{
  display:flex;gap:14px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-left:2px;
  /* la carte qui depasse ne doit pas etre coupee net par le cadre */
  padding:4px 2px 12px;margin:0 -2px;
  scrollbar-width:thin;
}
/* Les vignettes gardent leur largeur : c'est ce qui fait la rangee. */
.gamme-std__grille > .produit{flex:0 0 168px;scroll-snap-align:start}
@media (max-width:600px){.gamme-std__grille > .produit{flex-basis:150px}}

/*
 * LES DEUX FLECHES. Posees SUR les bords de la rangee plutot qu'a cote :
 * a cote, elles volaient 96 px de largeur a chaque famille, soit une
 * vignette de moins visible sur un portable.
 */
.defil{position:relative}
.defil__fleche{
  position:absolute;top:calc(50% + 6px);transform:translateY(-50%);
  z-index:2;width:38px;height:38px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gris-2, #E4E9F0);border-radius:50%;
  background:#fff;color:var(--marine, #1F4E79);cursor:pointer;
  box-shadow:0 4px 16px rgba(20,40,70,.18);
  transition:background .15s,color .15s,border-color .15s,opacity .15s;
}
.defil__fleche svg{width:20px;height:20px}
.defil__fleche--gauche{left:-6px}
.defil__fleche--droite{right:-6px}
.defil__fleche:hover:not(:disabled),.defil__fleche:focus-visible:not(:disabled){
  background:var(--bleu, #2E74B5);border-color:var(--bleu, #2E74B5);color:#fff;
}
/* Eteinte au bout de la course : elle dit ou l'on en est. */
.defil__fleche:disabled{opacity:.28;cursor:default;box-shadow:none}
/* Famille assez courte pour tenir : pas de fleches du tout. */
.defil--inutile .defil__fleche{display:none}
/* Au doigt, la barre et le geste suffisent ; les fleches prendraient la
   place d'une vignette. */
@media (hover:none){.defil__fleche{display:none}}
.produit{
  background:#fff;border:1px solid var(--gris-2, #E4E9F0);border-radius:var(--r, 3px);padding:10px 10px 13px;
  text-align:center;transition:border-color .15s,box-shadow .15s,transform .15s;
}
.produit:hover{border-color:var(--bleu, #2E74B5);box-shadow:0 8px 26px rgba(46,116,181,.16);transform:translateY(-2px)}
.produit__photo{background:var(--gris, #F4F6F9);border-radius:2px;margin-bottom:8px}
.produit__photo img{width:100%;height:auto;display:block;mix-blend-mode:multiply}
.produit__nom{font-family:var(--gout, 'Archivo',sans-serif);font-size:.95rem;margin:0 0 4px;line-height:1.25}
.produit__ref{font-family:var(--mono, ui-monospace,monospace);font-size:.72rem;color:var(--texte-2, #586A7C);margin:0;letter-spacing:.02em}

/* Renvoi vers la fiche de la boutique T.A. : le nom devient un lien discret,
   le bouton d'achat n'apparait qu'au survol de la vignette (et toujours au
   clavier, sinon il serait inatteignable). */
.produit__nom a{color:inherit;text-decoration:none}
.produit__nom a:hover,.produit__nom a:focus-visible{color:var(--bleu, #2E74B5);text-decoration:underline}
.produit{display:flex;flex-direction:column}
.produit__achat{margin:auto 0 0;padding-top:10px}
/*
 * LE SÉLECTEUR DE CONTENANCE (Rémy, 06/09/2026, variante « curseur seul »).
 * Deux moitiés d'exactement la même largeur — c'est une grille 1fr 1fr, pas
 * deux boutons posés côte à côte — et la même hauteur partout. Un seul
 * format : une seule colonne, pleine largeur.
 */
.produit__tailles{
  display:grid;grid-template-columns:1fr 1fr;width:100%;
  border:1px solid rgba(46,116,181,.34);border-radius:2px;overflow:hidden;
}
.produit__tailles--seule{grid-template-columns:1fr}
.produit__taille{
  display:flex;align-items:center;justify-content:center;height:38px;
  font-family:var(--gout, 'Archivo',sans-serif);font-size:.72rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  /* Marine et non bleu : sur son propre fond bleute, le bleu tombait a
     4,42:1 pour un texte de 11,5 px. Le marine donne 7,8:1. */
  color:var(--marine, #1F4E79);background:rgba(46,116,181,.08);
  transition:background .15s,color .15s;
}
.produit__taille + .produit__taille{border-left:1px solid rgba(46,116,181,.34)}
.produit__taille:hover,.produit__taille:focus-visible{background:var(--bleu, #2E74B5);color:#fff}
.produit__achat--nc{font-size:.74rem;color:var(--texte-2, #586A7C);font-style:italic}
.gamme-std__note{font-size:.9rem;color:var(--texte-2, #586A7C);border-top:1px solid var(--gris-2, #E4E9F0);padding-top:20px}
.gamme-std__actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:600px){.gamme-std__grille{gap:12px}}

/* ---------- deux vues : produit / design ---------- */
/* ---------- le plan en grand ---------- */
.plan{position:relative}
.plan__loupe{
  position:absolute;top:10px;right:10px;z-index:2;
  font-family:var(--mono, ui-monospace,monospace);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 11px;border:1px solid var(--gris-3, #C9D2DE);background:rgba(255,255,255,.94);
  border-radius:var(--r, 3px);cursor:pointer;color:var(--texte-2, #586A7C);
}
.plan__loupe:hover{border-color:var(--bleu, #2E74B5);color:var(--marine, #1F4E79);background:#fff}
.plan__indice{margin-top:8px}
.loupe{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(11,15,23,.86);padding:24px;
}
.loupe__boite{position:relative;width:100%;max-width:1600px}
.loupe__boite canvas{display:block;width:100%;height:auto;background:#fff;border-radius:var(--r, 3px)}
.loupe__fermer{
  position:absolute;top:-14px;right:-14px;width:36px;height:36px;border-radius:50%;
  border:0;background:#fff;color:var(--marine, #1F4E79);font-size:1.5rem;line-height:1;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.loupe__fermer:hover{background:var(--bleu, #2E74B5);color:#fff}
body.loupe-ouverte{overflow:hidden}
@media (max-width:600px){
  .loupe{padding:14px}
  .loupe__fermer{top:-12px;right:-6px;width:32px;height:32px}
}

.vues-onglets{display:flex;gap:6px;margin-bottom:14px}
.vues-onglet{
  flex:1;padding:11px 10px;cursor:pointer;font-size:.88rem;font-weight:600;
  font-family:var(--corps, 'Public Sans',sans-serif);color:var(--texte-2, #586A7C);background:var(--gris, #F4F6F9);
  border:1.5px solid var(--gris-2, #E4E9F0);border-bottom-color:transparent;
  border-radius:var(--r, 3px) var(--r, 3px) 0 0;transition:background .14s,color .14s,border-color .14s;
}
.vues-onglet:hover{background:#EDF4FB;border-color:var(--bleu, #2E74B5);color:var(--marine, #1F4E79)}
.vues-onglet[aria-selected="true"]{
  background:#fff;color:var(--marine, #1F4E79);border-color:var(--gris-2, #E4E9F0);border-bottom-color:#fff;
  box-shadow:inset 0 3px 0 var(--bleu, #2E74B5);
}
.vues-onglet:focus-visible{outline:2px solid var(--bleu, #2E74B5);outline-offset:2px}
/* L'onglet « Vue 3D » : un lien vers le simulateur, en marine plein pour se
   voir a cote des deux vraies vues. Il ne prend pas la place d'un onglet
   (flex:0 0 auto) et ne porte pas le liseret bleu de l'onglet actif. */
/* ---------- le bouton « En savoir + » ----------
   La pastille des choix binaires, en plus petit : bords entierement ronds,
   fond bleu, texte blanc, et surtout peu haut — il ferme un paragraphe, il
   ne doit pas peser autant qu'un bouton d'action.

   Depuis le 04/09/2026 il n'est plus un lien mais un BOUTON : il ouvre la
   fiche par-dessus le configurateur au lieu d'emmener le client sur une
   autre page (Remy : « le clic fait sortir le client du configurateur »).
   D'ou le « cursor:pointer », qu'un <a> avait gratuitement. */
.savoir-plus{
  /* display:flex et non inline-flex : le bouton vit dans le paragraphe qu'il
     clôt, et en ligne il se collait à la fin du texte. En bloc, il passe
     toujours à la ligne, et fit-content l'empêche de s'étirer. */
  display:flex;width:fit-content;align-items:center;gap:5px;margin-top:10px;
  /* Le plus fin possible sans que le texte touche le bord (Remy,
     03/09/2026 : « encore plus fin ») : la hauteur tombe a 20 px. */
  padding:1px 11px;font-size:.75rem;font-weight:600;line-height:1.5;
  font-family:var(--corps, 'Public Sans',sans-serif);
  color:#fff;background:var(--bleu, #2E74B5);
  border:0;border-radius:999px;
  text-decoration:none;transition:background .14s;
}
.savoir-plus{cursor:pointer}
.savoir-plus:hover{background:var(--marine, #1F4E79);color:#fff}
.savoir-plus:focus-visible{outline:2px solid var(--bleu, #2E74B5);outline-offset:2px}
.savoir-plus svg{flex:0 0 auto;width:12px;height:12px}
.alerte .savoir-plus{background:var(--bleu, #2E74B5)}

/* ---------- la 3D dans le configurateur ----------
   Un cadre qui charge la page du simulateur en mode nu. Meme hauteur que la
   scene 2D d'a cote : on passe d'un onglet a l'autre sans que la page saute. */
.vue3d__cadre{
  position:relative;height:clamp(320px, 54vh, 580px);
  border:1px solid var(--gris-2, #E4E9F0);border-radius:var(--r, 3px);
  overflow:hidden;background:#fff;
}
.vue3d__cadre iframe{display:block;width:100%;height:100%;border:0}
.vue3d .scene__aide{margin-top:10px}

/* La 3D est un onglet comme les deux autres depuis qu'elle vit dans la page
   (03/09/2026) : elle en prend l'aspect, et garde le cube et la mention
   « beta ». Elle etait auparavant un lien vers une autre page, d'ou son
   fond plein — qui, au milieu de deux onglets, se lisait comme selectionne. */
.vues-onglet--3d{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  white-space:nowrap;text-decoration:none!important;
}
.vues-onglet--3d svg{flex:0 0 auto}
.vues-onglet__beta{
  font:600 .6rem/1 var(--mono, 'IBM Plex Mono',monospace);letter-spacing:.1em;text-transform:uppercase;
  padding:3px 5px 2px;border:1px solid currentColor;border-radius:3px;opacity:.62;
}
.vues-onglet[aria-selected="true"] .vues-onglet__beta{opacity:.8}
.plan{
  border:1px solid var(--gris-2, #E4E9F0);border-radius:0 0 var(--r, 3px) var(--r, 3px);background:#fff;
  padding:18px 16px 6px;text-align:center;
}
.plan canvas{width:100%;height:auto;display:block}

/* =========================================================================
   L'ATELIER DE DÉCOR
   -------------------------------------------------------------------------
   Rémy, 04/09/2026, placement « B » : l'atelier ne s'ouvre pas dans une
   colonne, il prend TOUTE la largeur. C'est ce qui fait passer la zone de
   230 mm de 12 à 30 cm à l'écran — la différence entre « on voit à peu près »
   et « on pose au millimètre ».

   Les classes sont préfixées `atl-` : elles n'existent que dans cette
   feuille, donc aucune ne risque d'être écrasée par la copie du thème.
   ========================================================================= */
.config--atelier > .config__scene,
.config--atelier > .config__panneau{display:none}

/*
 * ⚠ L'ATELIER SORT DE L'ENVELOPPE DU SITE.
 *
 * Les pages sont bornées à 1 200 px — la bonne largeur pour lire. Mais un
 * éditeur n'est pas une page : à 1 200, les trois colonnes ne laissaient que
 * 616 px à la zone, soit 2,7 px/mm. On déborde donc symétriquement, jusqu'à
 * 1 640 px ou 96 % de la fenêtre, ce qui rend la zone à 1 000 px (4,3 px/mm).
 *
 * Le calcul : la moitié du parent, moins la moitié de la largeur voulue. Pas
 * de `transform`, qui aurait cassé le `position:sticky` de la scène.
 */
.atelier{
  grid-column:1 / -1;
  width:min(1640px, 96vw);
  margin-left:calc(50% - min(820px, 48vw));
}

.atelier__tete{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;
  border-bottom:1px solid var(--gris-2, #E4E9F0);padding-bottom:14px;margin-bottom:20px;
}
.atelier__tete h2{margin:0;font-size:1.32rem}
.atelier__tete p{margin:0;flex:1 1 260px;color:var(--texte-2, #586A7C);font-size:.9rem}

/* La colonne des réglages est étroite et fixe : c'est la zone qui doit
   grandir, pas les boutons. */
/*
 * TROIS COLONNES — la disposition « A », retenue par Rémy le 04/09/2026 :
 * les outils à gauche, la zone au milieu, les réglages de l'élément à
 * droite. La colonne unique faisait 1 838 px de haut contre 988 à la scène :
 * on réglait la répétition en ayant perdu de vue ce qu'elle donnait.
 *
 * La colonne de droite n'existe QUE si un élément est choisi — c'est un
 * `:has()` qui le décide, sans une ligne de script. Sans sélection, la
 * grille revient à deux colonnes et la zone récupère la place.
 */
/*
 * ⚠ LES TROIS COLONNES SONT LÀ DÈS L'OUVERTURE, y compris celle de droite,
 * même vide. Rémy, 04/09/2026 : « mettre de suite le BAT à la bonne taille
 * avec la colonne de droite ». Elle n'apparaissait qu'au premier élément
 * choisi : la zone passait alors de 1 254 à 970 px sous les yeux du client,
 * et tout ce qu'il venait de poser sautait de place. La place se réserve
 * donc d'emblée — la zone ne change plus jamais de taille.
 */
.atelier__corps{
  display:grid;grid-template-columns:230px minmax(0,1fr) 262px;
  gap:22px;align-items:start;
}
.atelier__colonne{display:flex;flex-direction:column;gap:14px}

/* La zone reste sous les yeux pendant qu'on descend dans les réglages. */
.atelier__scene{position:sticky;top:16px}

.atl-panneau{
  border:1px solid var(--gris-2, #E4E9F0);border-radius:var(--r, 3px);
  background:#fff;padding:14px;
}
.atl-panneau h3{
  margin:0 0 10px;font:600 .78rem/1.2 var(--mono, 'IBM Plex Mono',monospace);
  letter-spacing:.09em;text-transform:uppercase;color:var(--texte-2, #586A7C);
}
.atl-panneau .btn{width:100%;margin-bottom:6px;padding-top:8px;padding-bottom:8px}
.atl-panneau .btn:last-of-type{margin-bottom:0}
.atl-panneau label{
  display:block;margin:10px 0 4px;font-size:.8rem;font-weight:600;color:var(--texte, #1B2430);
}
.atl-panneau label:first-child{margin-top:0}
.atl-panneau input[type=number],
.atl-panneau input[type=text],
.atl-panneau select,
.atl-panneau textarea{
  width:100%;padding:8px 10px;border:1px solid var(--gris-3, #C9D2DE);
  border-radius:var(--r, 3px);font:inherit;font-size:.9rem;background:#fff;color:inherit;
}
.atl-panneau input[type=range]{width:100%;margin:2px 0 0}
.atl-panneau textarea{resize:vertical;min-height:44px}
.atl-paire{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.atl-paire label{margin-top:0}
.atl-case{display:flex;align-items:center;gap:8px;font-weight:400!important;margin-top:14px!important}
.atl-case input{width:auto!important}

/* Les deux cases de valeur exacte, sous leur glissière (voir caseExacte
   dans js/atelier.js). La case est étroite : c'est un nombre à deux chiffres,
   pas un champ de saisie libre — et la glissière au-dessus garde toute la
   largeur, c'est elle qu'on prend en premier. */
.atl-exact{display:flex;align-items:center;gap:6px;margin:5px 0 0}
.atl-panneau .atl-exact input[type=number]{width:88px;margin:0}
.atl-exact span{font-size:.78rem;color:var(--texte-2, #586A7C)}
.atl-note{margin:7px 0 0;font-size:.78rem;line-height:1.45;color:var(--texte-2, #586A7C)}

/* La colonne de droite quand rien n'est choisi : elle garde sa place et dit
   pourquoi elle est vide, plutôt que de laisser un trou inexpliqué. */
.atl-attente{
  border:1px dashed var(--gris-3, #C9D2DE);border-radius:var(--r, 3px);
  padding:18px 16px;text-align:center;color:var(--texte-2, #586A7C);
  font-size:.84rem;line-height:1.5;background:var(--gris, #F4F6F9);
}
.atl-note b{color:var(--texte, #1B2430)}

/* Les encres : les mêmes pastilles que le nuancier du configurateur, en
   plus petit — c'est une palette, pas un choix d'étape. */
.atl-encres{display:flex;flex-wrap:wrap;gap:6px}
.atl-encre{
  width:24px;height:24px;border-radius:50%;border:1px solid var(--gris-3, #C9D2DE);
  padding:0;cursor:pointer;background-clip:padding-box;
}
.atl-encre[aria-pressed="true"]{
  outline:2px solid var(--bleu, #2E74B5);outline-offset:2px;border-color:transparent;
}

.atl-liste{display:flex;flex-direction:column;gap:5px}
.atl-calque{
  display:flex;align-items:center;gap:9px;padding:7px 9px;cursor:pointer;
  border:1px solid var(--gris-2, #E4E9F0);border-radius:var(--r, 3px);background:var(--gris, #F4F6F9);
}
.atl-calque[aria-current="true"]{border-color:var(--bleu, #2E74B5);background:#fff}
.atl-calque__type{
  font:600 .62rem/1 var(--mono, 'IBM Plex Mono',monospace);letter-spacing:.08em;
  text-transform:uppercase;color:var(--texte-2, #586A7C);
  border:1px solid var(--gris-3, #C9D2DE);border-radius:3px;padding:3px 4px 2px;flex:0 0 auto;
}
.atl-calque__nom{flex:1 1 auto;font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atl-calque__x{
  flex:0 0 auto;border:0;background:none;cursor:pointer;color:var(--texte-2, #586A7C);
  font-size:.9rem;line-height:1;padding:3px 4px;border-radius:3px;
}
.atl-calque__x:hover{color:#B42318;background:#FBEAE8}

.atl-compte{margin-top:12px;font-size:.82rem;color:var(--texte-2, #586A7C)}
.atl-compte.est-trop{color:#B42318;font-weight:600}

/* La zone : le damier dit « ce fond ne s'imprime pas », la teinte du corps
   par-dessus dit ce que le client verra. */
.atl-enveloppe{
  border:1px solid var(--gris-2, #E4E9F0);border-radius:var(--r, 3px);background:#fff;padding:14px;
}
.atl-enveloppe canvas{
  width:100%;height:auto;display:block;touch-action:none;
  border:1px solid var(--gris-2, #E4E9F0);border-radius:2px;
}
.atl-legende{
  margin:10px 0 0;font:.78rem/1.6 var(--mono, 'IBM Plex Mono',monospace);
  color:var(--texte-2, #586A7C);
}

/* Les quatre boutons de répétition, en ligne : c'est un choix, pas une liste. */
.atl-repet{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.atl-repet button{
  padding:7px 0;border:1px solid var(--gris-3, #C9D2DE);border-radius:var(--r, 3px);
  background:#fff;cursor:pointer;font:600 .88rem/1 inherit;color:var(--texte, #1B2430);
}
.atl-repet button[aria-pressed="true"]{
  background:var(--marine, #1F4E79);border-color:var(--marine, #1F4E79);color:#fff;
}

/*
 * Les deux voies, dans l'étape « L'impression ».
 *
 * Rémy, 04/09/2026 : « le "J'ai mon BAT" n'est pas lisible ». Il était en
 * petites capitales de chasse fixe, gris clair : ça se lisait comme une
 * étiquette de formulaire, pas comme le premier des deux chemins. Les deux
 * sont maintenant de même rang — même taille, même graisse, la même ligne —,
 * et c'est le fond bleu qui dit lequel est actif.
 */
.deux-voies{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px;
  padding:10px 12px;border:1px solid var(--gris-2, #E4E9F0);border-radius:var(--r, 3px);
  background:var(--gris, #F4F6F9);
}
.deux-voies__ou{color:var(--texte-2, #586A7C);font-size:.88rem;font-style:italic}

/*
 * LE CLIGNOTEMENT DE LA TUILE DE DÉPÔT.
 *
 * Rémy, 04/09/2026 : « faire un bouton sur "j'ai déjà mon BAT", quand le
 * client clique dessus ça fait clignoter la tuile "glissez votre visuel" ».
 * Les deux chemins sont maintenant deux boutons de même rang ; celui de
 * gauche ne mène nulle part — il DÉSIGNE, et trois battements suffisent à
 * porter l'œil vingt centimètres plus bas.
 *
 * Trois battements et non une boucle : un clignotement qui ne s'arrête pas
 * devient un défaut d'affichage, et l'œil finit par l'ignorer.
 */
@keyframes bp-appel{
  0%, 100% {border-color:var(--gris-3, #C9D2DE);background:var(--gris, #F4F6F9);
            box-shadow:0 0 0 0 rgba(46,116,181,0)}
  50%      {border-color:var(--bleu, #2E74B5);background:#EAF2FB;
            box-shadow:0 0 0 5px rgba(46,116,181,.18)}
}
.depose.est-appelee,
.fichier.est-appelee{animation:bp-appel .62s ease-in-out 3}
/* Pour qui a demandé moins d'animations : on désigne quand même, mais sans
   battement — la tuile prend simplement la couleur d'appel un instant. */
@media (prefers-reduced-motion:reduce){
  .depose.est-appelee,
  .fichier.est-appelee{animation:none;border-color:var(--bleu, #2E74B5);background:#EAF2FB}
}
.deux-voies .btn{display:inline-flex;align-items:center;gap:7px;margin:0;font-weight:600}

/* Le choix des polices : chaque famille écrite DANS sa famille. */
/* Cinq familles visibles, les sept autres au défilement : douze boutons
   alignés auraient fait 360 px à eux seuls dans une colonne qu'on cherche
   justement à raccourcir. */
.atl-polices{
  display:flex;flex-direction:column;gap:3px;max-height:152px;overflow-y:auto;
  border:1px solid var(--gris-2, #E4E9F0);border-radius:var(--r, 3px);padding:4px;
}
/* Hauteur fixe : Lobster et Caveat ont des jambages qui débordent, et les
   noms se chevauchaient d'une ligne à l'autre. On fige la ligne et on
   masque ce qui dépasse — le nom reste lisible, l'allure aussi. */
.atl-police{
  text-align:left;padding:0 8px;border:1px solid transparent;border-radius:2px;
  background:none;cursor:pointer;color:var(--texte, #1B2430);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  height:30px;line-height:30px;flex:0 0 auto;
}
.atl-police:hover{background:var(--gris, #F4F6F9)}
.atl-police[aria-pressed="true"]{
  background:var(--marine, #1F4E79);border-color:var(--marine, #1F4E79);color:#fff;
}

/* Les quatre faces, sous la zone. */
.atl-titre-faces{
  margin:22px 0 10px;font:600 .78rem/1.2 var(--mono, 'IBM Plex Mono',monospace);
  letter-spacing:.09em;text-transform:uppercase;color:var(--texte-2, #586A7C);
}
/* Huit vues, de 45 en 45 : deux fois plus de vignettes, donc deux fois plus
   étroites — et la hauteur suit, sans quoi la bande aurait doublé. */
.atl-faces{
  display:grid;grid-template-columns:repeat(8,1fr);gap:8px;align-items:end;
  min-height:200px;transition:opacity .18s;
}
.atl-faces[aria-busy="true"]{opacity:.45}
.atl-faces figure{margin:0;text-align:center}
/* Le bidon est deux fois et demie plus haut que large : à pleine largeur de
   colonne, les quatre vignettes prenaient 600 px de haut à elles seules. On
   les borne, et on les centre. */
.atl-faces img{
  width:auto;max-width:100%;max-height:190px;height:auto;display:block;margin:0 auto;
  background:var(--gris, #F4F6F9);border-radius:var(--r, 3px);
}
.atl-faces figcaption{
  margin-top:5px;font:500 .72rem/1 var(--mono, 'IBM Plex Mono',monospace);
  color:var(--texte-2, #586A7C);
}

@media (max-width:1180px){
  /* Deux colonnes : les outils à gauche, la zone et les réglages à droite. */
  .atelier__corps{grid-template-columns:230px minmax(0,1fr)}
  .atelier__colonne--reglages{grid-column:2}
}
@media (max-width:980px){
  .atl-faces{grid-template-columns:repeat(4,1fr)}
  .atelier__corps{grid-template-columns:1fr}
  .atelier__colonne--reglages{grid-column:1}
  /* La zone passe EN PREMIER : sur un téléphone, les réglages la
     repoussaient hors de l'écran et on composait à l'aveugle. */
  .atelier__scene{position:static;order:-1}
}


/* =========================================================================
   LES FICHES « EN SAVOIR + »
   -------------------------------------------------------------------------
   Une fiche produit par-dessus le configurateur, pas une page à la place.
   Elle reprend le fond sombre de la loupe du plan — le client connaît déjà
   ce geste : on clique à côté ou sur la croix, et on retrouve son bidon
   exactement où il était.
   ========================================================================= */
.fiche{
  position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;
  background:rgba(11,15,23,.86);padding:24px;overflow-y:auto;
}
.fiche__boite{
  position:relative;width:100%;max-width:720px;background:#fff;
  border-radius:var(--r, 3px);padding:30px 34px 26px;
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  max-height:calc(100vh - 48px);overflow-y:auto;
}
.fiche__fermer{
  position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--gris-2, #E4E9F0);background:#fff;color:var(--marine, #1F4E79);
  font-size:1.5rem;line-height:1;cursor:pointer;
}
.fiche__fermer:hover{background:var(--marine, #1F4E79);border-color:var(--marine, #1F4E79);color:#fff}
.fiche__sur{
  margin:0 0 6px;font:600 .72rem/1 var(--mono, 'IBM Plex Mono',monospace);
  letter-spacing:.11em;text-transform:uppercase;color:var(--bleu, #2E74B5);
}
.fiche__boite h3{margin:0 0 16px;font-size:1.42rem;line-height:1.22;color:var(--texte, #1B2430)}
.fiche__corps p{margin:0 0 14px;line-height:1.62}
.fiche__pied{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--gris-2, #E4E9F0)}
.fiche__page{font-size:.86rem;font-weight:600;color:var(--bleu, #2E74B5)}
.fiche-note{font-size:.86rem;color:var(--texte-2, #586A7C)}

/* les deux cartes de modèle, comme sur la page d'accueil */
.fiche-cartes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}
.fiche-carte{border:1px solid var(--gris-2, #E4E9F0);border-radius:var(--r, 3px);padding:14px 16px}
.fiche-carte__code{
  margin:0 0 4px;font:600 .68rem/1 var(--mono, 'IBM Plex Mono',monospace);
  letter-spacing:.1em;color:var(--bleu, #2E74B5);
}
.fiche-carte h4{margin:0 0 4px;font-size:1.02rem}
.fiche-carte__dit{margin:0 0 12px;font-size:.84rem;color:var(--texte-2, #586A7C)}
.fiche-cotes{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px;margin:0}
.fiche-cotes--large{grid-template-columns:repeat(4,1fr);margin:16px 0}
.fiche-cotes dt{
  font:600 .62rem/1.3 var(--mono, 'IBM Plex Mono',monospace);letter-spacing:.07em;
  text-transform:uppercase;color:var(--texte-2, #586A7C);
}
.fiche-cotes dd{margin:2px 0 0;font-size:.92rem;font-weight:600;color:var(--texte, #1B2430)}

.fiche-liste{margin:14px 0;padding-left:18px}
.fiche-liste li{margin-bottom:9px;line-height:1.55;font-size:.92rem}

.fiche-pastilles{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 18px}
.fiche-pastille{
  width:26px;height:26px;border-radius:50%;display:block;
  border:1px solid var(--gris-3, #C9D2DE);background-clip:padding-box;
}

@media (max-width:600px){
  .fiche{padding:12px}
  .fiche__boite{padding:26px 20px 20px}
  .fiche-cartes{grid-template-columns:1fr}
  .fiche-cotes--large{grid-template-columns:1fr 1fr}
}