/* Calculateur jeux de cartes — Imprimerie Chauveau */
.ccc{--ccc-fg:#111;--ccc-muted:#8a8a8a;--ccc-line:#dcdcdc;--ccc-bg:#fff;--ccc-accent:#111;
 max-width:760px;margin:0 auto;color:var(--ccc-fg);
 font-family:inherit;font-size:15px;line-height:1.45;}
.ccc *,.ccc *::before,.ccc *::after{box-sizing:border-box;}

.ccc-block{margin:0 0 30px;}
.ccc-step{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;}
.ccc-step__num{font-size:11px;letter-spacing:.14em;color:var(--ccc-muted);font-weight:600;}
.ccc-step__title{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;}

/* Boutons segmentés */
.ccc-seg{display:flex;flex-wrap:wrap;border:1px solid var(--ccc-line);border-radius:2px;overflow:hidden;}
.ccc-seg__item{flex:1 1 120px;margin:0;cursor:pointer;min-width:0;}
.ccc-seg__item input{position:absolute;opacity:0;width:0;height:0;}
.ccc-seg__box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
 padding:14px 10px;height:100%;text-align:center;border-left:1px solid var(--ccc-line);
 background:var(--ccc-bg);transition:background .15s,color .15s;}
.ccc-seg__item:first-child .ccc-seg__box{border-left:0;}
.ccc-seg__label{font-weight:600;font-size:14px;}
.ccc-seg__sub{font-size:12px;color:var(--ccc-muted);}
.ccc-seg__item input:checked+.ccc-seg__box{background:var(--ccc-accent);color:#fff;}
.ccc-seg__item input:checked+.ccc-seg__box .ccc-seg__sub{color:rgba(255,255,255,.7);}
.ccc-seg__item input:focus-visible+.ccc-seg__box{outline:2px solid var(--ccc-accent);outline-offset:-2px;}
.ccc-seg__item:hover .ccc-seg__box{background:#f5f5f5;}
.ccc-seg__item input:checked+.ccc-seg__box:hover{background:var(--ccc-accent);}

/* Champs */
.ccc-grid2,.ccc-libre{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.ccc-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;}
.ccc-libre{margin-top:18px;}
.ccc-field{display:block;}
.ccc-field__label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
 color:var(--ccc-muted);font-weight:600;margin-bottom:6px;}
.ccc-field input{width:100%;border:0;border-bottom:1px solid var(--ccc-fg);background:transparent;
 font-size:22px;font-weight:600;padding:6px 0;color:inherit;border-radius:0;}
.ccc-field input:focus{outline:0;border-bottom-width:2px;}
.ccc-select{width:100%;padding:14px 12px;border:1px solid var(--ccc-line);border-radius:2px;
 background:var(--ccc-bg);font-size:15px;font-weight:600;color:inherit;}
.ccc-check{display:flex;align-items:flex-start;gap:10px;margin:0 0 10px;cursor:pointer;}
.ccc-check input{margin:3px 0 0;width:16px;height:16px;}
.ccc-check em{font-style:normal;color:var(--ccc-muted);}
.ccc-check[hidden]{display:none;}

/* Résultat */
.ccc-resultat{border-top:2px solid var(--ccc-fg);padding-top:22px;margin-top:8px;}
.ccc-prix{display:flex;align-items:baseline;justify-content:space-between;gap:16px;}
.ccc-prix__label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;}
.ccc-prix__valeur{font-size:34px;font-weight:700;letter-spacing:-.01em;}
.ccc-prix__lignes{margin-top:10px;display:grid;gap:4px;}
.ccc-prix__lignes div{display:flex;justify-content:space-between;gap:16px;color:var(--ccc-muted);font-size:14px;}
.ccc-prix__lignes strong{color:var(--ccc-fg);font-weight:600;}
.ccc-note{margin:12px 0 0;font-size:13px;color:var(--ccc-muted);}

/* Action au bas d'un encart : le gabarit du format, celui de l'étui. Elle se
   détache du texte sans prendre le pas sur lui — on vient lire une
   description, le téléchargement est une suite possible, pas le sujet. */
/*
 * Action au bas d'un encart : le gabarit du format, celui de l'étui.
 *
 * Style COMPLET et autonome, sans s'appuyer sur « .ccc-btn » ni sur
 * « .ccc-btn-sec ». Cette dernière n'existe que dans la feuille de la page de
 * dépôt, qui n'est pas chargée ici : un bouton qui la porte s'affiche en
 * texte nu. C'est écrit un peu plus bas dans ce fichier, et je l'ai refait
 * quand même. Une classe, une règle, aucun héritage à surveiller.
 *
 * Plein et non filaire : dans un encart déjà gris, un bouton bordé se fond
 * dans le cadre. On vient y lire une description, le téléchargement doit se
 * détacher du texte pour qu'on sache qu'il est là.
 */
