/* == 01 == socle ====================================== */
:root{--encre:#2b2b2b;--gris:#777;--gris2:#666;--trait:#ccc;--pale:#eee;--bleu:#0d02f4;--rouge:#cc0000}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--encre);font:16px/1.7 Verdana,Geneva,"DejaVu Sans",Tahoma,sans-serif}
img{max-width:100%;height:auto}
a{color:var(--bleu);font-weight:700;text-decoration:none}
a:hover,a:focus{color:#000;text-decoration:underline}
.feuille{max-width:1120px;margin:0 auto;padding:0 18px}
/* == 02 == fronton ==================================== */
.fronton{padding:26px 0 18px;border-bottom:2px solid var(--gris2);box-shadow:0 2px 0 #fff,0 4px 0 var(--trait)}
.enseigne{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center;color:var(--gris);font-weight:400}
.enseigne:hover{text-decoration:none;color:#000}
.embleme{grid-row:1/3;width:auto;height:74px;display:block}
.l1{font-size:34px;line-height:1.1;letter-spacing:.02em;align-self:end}
.l2{font-size:17px;letter-spacing:.14em;text-transform:uppercase;color:var(--rouge);align-self:start;margin-top:6px}
.enseigne:not(:has(.embleme)){display:block}
.enseigne:not(:has(.embleme)) .l1,.enseigne:not(:has(.embleme)) .l2{display:block}
/* == 03 == salles : rail + toile ====================== */
.salles{display:grid;grid-template-columns:232px minmax(0,1fr);gap:38px;padding:28px 0 46px}
.rail-t{margin:0 0 6px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#000;border-bottom:1px solid var(--trait);padding-bottom:4px}
.rail-l{list-style:none;margin:0 0 26px;padding:0}
.rail-l a{display:block;padding:5px 8px;border-left:7px solid var(--trait);margin-bottom:3px;color:var(--gris2);font-weight:400;font-size:15px}
.rail-l .n2 a{margin-left:14px;font-size:14px}
.rail-l a:hover,.rail-l a[aria-current]{background:var(--pale);color:#000;border-left-color:var(--rouge);text-decoration:none}
.mot{margin:0;padding:12px 14px;background:#f4f4f4;border:1px solid #ddd;font-size:14px;font-style:italic;color:#555}
.mot p{margin:0 0 6px}
.mot cite{font-style:normal;color:var(--gris)}
/* == 04 == toile ====================================== */
.toile{min-width:0}
h1{margin:0 0 20px;color:var(--gris);font-weight:400;font-size:31px;line-height:1.2}
h2{margin:34px 0 10px;color:#000;font-weight:400;font-size:22px;line-height:1.3;clear:both;border-bottom:1px dashed var(--trait);padding-bottom:4px}
p{margin:0 0 15px}
ul{margin:0 0 18px;padding-left:22px}
li{margin-bottom:5px}
.amorce{font-size:18px;font-weight:700;line-height:1.55}
.avis{font-weight:700;background:#ffecec;border-left:6px solid var(--rouge);padding:12px 16px}
.paru{font-size:13px;color:var(--gris);text-transform:uppercase;letter-spacing:.08em;margin-top:-10px}
.toile::after{content:"";display:block;clear:both}
/* == 05 == cartels (images legendees) ================= */
.cartel{margin:6px 0 18px;padding:6px;border:1px solid var(--trait);background:#fff;max-width:330px}
.cartel img{display:block;margin:0 auto}
.cartel figcaption{font-size:13px;line-height:1.45;color:var(--gris2);padding:6px 2px 0;text-align:center}
.vg{float:left;margin-right:22px}
.vd{float:right;margin-left:22px}
.vc{margin-left:auto;margin-right:auto}
.vl{max-width:100%;float:none;clear:both;margin-left:0;margin-right:0}
/* == 06 == accueil ==================================== */
.vues{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 8px}
.vue{display:flex;flex-direction:column;border:1px solid var(--trait);color:var(--encre);font-weight:400;background:#fff}
.vue img{display:block;width:100%}
.vue span{padding:10px 12px;border-top:3px solid var(--pale);font-size:15px;line-height:1.5}
.vue:hover{border-color:var(--gris2);text-decoration:none}
.vue:hover span{border-top-color:var(--rouge);color:#000}
.fil{list-style:none;padding:0}
.fil li{padding:8px 0;border-bottom:1px solid var(--pale)}
.fil span{color:var(--gris);font-size:13px;margin-left:8px}
/* == 07 == collection, tarifs ========================= */
.pays p{padding:9px 0 9px 14px;margin:0;border-left:7px solid var(--pale);border-bottom:1px solid var(--pale);font-size:15px}
.pays p strong{color:var(--rouge);text-transform:uppercase;letter-spacing:.05em;font-size:14px}
.grille{overflow-x:auto;margin:22px 0}
.tarifs{border-collapse:collapse;width:100%;min-width:300px;text-align:center}
.tarifs caption{caption-side:top;text-align:left;font-weight:700;padding-bottom:8px}
.tarifs th,.tarifs td{padding:11px 8px;border:2px solid #fff;font-weight:700}
.tarifs thead tr{background:#f5a9e1}
.tarifs .t1{background:#ced8f6}
.tarifs .t2{background:#f2f6a9}
/* == 08 == socle bas ================================== */
.socle{border-top:2px solid var(--gris2);padding:18px 0 34px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 30px;font-size:14px;color:var(--gris2)}
.socle p{margin:0}
/* == 09 == petits ecrans ============================== */
@media(max-width:820px){
.salles{grid-template-columns:1fr;gap:22px;padding-top:18px}
.rail-l{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.rail-l a{margin:0;border-left-width:4px;padding:5px 9px;background:#fafafa;font-size:14px}
.rail-l .n2 a{margin-left:0}
.mot{display:none}
.l1{font-size:26px}.l2{font-size:13px;letter-spacing:.1em}
.embleme{height:56px}
h1{font-size:25px}h2{font-size:20px}
}
@media(max-width:560px){
.vues{grid-template-columns:1fr}
.vg,.vd{float:none;margin-left:auto;margin-right:auto}
.cartel{max-width:100%}
.amorce{font-size:17px}
.tarifs{font-size:13px}
.tarifs th,.tarifs td{padding:9px 3px}
}