/* ==========================================================================
   WautoParc : les visuels, apres les frises. Chargee avec wa-frise.css, sur les memes pages (inc/frise.php).

   Les tuiles (inc/frise.php, 'classe' => 'wa-frise-tuiles') : des atouts, des regles, des besoins, qui ne se
   suivent pas. Une tuile par atout, son pictogramme et son nom ; le detail de la tuile ouverte dessous, comme la
   frise (meme geste, meme deroule : un trait fait le tour de la tuile ouverte). Au telephone, des pastilles
   carrees, le nom en tete du detail.
   Les formules (inc/visuels.php, assets/js/wa-formules.js) : les blocs de prix. Au bureau, cote a cote ; au
   telephone, une rangee d'onglets (nom et prix) et une carte a la fois, toutes dans la meme case.
   Les conditions (details.wa-rcond, dans le gabarit) : un repli, le texte entier dessous.
   ========================================================================== */

/* --- les tuiles --------------------------------------------------------------------------------------------- */
.wa-root .wa-frise-tuiles{--noeud:56px}
.wa-root .wa-frise-tuiles .wa-frise-noeud{border-radius:16px}
.wa-root .wa-frise-tuiles .wa-frise-pas:not(:last-child)::before{content:none}
.wa-root .wa-frise-lien:not(.btn){display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:15px;font-weight:700;color:var(--red-ink);text-decoration:none}
.wa-root .wa-frise-lien:not(.btn):hover{text-decoration:underline;text-underline-offset:3px}
.wa-root .wa-frise-lien.btn{margin-top:16px}
.wa-root .wa-frise-lien .ic{width:16px;height:16px;flex:none;transition:transform .25s var(--eo)}
.wa-root .wa-frise-lien:hover .ic{transform:translateX(3px)}
.wa-root .wa-frise-texte p + p{margin-top:10px}

