/* Le module « Réservez en trois temps » (outils/resa3.mjs, msg 6564), aux couleurs du site 38 :
   noir, blanc, jaune #e8a613, bordeaux #8f0000. Sur fond foncé par défaut ; .r3-clair ou une section claire
   (.f38-clair) inversent les traits et l'accent. Audace unique : l'heure du jour choisi, en très grand. */
.r3 { --r3-box: #8f0000; --r3-tx: #fff; --r3-doux: rgba(255,255,255,.74); --r3-trait: rgba(255,255,255,.24); --r3-acc: #e8a613; --r3-sel-bg: #fff; --r3-sel-tx: #000; --r3-ferme: rgba(255,255,255,.66);
  color: var(--r3-tx); font-family: "Montserrat", "Montserrat Repli", system-ui, sans-serif; }
.r3.r3-clair{ --r3-tx: #000; --r3-doux: rgba(0,0,0,.72); --r3-trait: rgba(0,0,0,.22); --r3-acc: #8f0000; --r3-sel-bg: #000; --r3-sel-tx: #fff; --r3-ferme: rgba(0,0,0,.56); }
.r3 *, .r3 *::before { box-sizing: border-box; }
.r3-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.r3 fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.r3-titre { margin: 0 0 10px; font: 900 clamp(28px, 7vw, 46px)/1.08 "Montserrat", "Montserrat Repli", sans-serif; text-wrap: balance; color: inherit; }
.r3-intro { margin: 0; max-width: 60ch; font-size: 16px; line-height: 1.55; color: var(--r3-doux); }
.r3-temps { display: grid; margin-top: 26px; }
.r3-t { padding: 26px 0 30px; border-top: 1px solid var(--r3-trait); min-width: 0; }
.r3-th { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.r3-th b { font: 400 48px/1 "Anton", "Anton Repli", sans-serif; color: var(--r3-acc); }
.r3-th :is(h3, h4) { margin: 0; font: 800 20px/1.25 "Montserrat", "Montserrat Repli", sans-serif; color: inherit; text-wrap: balance; }
/* 1 · Quand */
.r3-seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--r3-trait); border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.r3-seg label { position: relative; display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 6px 10px; text-align: center; font-weight: 700; font-size: 15px; line-height: 1.2; cursor: pointer; }
.r3-seg label + label { border-left: 1px solid var(--r3-trait); }
.r3 input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.r3-seg label:has(input:checked) { background: var(--r3-sel-bg); color: var(--r3-sel-tx); }
.r3-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.r3-jours label { position: relative; display: grid; place-items: center; min-height: 50px; border: 1px solid var(--r3-trait); border-radius: 6px; font-weight: 700; font-size: 14px; cursor: pointer; }
/* 11/10 : jours fermés lisibles (contraste 4,5 demandé, 2,4 avant), barrés pour rester distincts des jours ouverts */
.r3-jours label.r3-ferme { color: var(--r3-ferme); border-style: dashed; text-decoration: line-through; }
.r3-jours label:has(input:checked) { border-color: var(--r3-acc); color: var(--r3-acc); box-shadow: inset 0 -3px 0 var(--r3-acc); }
.r3 label:has(input:focus-visible) { outline: 3px solid var(--r3-acc); outline-offset: 2px; }
.r3-heure { margin-top: 20px; min-height: 120px; }
.r3-hj { margin: 0; font-size: 15px; font-weight: 600; color: var(--r3-doux); }
.r3-hh { margin: 4px 0 0; font: 400 clamp(52px, 15vw, 76px)/1 "Anton", "Anton Repli", sans-serif; letter-spacing: .01em; white-space: nowrap; color: inherit; }
.r3-hh.r3-petit { white-space: normal; font: 600 17px/1.45 "Montserrat", "Montserrat Repli", sans-serif; max-width: 30ch; padding-top: 6px; }
.r3-hn { margin: 8px 0 0; font-size: 14px; font-weight: 700; color: var(--r3-acc); }
/* 2 · Formule */
.r3-fs { display: grid; gap: 8px; }
.r3-fs label { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; padding: 8px; border: 1px solid var(--r3-trait); border-radius: 10px; cursor: pointer; }
.r3-fs img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; display: block; }
.r3-fs label:not(:has(img)) { grid-template-columns: 1fr; padding: 14px 16px; }
.r3-fs b { display: block; font-weight: 800; font-size: 17px; line-height: 1.25; }
.r3-fs small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.35; color: var(--r3-doux); }
.r3-fs label:has(input:checked) { border-color: var(--r3-acc); box-shadow: inset 4px 0 0 var(--r3-acc); }
.r3-fs label:has(input:checked) small { color: inherit; }
/* 3 · Récapitulatif */
.r3-recap { padding: 20px 20px 18px; border-radius: 14px; background: #8f0000; color: #fff; box-shadow: 0 22px 44px -22px rgba(0,0,0,.65); }
.r3-recap dl { margin: 0 0 18px; }
.r3-recap dl div { display: grid; grid-template-columns: 78px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.25); }
.r3-recap dt { font-size: 14px; color: rgba(255,255,255,.8); }
.r3-recap dd { margin: 0; font-weight: 700; }
.r3-recap a.r3-go { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 16px; border-radius: 8px; background: #fff; color: #8f0000; font-weight: 800; font-size: 17px; text-align: center; text-decoration: none; }
.r3-recap a.r3-go:hover { background: #e8a613; color: #000; }
.r3-recap a.r3-go:focus-visible { outline: 3px solid #e8a613; outline-offset: 3px; }
.r3-recap p { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.88); }
.r3-recap p.r3-cond { font-weight: 600; color: #fff; }
@media (min-width: 900px) {
  .r3-temps { grid-template-columns: 1.15fr 1fr .95fr; gap: 0 40px; }
  .r3-jours label { min-height: 54px; }
  .r3-hh { font-size: 72px; }
}
@media (max-width: 359px) { .r3-jours label { font-size: 12px; } .r3-fs label { grid-template-columns: 56px 1fr; } .r3-fs img { width: 56px; height: 56px; } }
.r3-plus { grid-column: 1 / -1; display: none; gap: 6px; padding: 4px 4px 4px; font-size: 14px; line-height: 1.45; }
.r3-fs label:has(input:checked) .r3-plus { display: grid; }
.r3-plus em { display: block; font-style: normal; font-weight: 800; font-size: 13px; color: var(--r3-acc); }
/* « Combien êtes-vous ? » dans le récapitulatif (msg 6570) */
.r3-combien { margin: 0 0 16px; }
.r3-combien[hidden] { display: none; }
.r3-cb-l { margin: 0 0 8px !important; font: 800 17px/1.2 "Montserrat", "Montserrat Repli", sans-serif !important; color: #fff !important; }
.r3-cpt { display: grid; grid-template-columns: 58px 1fr 58px; align-items: center; border: 2px solid rgba(255,255,255,.7); border-radius: 10px; }
.r3-cpt button { height: 58px; border: 0; background: none; color: #fff; font: 400 32px/1 "Montserrat", "Montserrat Repli", sans-serif; cursor: pointer; }
.r3-cpt button:first-child { border-right: 1px solid rgba(255,255,255,.35); }
.r3-cpt button:last-child { border-left: 1px solid rgba(255,255,255,.35); }
.r3-cpt button:disabled { opacity: .3; cursor: default; }
.r3-cpt button:focus-visible { outline: 3px solid #e8a613; outline-offset: -3px; }
.r3-cpt p { margin: 0 !important; text-align: center; font-weight: 700; font-size: 16px; color: #fff !important; }
.r3-cpt output { font: 400 40px/1 "Anton", "Anton Repli", sans-serif; margin-right: 4px; vertical-align: -5px; }
.r3-total { margin: 12px 0 0 !important; font-size: 16px !important; font-weight: 600; color: #fff !important; }
.r3-total b { font: 400 30px/1 "Anton", "Anton Repli", sans-serif; color: #e8a613; }
/* Étape 1 plus compacte (msg 6610, 6615) : les jours restent, l'heure du jour choisi s'affiche moins grande, colonne plus étroite */
.r3-heure { min-height: 0; margin-top: 14px; }
.r3 .r3-hh { font-size: clamp(32px, 9vw, 40px); }
.r3 .r3-hh.r3-petit { font-size: 15px; }
.r3-jours label { min-height: 44px; font-size: 13px; }
@media (min-width: 900px) { .r3-temps { grid-template-columns: .85fr 1fr 1fr; } .r3 .r3-hh { font-size: 42px; } .r3-jours label { min-height: 46px; } }
/* Téléphone (msg 6633) : trois onglets sur une ligne, une fenêtre ouverte à la fois. Ordinateur : les trois colonnes. */
.r3-onglets, .r3-suiv { display: none; }
@media (max-width: 899px) {
  :is(.r3-js, :where(.js) .r3) .r3-onglets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 20px; }
  .r3-onglets button { display: grid; justify-items: start; gap: 2px; min-height: 76px; padding: 8px 10px; border: 1px solid var(--r3-trait); border-radius: 10px; background: none; color: inherit; text-align: left; font-family: inherit; cursor: pointer; min-width: 0; }
  .r3-onglets b { font: 400 26px/1 "Anton", "Anton Repli", sans-serif; color: var(--r3-acc); }
  .r3-onglets span { font-weight: 800; font-size: 14px; line-height: 1.2; }
  .r3-onglets small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--r3-doux); }
  .r3-onglets button[aria-selected="true"] { background: var(--r3-sel-bg); color: var(--r3-sel-tx); border-color: var(--r3-sel-bg); }
  .r3-onglets button[aria-selected="true"] small { color: inherit; opacity: .75; }
  .r3-onglets button:focus-visible { outline: 3px solid var(--r3-acc); outline-offset: 2px; }
  :is(.r3-js, :where(.js) .r3) .r3-temps { margin-top: 0; }
  :is(.r3-js, :where(.js) .r3) .r3-t { display: none; border-top: 0; padding: 18px 0 6px; }
  :is(.r3-js, :where(.js) .r3) .r3-t.r3-on { display: block; }
  :is(.r3-js, :where(.js) .r3) .r3-th { display: none; }
  :is(.r3-js, :where(.js) .r3) .r3-suiv { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; margin-top: 16px; border: 2px solid currentColor; border-radius: 8px; background: none; color: inherit; font: 800 16px/1.2 "Montserrat", "Montserrat Repli", sans-serif; cursor: pointer; }
  :is(.r3-js, :where(.js) .r3) .r3-suiv:focus-visible { outline: 3px solid var(--r3-acc); outline-offset: 2px; }
}
/* Côte à côte avec la mission sur ordinateur (msg 6661) : la moitié de largeur reprend les onglets du téléphone */
@media (min-width: 1000px) {
  .duo38 :is(.r3-js, :where(.js) .r3) .r3-onglets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
  .duo38 .r3-onglets button { display: grid; justify-items: start; gap: 2px; min-height: 80px; padding: 10px 12px; border: 1px solid var(--r3-trait); border-radius: 10px; background: none; color: inherit; text-align: left; font-family: inherit; cursor: pointer; min-width: 0; }
  .duo38 .r3-onglets b { font: 400 28px/1 "Anton", "Anton Repli", sans-serif; color: var(--r3-acc); }
  .duo38 .r3-onglets span { font-weight: 800; font-size: 15px; line-height: 1.2; }
  .duo38 .r3-onglets small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--r3-doux); }
  .duo38 .r3-onglets button[aria-selected="true"] { background: var(--r3-sel-bg); color: var(--r3-sel-tx); border-color: var(--r3-sel-bg); }
  .duo38 .r3-onglets button[aria-selected="true"] small { color: inherit; opacity: .75; }
  .duo38 .r3-onglets button:hover { border-color: var(--r3-acc); }
  .duo38 .r3-onglets button:focus-visible { outline: 3px solid var(--r3-acc); outline-offset: 2px; }
  .duo38 :is(.r3-js, :where(.js) .r3) .r3-temps { display: block; margin-top: 0; }
  .duo38 :is(.r3-js, :where(.js) .r3) .r3-t { display: none; border-top: 0; padding: 20px 0 4px; }
  .duo38 :is(.r3-js, :where(.js) .r3) .r3-t.r3-on { display: block; }
  .duo38 :is(.r3-js, :where(.js) .r3) .r3-th { display: none; }
  .duo38 :is(.r3-js, :where(.js) .r3) .r3-suiv { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; margin-top: 16px; border: 2px solid currentColor; border-radius: 8px; background: none; color: inherit; font: 800 16px/1.2 "Montserrat", "Montserrat Repli", sans-serif; cursor: pointer; }
  .duo38 :is(.r3-js, :where(.js) .r3) .r3-suiv:hover { background: var(--r3-sel-bg); color: var(--r3-sel-tx); }
  .duo38 :is(.r3-js, :where(.js) .r3) .r3-suiv:focus-visible { outline: 3px solid var(--r3-acc); outline-offset: 2px; }
}
/* « Quand » et « Formule » dans un encart, comme le récapitulatif (msg 6666) : bordeaux sur fond noir, noir sur fond
   bordeaux ; toujours texte blanc dedans, quelle que soit la section autour */
.f38-rouge .r3 { --r3-box: #000; }
@media (min-width: 1000px) { .duo38 .r3 { --r3-box: #000; } }
.r3-recap { background: var(--r3-box); }
.r3 .r3-temps .r3-t.r3-boite { --r3-tx: #fff; --r3-doux: rgba(255,255,255,.74); --r3-trait: rgba(255,255,255,.26); --r3-acc: #e8a613; --r3-sel-bg: #fff; --r3-sel-tx: #000; --r3-ferme: rgba(255,255,255,.66);
  color: #fff; background: var(--r3-box); border: 0; border-radius: 14px; padding: 18px 16px; box-shadow: 0 22px 44px -22px rgba(0,0,0,.65); }
:is(.r3-js, :where(.js) .r3) .r3-temps .r3-t.r3-boite { margin-top: 16px; }
.r3 .r3-temps .r3-t:not(.r3-boite) { padding-left: 0; padding-right: 0; }
@media (min-width: 900px) { :where(html:not(.js)) .r3:not(.r3-js) .r3-temps .r3-t.r3-boite, :is(.r3-js, :where(.js) .r3) .r3-temps .r3-t.r3-boite { align-self: start; } }
/* Le titre (msg 6667) : le 3 plus gros que le texte ; sur ordinateur, « Réservez en 3 temps » tient sur une ligne */
.r3-titre .r3-trois { display: inline-block; font-size: 1.5em; line-height: .8; vertical-align: -.08em; }
@media (min-width: 900px) { .r3-titre { white-space: nowrap; font-size: clamp(30px, 3vw, 44px); } }
/* Onglets (msg 6668) : le chiffre en gros, le libellé dessous, centrés */
.r3 .r3-onglets button { justify-items: center; align-content: center; text-align: center; gap: 4px; padding: 10px 8px; }
.r3 .r3-onglets b { font-size: 36px; line-height: .95; }
.r3 .r3-onglets span { font-size: 13.5px; line-height: 1.2; text-wrap: balance; }
@media (min-width: 1000px) { .duo38 .r3-onglets b { font-size: 40px; } .duo38 .r3-onglets span { font-size: 15px; } }
/* Ordinateur portable (msg 6699 : « que ça passe tout sur un écran ») : la carte des 3 temps resserrée à côté de la mission */
@media (min-width: 1000px) {
  .duo38 .r3-intro { display: none; }
  .duo38 :is(.r3-js, :where(.js) .r3) .r3-onglets { margin-top: 16px; }
  .duo38 .r3 .r3-onglets button { min-height: 64px; padding: 8px; }
  .duo38 .r3 .r3-onglets b { font-size: 34px; }
  .duo38 :is(.r3-js, :where(.js) .r3) .r3-t { padding-top: 14px; }
  .duo38 :is(.r3-js, :where(.js) .r3) .r3-temps .r3-t.r3-boite { margin-top: 12px; padding: 14px 16px; }
  .duo38 .r3-seg label { min-height: 42px; }
  .duo38 .r3-jours label { min-height: 40px; }
  .duo38 .r3-heure { margin-top: 10px; }
  .duo38 :is(.r3-js, :where(.js) .r3) .r3-suiv { min-height: 46px; margin-top: 12px; }
}