.ccc-desc__action{display:inline-flex;align-items:center;gap:8px;width:auto;
 margin-top:14px;padding:11px 18px;border:1.5px solid var(--ccc-fg);border-radius:2px;
 background:var(--ccc-fg);color:#fff;font-size:14px;font-weight:700;
 letter-spacing:.02em;line-height:1.2;cursor:pointer;
 transition:background .15s,color .15s;}
.ccc-desc__action:hover{background:transparent;color:var(--ccc-fg);}
.ccc-desc__action:focus-visible{outline:2px solid var(--ccc-fg);outline-offset:2px;}
.ccc-desc__action:disabled{opacity:.35;cursor:not-allowed;}
.ccc-desc__action:disabled:hover{background:var(--ccc-fg);color:#fff;}
.ccc-desc__mention{display:block;margin-top:6px;font-size:12px;
 color:var(--ccc-muted);}
/* Minimum de facturation : il explique un prix qui ne bouge plus, il doit
   donc se lire, sans pour autant prendre le ton d'une erreur. */
.ccc-note--mini{background:#fbf6ec;border-left:3px solid #d8b96a;
 padding:10px 12px;color:#6b5a33;}

/* Service compris dans le prix — ici, le jeu glissé dans son étui. Ce n'est
   ni un avertissement ni un chiffre technique : un vert sobre le distingue
   de la note d'épaisseur qui le précède, sans crier. */
.ccc-note--service{background:#f3f7f2;border-left:3px solid #6f8f63;
 padding:10px 12px;color:#3f5338;}

/* Code postal de livraison : il ne s'affiche que sur les commandes lourdes,
   là où la palette peut battre les colis. Discret — c'est une précision
   qu'on demande, pas une étape de plus à franchir. */
.ccc-port-cp{margin:10px 0 0;padding:10px 12px;background:#f7f7f6;
 border:1px solid #e2e2e0;border-radius:3px;}
.ccc-port-cp label{display:block;font-size:13px;color:#555;margin:0 0 6px;}
.ccc-port-cp input{width:110px;padding:6px 8px;border:1px solid #c9c9c6;
 border-radius:3px;font-size:15px;letter-spacing:.08em;}
.ccc-port-cp__note{margin:7px 0 0;font-size:12.5px;line-height:1.45;color:#6b6b66;}

/* Bloc « À l'attention de » : replié par défaut, il ne doit pas voler la
   vedette au bouton de devis qu'il précède. */
.ccc-client{margin:16px 0 10px;border:1px solid #e2e2e0;border-radius:3px;
 padding:10px 12px;background:#fbfbfa;}
.ccc-client__titre{cursor:pointer;font-size:13px;font-weight:600;
 color:var(--ccc-fg,#111);list-style:none;}
.ccc-client__titre::-webkit-details-marker{display:none;}
.ccc-client__titre::before{content:"+ ";color:#8a8a8a;}
.ccc-client[open] .ccc-client__titre::before{content:"– ";}
.ccc-client__note{margin:8px 0 12px;font-size:12px;line-height:1.4;color:#8a8a8a;}
.ccc-client__grille{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;}
.ccc-client__champ--societe,
.ccc-client__champ--adresse{grid-column:1/-1;}
.ccc-client__saisie{width:100%;box-sizing:border-box;padding:7px 9px;
 border:1px solid #d5d5d3;border-radius:2px;font-size:14px;background:#fff;}
.ccc-client__saisie:focus-visible{outline:2px solid #3265b8;outline-offset:1px;}
@media (max-width:520px){
 .ccc-client__grille{grid-template-columns:1fr;}
}
.ccc-resultat__erreur{background:#fdf1f1;border:1px solid #e9b9b9;color:#8c2020;
 padding:12px 14px;border-radius:2px;font-size:14px;margin-bottom:16px;}
/* Le même cadre, mais au pied d'une étape du formulaire : la marge passe
   au-dessus, puisqu'il ferme le bloc au lieu d'en ouvrir un. */
.cl-erreur--format{margin:14px 0 0;}
.cl-erreur--format[hidden]{display:none;}
/* Pendant le recalcul, l'ancien prix s'efface et le dit : sans quoi un
   montant perime reste lisible le temps de la requete, et le visiteur
   peut commander en croyant au chiffre qu'il voit. */
.ccc-resultat.is-loading .ccc-prix,
.ccc-resultat.is-loading .ccc-prix__lignes{opacity:.4;}
.ccc-calcul{display:none;margin:0 0 12px;font-size:13px;letter-spacing:.06em;
 text-transform:uppercase;font-weight:700;color:var(--ccc-muted);}
.ccc-resultat.is-loading .ccc-calcul{display:block;}
.ccc-calcul::after{content:'\2026';}
.ccc-resultat.is-loading .ccc-calcul{animation:ccc-pouls 1.2s ease-in-out infinite;}
@keyframes ccc-pouls{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.ccc-resultat.is-loading .ccc-calcul{animation:none;}}
.ccc-btn{display:block;width:100%;margin-top:20px;padding:16px 20px;border:0;border-radius:2px;
 background:var(--ccc-accent);color:#fff;font-size:15px;font-weight:700;letter-spacing:.04em;
 text-transform:uppercase;cursor:pointer;transition:opacity .15s;}
.ccc-btn:hover{opacity:.85;}
.ccc-btn:disabled{opacity:.35;cursor:not-allowed;}
.ccc-mention{margin:10px 0 0;font-size:12px;color:var(--ccc-muted);text-align:center;}

@media (max-width:560px){
 .ccc-seg{flex-direction:column;}
 .ccc-seg__box{border-left:0;border-top:1px solid var(--ccc-line);}
 .ccc-seg__item:first-child .ccc-seg__box{border-top:0;}
 .ccc-grid2,.ccc-libre,.ccc-grid3{grid-template-columns:1fr;gap:18px;}
 .ccc-prix{flex-direction:column;align-items:flex-start;gap:2px;}
}

/* l’attribut hidden doit primer sur display:grid/flex */
.ccc-libre[hidden],.ccc-check[hidden],.ccc [hidden]{display:none!important;}

/* Certains thèmes (Blocksy…) imposent une hauteur fixe aux listes déroulantes,
   ce qui rognait le libellé du conditionnement. */
.ccc .ccc-select{
  height:auto;min-height:48px;line-height:1.35;padding:13px 36px 13px 12px;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236b625b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:12px 8px;
}
/* Idem pour les champs numériques, que le thème peut aussi contraindre */
.ccc .ccc-field input{height:auto;min-height:44px;}

/* Bandeau Fabriqué en France */
.ccc-france{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;
  margin:0 0 30px;padding:12px 16px;
  border:1px solid var(--ccc-line);border-left:0;border-radius:2px;
  background:var(--ccc-bg);
  position:relative;padding-left:22px;
}
.ccc-france::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:linear-gradient(to bottom,#0055A4 0 33.34%,#ffffff 33.34% 66.67%,#EF4135 66.67% 100%);
}
.ccc-france__drapeau{
  flex:0 0 auto;width:26px;height:17px;border:1px solid var(--ccc-line);
  background:linear-gradient(to right,#0055A4 0 33.34%,#ffffff 33.34% 66.67%,#EF4135 66.67% 100%);
}
.ccc-france__texte{font-weight:700;font-size:14px;letter-spacing:.02em;}
.ccc-france__detail{font-size:13px;color:var(--ccc-muted);}
@media (max-width:480px){.ccc-france__detail{flex-basis:100%;}}
.ccc-block--conditionnel[hidden]{display:none!important;}

/* Information étui (gabarit envoyé sous 24 h, pelliculage obligatoire) */
.ccc-info-etui{margin:12px 0 0;padding:11px 14px;border-left:3px solid var(--ccc-fg);
  background:rgba(0,0,0,.03);font-size:13px;line-height:1.5;color:var(--ccc-muted);}
.ccc-gabarit{margin:14px 0 0;text-align:center;font-size:13px;}
.ccc-gabarit .ccc-lien{color:var(--ccc-muted);}
.ccc-gabarit .ccc-lien:hover{color:var(--ccc-fg);}

/* Bouton secondaire : gabarit */
.ccc-btn--sec{
  margin-top:12px;background:transparent;color:var(--ccc-fg);
  border:1.5px solid var(--ccc-fg);
  display:flex;align-items:center;justify-content:center;gap:9px;
}
.ccc-btn--sec:hover{background:var(--ccc-fg);color:var(--ccc-bg);opacity:1;}
.ccc-btn__icone{font-size:16px;line-height:1;}

/* Description du format sélectionné */
.ccc-desc{
  margin:16px 0 0;padding:13px 16px;
  border-left:3px solid var(--ccc-fg);background:rgba(0,0,0,.03);
}
.ccc-desc__titre{display:block;font-size:13px;letter-spacing:.04em;text-transform:uppercase;}
.ccc-desc__texte{margin:6px 0 0;font-size:14px;line-height:1.55;color:var(--ccc-muted);}
.ccc-desc__liste{margin:6px 0 0;padding-left:18px;font-size:14px;line-height:1.55;color:var(--ccc-muted);}
.ccc-desc__liste li{margin:3px 0;}
.ccc-desc[hidden]{display:none!important;}

/* Choix d'un modèle de faces */
.ccc-info-modele{margin:12px 0 0;padding:11px 14px;border-left:3px solid var(--ccc-fg);
  background:rgba(0,0,0,.03);font-size:13px;line-height:1.5;color:var(--ccc-muted);}
.ccc-info-modele a{color:var(--ccc-fg);}
.ccc-info-modele[hidden]{display:none!important;}

/* Encart illustré : la photo fournie par l'atelier à gauche, le texte à droite */
.ccc-desc--illustre:not([hidden]){display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:start;}
.ccc-desc__image{margin:0;order:-1;}
.ccc-desc__image img{display:block;width:100%;height:auto;border:1px solid var(--ccc-line);border-radius:2px;}
@media (max-width:620px){
  .ccc-desc--illustre{grid-template-columns:1fr;}
  .ccc-desc__image{max-width:220px;}
}

/* Quand la page possède sa grande illustration, la photo du choix y est portée
   par le script : l'encart redevient un simple bloc de texte. */
.ccc-a-visuel .ccc-desc__image{display:none;}
.ccc-a-visuel .ccc-desc--illustre:not([hidden]){display:block;}

/* Pastilles du diaporama, sous l'illustration de la page — ou sous la
   figure de l'encart quand la page n'a pas d'illustration. */
.ccc-diapo{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:10px;}
.ccc-diapo__point{width:9px;height:9px;padding:0;border:1px solid #9a9a9a;border-radius:50%;
  background:transparent;cursor:pointer;transition:background .15s,border-color .15s;}
.ccc-diapo__point:hover{border-color:#111;}
.ccc-diapo__point.est-actif{background:#111;border-color:#111;}

/* Flèches : rien ne défile tout seul, c'est le visiteur qui tourne les
   pages. Le compteur lui dit combien il en reste. */
.ccc-diapo__fleche{width:30px;height:30px;padding:0 0 3px;border:1px solid #d5d5d3;
  border-radius:50%;background:#fff;color:#111;font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s;}
.ccc-diapo__fleche:hover{border-color:#111;background:#f4f4f2;}
.ccc-diapo__fleche:focus-visible{outline:2px solid #3265b8;outline-offset:2px;}
.ccc-diapo__compteur{min-width:46px;text-align:center;font-size:13px;
  font-variant-numeric:tabular-nums;color:#8a8a8a;}

/* Second cadre de la colonne de gauche : photos du conditionnement */
.ccc-visuel-pack{margin:0;}
.ccc-visuel-pack[hidden]{display:none!important;}
.ccc-visuel-pack img{display:block;width:100%;height:auto;}
.ccc-visuel-pack figcaption{margin-top:8px;font-size:13px;text-align:center;color:inherit;}

/* Encart permanent (découpe) : toujours affiché, sans dépendre d'un choix */
.ccc-desc--fixe{display:block;margin-top:12px;}

/* Plateaux : six formats, donc deux lignes de trois plutôt qu'une file serrée. */
#ccc-plateaux .ccc-seg[aria-label="format"]{display:grid;grid-template-columns:repeat(3,1fr);}
#ccc-plateaux .ccc-seg[aria-label="format"] .ccc-seg__box{border-left:1px solid var(--ccc-line);border-top:1px solid var(--ccc-line);}
#ccc-plateaux .ccc-seg[aria-label="format"] .ccc-seg__item:nth-child(3n+1) .ccc-seg__box{border-left:0;}
#ccc-plateaux .ccc-seg[aria-label="format"] .ccc-seg__item:nth-child(-n+3) .ccc-seg__box{border-top:0;}
@media (max-width:560px){
 #ccc-plateaux .ccc-seg[aria-label="format"]{grid-template-columns:1fr;}
 #ccc-plateaux .ccc-seg[aria-label="format"] .ccc-seg__box{border-left:0;border-top:1px solid var(--ccc-line);}
 #ccc-plateaux .ccc-seg[aria-label="format"] .ccc-seg__item:first-child .ccc-seg__box{border-top:0;}
}

/* Punchboards : le tableau des pièces. */
.ccc-pieces{width:100%;border-collapse:collapse;}
.ccc-pieces th{text-align:left;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
 color:var(--ccc-muted);font-weight:600;padding:0 10px 8px 0;}
.ccc-pieces td{padding:0 10px 10px 0;vertical-align:top;}
.ccc-pieces td:last-child,.ccc-pieces th:last-child{padding-right:0;}
.ccc-pieces input{width:100%;border:0;border-bottom:1px solid var(--ccc-fg);background:transparent;
 font-size:18px;font-weight:600;padding:6px 0;color:inherit;border-radius:0;}
.ccc-pieces input:focus{outline:0;border-bottom-width:2px;}
.ccc-pieces .ccc-select{padding:10px;font-size:14px;}
@media (max-width:560px){
 .ccc-pieces,.ccc-pieces tbody,.ccc-pieces tr,.ccc-pieces td{display:block;width:100%;}
 .ccc-pieces thead{display:none;}
 .ccc-pieces tr{border-bottom:1px solid var(--ccc-line);margin-bottom:14px;padding-bottom:8px;}
}
.ccc-pieces__planches{font-size:14px;font-weight:600;padding-top:10px;white-space:nowrap;}
.ccc-pieces__dim{white-space:nowrap;}
.ccc-pieces__dim input{width:calc(50% - 12px);display:inline-block;}
.ccc-pieces__dim span{display:inline-block;width:14px;text-align:center;color:var(--ccc-muted);}
/* Une seule mesure (rond, carré, hexagone) : la case prend toute la largeur
   et l'unité remplace la seconde case. */
.ccc-pieces__dim input[hidden],.ccc-pieces__dim span[hidden]{display:none;}
.ccc-pieces__dim:has(.ccc-pieces__h[hidden]) input[name$="[taille]"]{width:calc(100% - 34px);}
.ccc-pieces__unite{width:auto!important;padding-left:6px;font-size:13px;}

/* Renvoi vers les autres éléments du jeu, sous le prix du calculateur. */
.ccc-suite{margin-top:22px;padding:18px;border:1.5px solid var(--ccc-fg);}
.ccc-suite__titre{display:block;font-size:15px;font-weight:700;margin-bottom:6px;}
.ccc-suite__texte{margin:0 0 14px;font-size:14px;color:var(--ccc-muted);}
.ccc-suite__liens{display:flex;flex-wrap:wrap;gap:10px;margin:0;}
.ccc-suite__lien{display:inline-block;padding:11px 18px;border:1.5px solid var(--ccc-fg);
 font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
 color:var(--ccc-fg);text-decoration:none;transition:background .15s,color .15s;}
.ccc-suite__lien:hover{background:var(--ccc-fg);color:var(--ccc-bg);}

/* Appel vers le coffret rigide, sous le bouton de panier.
   Il doit primer sur le bloc « suite » qui le suit : c'est le seul des deux
   qui emporte les cotes du jeu. D'où le filet noir, le fond légèrement teinté
   et le liseré de gauche, qui le détachent du blanc de la page. Le bouton
   reste secondaire : en accent, il ferait concurrence à « Ajouter au panier »
   juste au-dessus, ce qu'on cherche précisément à éviter. */
/* Fond kraft : la couleur du carton dont la boîte est faite. C'est la seule
   couleur du calculateur, et elle est là pour dire la matière autant que pour
   accrocher l'œil. Assez pâle pour que le texte gris clair du second
   paragraphe reste lisible dessus. */
.ccc-coffret{margin:26px 0;padding:0;border:2px solid var(--ccc-fg);background:#f5efe4;}
/* Le titre est un bandeau plein, pas une ligne de texte : c'est ce qui donne
   au cadre sa visibilité sans toucher au bouton, qui doit rester en retrait
   derrière « Ajouter au panier ». */
.ccc-coffret__titre{display:block;margin:0;padding:12px 22px;
 background:var(--ccc-fg);color:var(--ccc-bg);
 font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.ccc-coffret__corps{padding:20px 22px;}
.ccc-coffret__texte{margin:0 0 10px;font-size:14px;line-height:1.55;color:#444;}
/* Gris assombri par rapport au reste du calculateur : sur le fond kraft, le
   gris habituel tombait sous le seuil de lisibilité pour un texte de 13 px. */
.ccc-coffret__texte--gris{color:#6b6b6b;font-size:13px;}
.ccc-coffret .ccc-mention{color:#6b6b6b;}
.ccc-coffret #ccc-coffret-cotes[hidden]{display:none;}
/* Le bouton du coffret est un lien, pas un <button> : il faut lui rendre
   l'alignement et retirer le soulignement que .ccc-btn ne prévoit pas. */
.ccc-coffret .ccc-btn{margin-top:4px;text-align:center;text-decoration:none;box-sizing:border-box;}
.ccc-coffret .ccc-mention{margin-top:8px;}

/* Dos de cartes retenu dans le calculateur : on montre le dessin. */
.ccc-verso{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:start;margin-top:14px;}
.ccc-verso[hidden]{display:none!important;}
.ccc-verso__image{display:block;width:100%;height:auto;border:1px solid var(--ccc-line);border-radius:6px;}
.ccc-verso__texte{margin:0;font-size:14px;line-height:1.55;color:var(--ccc-muted);}

/* Calculateur de règles : intitulé d'un sous-choix (papier de couverture). */
.ccc-sous-label {
	margin: 18px 0 8px;
}

/* ---------------------------------------------------- Barre récapitulative */
/* Visible seulement quand le panneau de prix est sorti de l'écran. */
.ccc-barre{position:fixed;left:0;right:0;bottom:0;z-index:9000;
 /* La barre est posée sur <body>, hors du bloc .ccc : elle doit donc
    redéclarer les variables de couleur, sinon elles ne valent rien. */
 --ccc-fg:#111;--ccc-muted:#8a8a8a;--ccc-line:#dcdcdc;--ccc-bg:#fff;--ccc-accent:#111;
 background:#fff;border-top:1px solid var(--ccc-line);
 box-shadow:0 -2px 10px rgba(0,0,0,.08);
 padding-bottom:env(safe-area-inset-bottom);}
.ccc-barre__in{max-width:1060px;margin:0 auto;padding:10px 16px;
 display:flex;align-items:center;gap:14px;}
.ccc-barre__quoi{flex:1 1 auto;min-width:0;font-size:13px;line-height:1.3;
 color:var(--ccc-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ccc-barre__prix{flex:0 0 auto;font-size:20px;font-weight:700;color:var(--ccc-fg);
 font-variant-numeric:tabular-nums;}
.ccc-barre__btn{flex:0 0 auto;margin:0;padding:12px 18px;border:0;border-radius:2px;
 background:var(--ccc-accent);color:#fff;font-size:14px;font-weight:700;
 letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:opacity .15s;}
.ccc-barre__btn:hover{opacity:.85;}
.ccc-barre__btn:disabled{opacity:.35;cursor:not-allowed;}
.ccc-barre.est-calcul .ccc-barre__prix{opacity:.4;}
/* Le widget de cookies vit au même endroit : on le remonte au-dessus. */
html.ccc-barre-on .cookieadmin_re_consent,
html.ccc-barre-on .cookieadmin_law_container.cookieadmin_bottom{bottom:80px;}
@media (max-width:560px){
 .ccc-barre__in{gap:10px;padding:8px 12px;}
 .ccc-barre__quoi{display:none;}
 .ccc-barre__prix{flex:1 1 auto;font-size:18px;}
 .ccc-barre__btn{padding:12px 14px;font-size:13px;}
}

/* ------------------------------------------------- Onglets des calculateurs */
/* La navigation du site est pleine : les calculateurs se renvoient donc
   les uns aux autres par cette barre, posée au-dessus du formulaire. */
.ccc-onglets{max-width:760px;margin:0 auto 26px;display:flex;gap:6px;
 border-bottom:1px solid #dcdcdc;overflow-x:auto;
 -webkit-overflow-scrolling:touch;scrollbar-width:none;}
.ccc-onglets::-webkit-scrollbar{display:none;}
.ccc-onglets__item{flex:0 0 auto;padding:9px 14px;margin-bottom:-1px;
 border-bottom:2px solid transparent;text-decoration:none;white-space:nowrap;
 font-size:13px;font-weight:600;letter-spacing:.02em;color:#8a8a8a;
 transition:color .15s,border-color .15s;}
.ccc-onglets__item:hover,.ccc-onglets__item:focus-visible{color:#111;}
.ccc-onglets__item.est-courant{color:#111;border-bottom-color:#111;cursor:default;}
.ccc-onglets__item:focus-visible{outline:2px solid #3265b8;outline-offset:2px;}
@media(max-width:700px){
 .ccc-onglets{margin-bottom:20px;}
 .ccc-onglets__item{padding:8px 11px;font-size:12px;}
}

/* ------------------------------------------- Coffret en volume, à vos cotes */
/* Le volume lui-même est rendu en 3D par assets/coffret3d.js ; il n'y a ici
   que la colonne qui l'accueille. Le cadre reste masqué tant que le moteur
   n'a pas démarré : mieux vaut pas de visuel du tout qu'un trou blanc. */
/* La colonne du visuel est calée sur la photo du calculateur de cartes
   (458 px de large) : en dessous, le volume se lit mal. Le formulaire garde
   ses 760 px — 1240 moins la colonne et la gouttière. */
.ccc-avec-visuel{max-width:1240px;margin:0 auto;display:grid;
 grid-template-columns:440px minmax(0,1fr);gap:40px;align-items:start;}
.ccc-avec-visuel > .ccc{max-width:none;margin:0;}
.ccc-avec-visuel > .ccc-coffret3d[hidden]{display:none;}
.ccc-avec-visuel:has(> .ccc-coffret3d[hidden]){grid-template-columns:minmax(0,1fr);max-width:760px;}

.ccc-coffret3d{position:sticky;top:24px;margin:0;text-align:center;}
/* Fond gris : le crème du fond de boîte se perdait sur le crème du
   cadre. Un gris moyen détache les deux sans alourdir la scène. */
.ccc-coffret3d__scene{height:480px;background:#cbcbc9;border-radius:3px;}
.ccc-coffret3d__cote{margin:8px 0 0;font-size:14px;font-weight:700;
 font-variant-numeric:tabular-nums;color:var(--ccc-fg,#111);}
.ccc-coffret3d__note{margin:3px 0 0;font-size:12px;color:#8a8a8a;}

/* Carrousel sous le visuel : les photos montrent ce que la 3D ne sait pas
   dire — le grain du papier, la tranche contrecollée, la boîte en main.
   Une seule à la fois, en grand : trois timbres-poste ne montraient rien. */
.ccc-photos{margin:16px 0 0;}
.ccc-photos__vues{list-style:none;margin:0;padding:0;display:grid;
 grid-template-areas:"vue";}
/* Toutes les vues dans la même case : la hauteur est celle de la plus
   grande, et le fondu se fait sans à-coup de mise en page. */
.ccc-photos__vue{grid-area:vue;margin:0;min-width:0;}
.ccc-photos--carrousel .ccc-photos__vue{transition:opacity .6s ease;}
.ccc-photos--carrousel .ccc-photos__vue:not(.est-active){opacity:0;
 pointer-events:none;}
.ccc-photos--carrousel .ccc-photos__vue.est-active{opacity:1;}
.ccc-photos__lien{display:block;border-radius:3px;overflow:hidden;}
.ccc-photos__lien:focus-visible{outline:2px solid #3265b8;outline-offset:2px;}
.ccc-photos__lien img{display:block;width:100%;height:300px;object-fit:cover;}
.ccc-photos__legende{display:block;margin-top:6px;font-size:12px;
 line-height:1.3;color:#8a8a8a;text-align:center;}
.ccc-photos__pastilles{display:flex;justify-content:center;gap:7px;
 margin-top:10px;}
.ccc-photos__pastille{width:9px;height:9px;padding:0;border:0;border-radius:50%;
 background:#c9c9c7;cursor:pointer;transition:background .2s,transform .2s;}
.ccc-photos__pastille:hover{background:#9a9a97;}
.ccc-photos__pastille.est-active{background:var(--ccc-fg,#111);transform:scale(1.15);}
.ccc-photos__pastille:focus-visible{outline:2px solid #3265b8;outline-offset:3px;}
@media (max-width:1200px) and (min-width:901px){
 .ccc-photos__lien img{height:240px;}
}
@media (max-width:900px){
 .ccc-photos__lien img{height:260px;}
}
@media (prefers-reduced-motion:reduce){
 .ccc-photos--carrousel .ccc-photos__vue{transition:none;}
}

/* Visionneuse : la vignette s'agrandit sur place plutôt que d'ouvrir un
   onglet, qui ferait sortir le client de son devis. */
.ccc-visionneuse{position:fixed;inset:0;z-index:9500;display:flex;
 align-items:center;justify-content:center;padding:4vmin;
 background:rgba(18,18,16,.86);}
.ccc-visionneuse[hidden]{display:none;}
.ccc-visionneuse__cadre{margin:0;max-width:100%;max-height:100%;
 display:flex;flex-direction:column;align-items:center;gap:10px;}
.ccc-visionneuse__image{display:block;max-width:100%;max-height:86vh;
 width:auto;height:auto;border-radius:3px;background:#fff;}
.ccc-visionneuse__legende{color:#e8e6e1;font-size:13px;text-align:center;
 max-width:60ch;}
.ccc-visionneuse__legende[hidden]{display:none;}
.ccc-visionneuse__fermer{position:absolute;top:12px;right:16px;
 width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
 background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;}
.ccc-visionneuse__fermer:hover{background:rgba(255,255,255,.26);}
.ccc-visionneuse__fermer:focus-visible{outline:2px solid #fff;outline-offset:2px;}

/* Flèches : assez loin des bords pour ne pas gêner la lecture de l'image,
   assez grandes pour se viser au doigt sur téléphone. */
.ccc-visionneuse__fleche{position:absolute;top:50%;transform:translateY(-50%);
 width:52px;height:52px;border:0;border-radius:50%;cursor:pointer;
 background:rgba(255,255,255,.14);color:#fff;font-size:34px;line-height:1;
 display:flex;align-items:center;justify-content:center;padding:0 0 4px;}
.ccc-visionneuse__fleche:hover{background:rgba(255,255,255,.26);}
.ccc-visionneuse__fleche:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.ccc-visionneuse__fleche--avant{left:16px;}
.ccc-visionneuse__fleche--apres{right:16px;}
@media (max-width:620px){
 .ccc-visionneuse__fleche{width:44px;height:44px;font-size:28px;}
 .ccc-visionneuse__fleche--avant{left:6px;}
 .ccc-visionneuse__fleche--apres{right:6px;}
}

/* Le fond ne défile plus pendant qu'une image est ouverte. */
body.ccc-fige{overflow:hidden;}

@media (max-width:1200px) and (min-width:901px){
 .ccc-avec-visuel{grid-template-columns:340px minmax(0,1fr);gap:28px;}
 .ccc-coffret3d__scene{height:380px;}
}

@media (max-width:900px){
 .ccc-avec-visuel{grid-template-columns:1fr;gap:24px;}
 .ccc-coffret3d{position:static;}
 .ccc-coffret3d__scene{height:320px;}
}

/* Création des fichiers par l'atelier.
   Encadrée et détachée du bloc 07 : celui-ci ne contient que des options
   chiffrées, et mêler une prestation sur devis à des cases « +45,00 € HT »
   laisserait croire à un forfait. */
.ccc-creation{margin:22px 0;padding:16px 18px;border:1px solid var(--ccc-fg);}
.ccc-check--creation{margin:0;}
.ccc-check--creation em{font-style:normal;color:var(--ccc-muted);}
.ccc-creation__texte{margin:10px 0 0;font-size:13px;line-height:1.55;color:#555;}
.ccc-creation__texte[hidden]{display:none;}

/*
 * « Créer mes cartes en ligne » : posé juste au-dessus de la création par
 * l'atelier, parce que ce sont les deux réponses à la même question — qui
 * fabrique les fichiers.
 */
.ccc-creation--enligne {
	margin-bottom: 10px;
}

/*
 * Le bloc le plus important de la page, et il ressemblait à une note de bas
 * de page : un lien souligné dans un cadre fin. C'est pourtant la seule
 * proposition qui règle le problème du client qui n'a pas de fichiers — et
 * il n'a aucune raison de deviner qu'elle existe.
 *
 * Carte sombre, bouton plein : on le voit en descendant la page sans le
 * chercher. Le bouton « Commander » reste au-dessous, dans la colonne de
 * prix, et les deux ne se disputent pas le même moment — on compose d'abord,
 * on commande ensuite.
 */
.ccc-creation--enligne {
	margin: 22px 0 10px;
	padding: 18px 20px;
	border: 0;
	border-radius: 2px;
	background: var( --ccc-fg );
	color: #fff;
}

.ccc-creation--enligne .ccc-creation__texte {
	margin: 10px 0 0;
	color: rgba( 255, 255, 255, .78 );
}

/*
 * Le bouton porte son style ici et non via « .ccc-btn-sec » : cette classe
 * n'est définie que dans la feuille de la page de dépôt, qui n'est pas
 * chargée sur le calculateur. Le bouton s'y affichait en texte nu.
 */
.ccc-creation--enligne .ccc-btn--creer {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
	margin: 0;
	padding: 12px 20px;
	border: 1.5px solid #fff;
	border-radius: 2px;
	background: #fff;
	color: var( --ccc-fg );
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.ccc-creation--enligne .ccc-btn--creer:hover,
.ccc-creation--enligne .ccc-btn--creer:focus-visible {
	background: transparent;
	color: #fff;
}

.ccc-creation--enligne .ccc-btn--creer:disabled {
	opacity: 0.45;
	cursor: default;
}

.ccc-creation--enligne .ccc-btn--creer:disabled:hover {
	background: #fff;
	color: var( --ccc-fg );
}

/* L'erreur doit rester lisible sur le fond sombre. */
.ccc-creation--enligne .ccc-creation__erreur {
	color: #ffb4a2;
}

.ccc-creation--enligne[hidden] {
	display: none;
}

/* Message d'erreur propre au bloc « Créer mes cartes en ligne » : il ne doit
   ni effacer le prix ni ressembler à une erreur de calcul. */
.ccc-creation__erreur {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: #a8321c;
}

.ccc-creation__erreur[hidden] {
	display: none;
}

/*
 * Bandeau de reprise : « vous avez une création en cours ».
 *
 * Discret mais pas invisible — il s'adresse à quelqu'un qui revient, et
 * qui n'a rien d'autre à faire sur cette page tant qu'il n'a pas retrouvé
 * son travail. D'où le filet de couleur sur le bord, comme les encarts.
 */
.ccc-reprise{margin:0 0 20px;padding:12px 16px;border-left:3px solid var(--ccc-accent,#c26747);
  background:rgba(194,103,71,.07);font-size:15px;line-height:1.5;}
.ccc-reprise__texte{margin:0;}
.ccc-reprise__lien{font-weight:700;color:var(--ccc-fg);text-decoration:underline;}
.ccc-reprise__note{display:block;margin-top:4px;font-size:13px;color:var(--ccc-muted);}
.ccc-reprise__oubli{display:inline-block;margin-top:8px;padding:0;border:0;background:none;
  font:inherit;font-size:13px;color:var(--ccc-muted);text-decoration:underline;cursor:pointer;}
.ccc-reprise__oubli:hover{color:var(--ccc-fg);}