@supports (display:contents){
	.wa-root .wa-frise-tuiles.est-vive .wa-frise-tete{align-self:stretch}
	.wa-root .wa-frise-tuiles.est-vive .wa-frise-btn{height:100%;align-items:flex-start;justify-content:flex-start;gap:16px;padding:20px 18px 18px;border:1px solid var(--line);border-radius:18px;background:#fff;text-align:left;transition:border-color .3s,box-shadow .45s var(--eo),transform .45s var(--eo)}
	.wa-root .wa-frise-tuiles.est-vive .wa-frise-libelle{align-items:flex-start}
	.wa-root .wa-frise-tuiles.est-vive .wa-frise-nom{font-size:17px;line-height:1.3;color:var(--ink)}
	.wa-root .wa-frise-tuiles.est-vive .wa-frise-noeud,.wa-root .wa-frise-tuiles.est-vive .passe .wa-frise-noeud{background:var(--paper);border-color:transparent;color:var(--red-ink)}
	.wa-root .wa-frise-tuiles.est-vive .actif .wa-frise-noeud{background:var(--red);border-color:var(--red);color:#fff;transform:none;box-shadow:0 12px 24px -12px rgba(223,41,46,.8)}
	.wa-root .wa-frise-tuiles.est-vive .actif .wa-frise-btn{border-color:var(--red);box-shadow:0 0 0 1px var(--red),0 24px 44px -30px rgba(223,41,46,.6);transform:translateY(-3px)}
	.wa-root .wa-frise-tuiles.est-vive .wa-frise-btn:focus-visible{outline:2px solid var(--red);outline-offset:3px}
	.wa-root .wa-frise-tuiles.est-vive .wa-frise-btn:focus-visible .wa-frise-noeud{outline:0}
	@media (hover:hover){
		.wa-root .wa-frise-tuiles.est-vive .wa-frise-pas:not(.actif) .wa-frise-btn:hover{border-color:#ebb6b4;transform:translateY(-2px)}
		.wa-root .wa-frise-tuiles.est-vive .wa-frise-pas:not(.actif) .wa-frise-btn:hover .wa-frise-noeud{transform:none}
	}
	.wa-root .wa-frise-tuiles .wa-frise-anneau{transform:none;top:-6px;left:-6px;width:calc(100% + 12px);height:calc(100% + 12px)}
	.wa-root .wa-frise-tuiles.est-vive .wa-frise-noeud .ic{width:26px;height:26px}
	.wa-root .wa-frise-tuiles.est-vive .wa-frise-corps{margin-top:22px}
	.wa-root .wa-frise-sans-no.est-vive .wa-frise-corps{grid-template-columns:minmax(0,1fr)}
}
/* Deux ou trois tuiles sont larges : le pictogramme a cote du nom. */
@media (min-width:761px){
	@supports (display:contents){
		.wa-root .wa-frise-tuiles.wa-frise-n2.est-vive .wa-frise-btn,.wa-root .wa-frise-tuiles.wa-frise-n3.est-vive .wa-frise-btn{flex-direction:row;align-items:center}
	}
}
@media (min-width:761px) and (max-width:1099.98px){
	.wa-root .wa-frise-tuiles.est-vive .wa-frise-btn{padding:16px 14px 14px}
	.wa-root .wa-frise-tuiles.est-vive .wa-frise-nom{font-size:15.5px}
}
@media (max-width:760.98px){
	.wa-root .wa-frise-tuiles{--noeud:48px}
	.wa-root .wa-frise-tuiles .wa-frise-noeud{border-radius:14px}
	@supports (display:contents){
		.wa-root .wa-frise-tuiles.est-vive .wa-frise-btn,.wa-root .wa-frise-tuiles.est-vive .actif .wa-frise-btn{height:auto;align-items:center;padding:0 0 2px;border:0;border-radius:14px;background:none;box-shadow:none;transform:none}
		/* La tuile ouverte se dit par son rouge, sans grandir ; son anneau la serre : cinq tuiles tiennent a 320 px. */
		.wa-root .wa-frise-tuiles .wa-frise-anneau{top:-4px;left:-4px;width:calc(100% + 8px);height:calc(100% + 8px)}
		.wa-root .wa-frise-tuiles.est-vive .wa-frise-noeud .ic{width:22px;height:22px}
		.wa-root .wa-frise-tuiles.est-vive .wa-frise-corps{margin-top:18px}
	}
}
@media (max-width:360px){
	.wa-root .wa-frise-tuiles.wa-frise-n5{--noeud:38px}
	.wa-root .wa-frise-tuiles.wa-frise-n5 .wa-frise-noeud{border-radius:12px}
}

/* --- les formules ------------------------------------------------------------------------------------------- */
/* Le dessin d'une carte de prix est dans l'enrichie, le meme partout ; ici, ce que le script fait vivre. */
.wa-root .wa-rprix-onglets{display:none}
/* Le bouton au pied de sa carte, les cartes d'un meme bloc alignees (une regle generale des cartes le collait a la liste). */
.wa-root .wa-rprix.est-vif .wa-rcarte > .btn{margin-top:auto}
@media (hover:hover){
	.wa-root .wa-rprix.est-vif .wa-rcarte{transition:transform .4s var(--eo),box-shadow .4s var(--eo)}
	.wa-root .wa-rprix.est-vif .wa-rcarte:hover{transform:translateY(-4px);box-shadow:0 28px 50px -34px rgba(11,13,19,.5)}
	.wa-root .wa-rprix.est-vif .wa-rcarte.reco:hover{box-shadow:0 0 0 1px var(--red),0 30px 54px -34px rgba(223,41,46,.6)}
}
@media (max-width:760.98px){
	.wa-root .wa-rprix.est-vif{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;max-width:none}
	.wa-root .wa-rprix.est-vif > .wa-rprix-onglets{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:4px;border-radius:16px;background:rgba(11,13,19,.06);overflow-x:auto;scrollbar-width:none}
	.wa-root .wa-rprix.est-vif > .wa-rprix-onglets::-webkit-scrollbar{display:none}
	.wa-root .wa-rprix-onglet{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;margin:0;padding:8px 6px;border:0;border-radius:12px;background:none;font:inherit;color:#5d6067;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .25s,color .25s,box-shadow .25s}
	/* Onglets non choisis : #5d6067, 5,15:1 sur leur barre (--muted : 4,44) (front3#1). */
	.wa-root .wa-rprix-onglet .nom{font-size:14px;font-weight:700;line-height:1.2;color:inherit;text-wrap:balance}
	.wa-root .wa-rprix-onglet .prix{font-size:12.5px;font-weight:600;line-height:1.2}
	.wa-root .wa-rprix-onglet[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 6px 16px -10px rgba(11,13,19,.45)}
	.wa-root .wa-rprix-onglet[aria-selected="true"] .prix{color:var(--red-ink)}
	.wa-root .wa-rprix-onglet.reco .nom::after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 2px 5px;border-radius:50%;background:var(--red);vertical-align:middle}
	.wa-root .wa-rprix-onglet:focus-visible{outline:2px solid var(--red);outline-offset:1px}
	.wa-root .wa-rprix.est-vif > .wa-rcarte{grid-row:2;grid-column:1;visibility:hidden;opacity:0;transform:translateX(16px);transition:opacity .25s var(--eo),transform .4s var(--eo),visibility 0s linear .25s}
	.wa-root .wa-rprix.est-vif > .wa-rcarte.avant{transform:translateX(-16px)}
	.wa-root .wa-rprix.est-vif > .wa-rcarte.actif{visibility:visible;opacity:1;transform:none;transition:opacity .4s var(--eo) .06s,transform .5s var(--eo) .06s,visibility 0s}
}
/* Quatre onglets sur un ecran etroit : deux rangees, tous visibles, aucun nom tronque. */
@media (max-width:480.98px){
	.wa-root .wa-rprix.est-vif.wa-rprix-n4 > .wa-rprix-onglets{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- les conditions : un repli, le texte entier dessous ------------------------------------------------------ */
.wa-root .wa-rcond{margin:2px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.wa-root .wa-rcond > summary{display:inline-flex;align-items:center;gap:8px;padding:4px 0;cursor:pointer;list-style:none;font-weight:600;color:var(--ink-soft)}
.wa-root .wa-rcond > summary::-webkit-details-marker{display:none}
.wa-root .wa-rcond > summary::after{content:"";width:6px;height:6px;margin-top:-3px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:rotate(45deg);transition:transform .2s}
.wa-root .wa-rcond[open] > summary::after{margin-top:3px;transform:rotate(-135deg)}
.wa-root .wa-rcond > summary:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
.wa-root .wa-rcond > p{margin:6px 0 0}
.wa-root .wa-shead .wa-rcond{max-width:64ch}

/* --- l'entree, et sans mouvement ------------------------------------------------------------------------------ */
@media (prefers-reduced-motion:no-preference){
	.wa-root .wa-rprix.est-vif.vu > .wa-rcarte{animation:wa-vis-monte .6s var(--eo) backwards;animation-delay:calc(var(--i) * 90ms)}
}
@keyframes wa-vis-monte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.wa-root .wa-rprix.sans-transition *,.wa-root .wa-rprix.sans-transition{transition:none!important}
@media (prefers-reduced-motion:reduce){
	.wa-root .wa-rprix *,.wa-root .wa-rprix{transition:none!important;animation:none!important}
}

/* --- a l'impression : toutes les formules ----------------------------------------------------------------------- */
@media print{
	.wa-root .wa-rprix-onglets{display:none!important}
	.wa-root .wa-rprix.est-vif > .wa-rcarte{visibility:visible!important;opacity:1!important;transform:none!important;grid-row:auto!important}
}