/* ============================================================
   LES POLICES, SERVIES PAR LA BASE ELLE-MEME
   ------------------------------------------------------------
   Ce bloc remplace l'appel a Google Fonts qui occupait ces
   lignes. Deux raisons, dans cet ordre :

   1. IL NE MARCHAIT PAS. Mesure du 07/09/2026 sur la vitrine en
      ligne : ni "Noto Naskh Arabic" ni "Amiri" n'etaient
      disponibles dans la page, et l'arabe tombait sur la police
      systeme. C'est tout l'ecart de dessin entre la page arabe de
      clinic et celle de yaquine.
   2. UN APPEL A GOOGLE FONTS ENVOIE L'ADRESSE IP DE CHAQUE
      VISITEUR CHEZ UN TIERS. Regle posee sur clinic : jamais de
      Google Fonts. La plate-forme peut etre vendue en France.

   Les fichiers viennent de clinic (WebContent/fonts), a l'octet
   pres. Ils sont deposes dans WebContent/fonts de yaquine : un
   fichier de WebContent est servi a la racine de la base, ce qui
   a ete VERIFIE le 07/09 (yaquine-32.png repond 200 a l'adresse
   .../yaquine.nsf/yaquine-32.png). Cette feuille etant servie a
   .../yaquine.nsf/clinica.css, l'adresse relative fonts/xxx.woff2
   se resout au bon endroit.

   font-display:swap : le texte s'affiche tout de suite dans la
   police de repli, puis se redessine. Jamais de page blanche.

   Latin : Outfit pour les titres, Manrope pour le texte.
   Arabe  : Cairo pour les titres, Almarai pour le texte.
   ============================================================ */
@font-face{font-family:"Outfit";font-weight:400;font-display:swap;src:url("fonts/outfit-400.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-weight:700;font-display:swap;src:url("fonts/outfit-700.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-weight:800;font-display:swap;src:url("fonts/outfit-800.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-weight:900;font-display:swap;src:url("fonts/outfit-900.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:400;font-display:swap;src:url("fonts/manrope-400.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:500;font-display:swap;src:url("fonts/manrope-500.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:600;font-display:swap;src:url("fonts/manrope-600.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:700;font-display:swap;src:url("fonts/manrope-700.woff2") format("woff2")}
@font-face{font-family:"Cairo";font-weight:400;font-display:swap;src:url("fonts/cairo-400.woff2") format("woff2")}
@font-face{font-family:"Cairo";font-weight:700;font-display:swap;src:url("fonts/cairo-700.woff2") format("woff2")}
@font-face{font-family:"Cairo";font-weight:900;font-display:swap;src:url("fonts/cairo-900.woff2") format("woff2")}
@font-face{font-family:"Almarai";font-weight:400;font-display:swap;src:url("fonts/almarai-400.woff2") format("woff2")}
@font-face{font-family:"Almarai";font-weight:700;font-display:swap;src:url("fonts/almarai-700.woff2") format("woff2")}
@font-face{font-family:"Almarai";font-weight:800;font-display:swap;src:url("fonts/almarai-800.woff2") format("woff2")}

/* Clinica - habillage global E11. Importer ce fichier dans Designer
   (Resources > StyleSheets), ne jamais l'editer dans l'editeur CSS de
   Designer (il casse certaines proprietes) : re-importer a chaque fois.
   Couleurs de la charte : #173a4d (encre), #8FBE00 (action),
   #A5CEEB (ciel), #96D9DB (lagon). Pas de propriete personnalisee. */

body {
  background-color: #f7f8f9;
  color: #33475b;
  font-family: "Manrope", "Outfit", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* L'arabe : plus grand, plus aere, et une pile de polices qui le dessine
   vraiment (Tahoma est la seule presente partout). */
[dir="rtl"] {
  font-family: "Almarai", "Cairo", Tahoma, "Segoe UI", "Arial Unicode MS", sans-serif;
  font-size: 118%;
  line-height: 2;
  letter-spacing: 0;
}
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] button {
  font-family: "Almarai", "Cairo", Tahoma, "Segoe UI", "Arial Unicode MS", sans-serif;
  font-size: 16px;
}

h1 { color: #173a4d; font-size: 30px; font-weight: 700; letter-spacing: -0.4px; margin: 20px 0 12px 0; line-height: 1.2; }
h2 { color: #173a4d; font-size: 20px; font-weight: 700; margin: 24px 0 10px 0; line-height: 1.3; }
h3 { color: #173a4d; font-size: 16px; font-weight: 700; margin: 18px 0 8px 0; }
p  { margin: 0 0 14px 0; }
a  { color: #173a4d; }
a:hover { color: #0e2c3b; }

/* le span des xp:text ne doit pas casser l'heritage de police */
span { font-family: inherit; font-size: inherit; }

table { background-color: transparent; border-collapse: collapse; }
th { color: #5a6b7c; font-weight: 700; font-size: 12px; letter-spacing: 0.5px;
     text-transform: uppercase; padding: 9px 8px 8px 0; text-align: left; }
td { padding: 8px 8px 8px 0; }

input, textarea, select {
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  border: 1px solid #c9d5e2;
  border-radius: 7px;
  padding: 9px 11px;
  background-color: #ffffff;
  color: #22303c;
  box-sizing: border-box;
}
input:focus, textarea:focus, select:focus {
  border-color: #8FBE00;
  outline: none;
  box-shadow: 0 0 0 3px rgba(143, 190, 0, 0.18);
}
textarea { line-height: 1.6; }

button, input[type="button"], input[type="submit"], .xspButtonCommand {
  background-color: #8FBE00;
  color: #173a4d;
  border: none;
  border-radius: 8px;
  padding: 11px 24px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14);
}
button:hover, input[type="button"]:hover, input[type="submit"]:hover, .xspButtonCommand:hover {
  background-color: #7da800;
}

.cl-nav a:hover { text-decoration: underline; }

/* ------------------------------------------------------ formulaires
   Gabarit commun au formulaire de contact et a l'etape "Vos
   coordonnees" de la prise de rendez-vous. Les classes s'appliquent
   aux controles XPages (xp:label -> label, xp:inputText -> input). */

.cl-carte {
  background: #ffffff;
  border: 1px solid #e2e8ef;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(23, 58, 77, 0.08);
  overflow: hidden;
}
.cl-carte-tete {
  background: #173a4d;
  color: #ffffff;
  padding: 20px 28px;
  border-bottom: 4px solid #8FBE00;
}
.cl-carte-titre { font-size: 21px; font-weight: 700; letter-spacing: 0.2px; }
.cl-carte-sous  { color: #cfe3ea; font-size: 14px; margin-top: 6px; }
.cl-carte-corps { padding: 26px 28px 10px 28px; }
.cl-carte-pied  { padding: 6px 28px 26px 28px; }

.cl-form .cl-champ { margin-bottom: 18px; }
.cl-form .cl-rang { display: flex; gap: 18px; flex-wrap: wrap; }
.cl-form .cl-rang > .cl-champ { flex: 1; min-width: 190px; }
.cl-form label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #5a6b7c;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.cl-form input, .cl-form textarea {
  width: 100%;
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid #cfd9e4;
  border-radius: 9px;
  background-color: #fbfcfd;
}
.cl-form input:focus, .cl-form textarea:focus { background-color: #ffffff; }
.cl-form .cl-aide { color: #8996a5; font-size: 13px; margin-top: 4px; }
.cl-form .cl-erreur {
  background-color: #fadbd8;
  color: #943126;
  font-weight: 700;
  border-radius: 9px;
  padding: 11px 16px;
  margin-bottom: 18px;
}

/* L'arabe : etiquettes et champs nettement plus grands. */
[dir="rtl"] .cl-carte-titre { font-size: 25px; }
[dir="rtl"] .cl-carte-sous { font-size: 17px; }
[dir="rtl"] .cl-form label { font-size: 16px; letter-spacing: 0; text-transform: none; }
[dir="rtl"] .cl-form input, [dir="rtl"] .cl-form textarea { font-size: 19px; padding: 14px 16px; }
[dir="rtl"] .cl-form .cl-aide { font-size: 16px; }
[dir="rtl"] .cl-form .cl-erreur { font-size: 17px; }
[dir="rtl"] .cl-form button, [dir="rtl"] .xspButtonCommand { font-size: 18px; padding: 13px 30px; }

/* Le recapitulatif sombre pose au-dessus du formulaire de RDV. */
.cl-recap {
  background: #173a4d;
  color: #ffffff;
  border-radius: 12px;
  padding: 18px 24px;
  box-shadow: 5px 5px 0 #8FBE00;
  margin-bottom: 22px;
}
.cl-recap-etiq {
  color: #8FBE00;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.cl-recap-valeur { font-size: 19px; font-weight: 700; margin-top: 7px; }
.cl-recap-sous { font-size: 14px; color: #cfe3ea; margin-top: 4px; }
[dir="rtl"] .cl-recap-etiq { font-size: 15px; letter-spacing: 0; text-transform: none; }
[dir="rtl"] .cl-recap-valeur { font-size: 22px; }
[dir="rtl"] .cl-recap-sous { font-size: 17px; }

/* --------------------------------- formulaires : deuxieme passe (E13)
   Ce que la premiere passe laissait de cote : la respiration entre les
   rangs, le survol, la transition de focus, le champ requis, et le
   comportement du textarea. */

.cl-carte-tete {
  background-image: linear-gradient(180deg, #1d4a61 0%, #173a4d 100%);
}
.cl-carte-corps { padding: 28px 30px 14px 30px; }
.cl-carte-pied {
  padding: 18px 30px 26px 30px;
  border-top: 1px solid #eef1f5;
  background-color: #fbfcfd;
}

.cl-form .cl-champ { margin-bottom: 20px; }
.cl-form .cl-rang { gap: 20px; }
.cl-form label { color: #4a5c6e; }
.cl-form input, .cl-form textarea {
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.cl-form input:hover, .cl-form textarea:hover { border-color: #aebfd2; }
.cl-form textarea { min-height: 130px; resize: vertical; }
.cl-form input::placeholder, .cl-form textarea::placeholder { color: #adb8c4; }
.cl-form .cl-aide { margin-top: 6px; line-height: 1.5; }
.cl-form .cl-erreur { line-height: 1.5; }
.cl-form button, .cl-form .xspButtonCommand { min-width: 190px; }

/* Le champ obligatoire : une pastille verte devant l'etiquette. */
.cl-form .cl-requis label:before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #8FBE00;
  margin-right: 7px;
  vertical-align: middle;
}
[dir="rtl"] .cl-form .cl-requis label:before { margin-right: 0; margin-left: 7px; }

/* Les cases a cocher du profil praticien : lisibles et espacees. */
.cl-form .xspCheckBoxGroup label,
.cl-form .xspInputFieldCheckbox + label { text-transform: none; font-weight: 500; }
.cl-form .xspCheckBoxGroup td { padding-right: 18px; }
.cl-form input[type="checkbox"] { width: auto; margin-right: 6px; }


/* ------------------------------------------------ boutons : anti-rognage
   Vecu le 24/08 : le libelle des boutons etait coupe en bas ("Rechercher",
   "Enregistrer", "Se connecter"). Cause : le theme Domino impose au
   .xspButtonCommand une hauteur et un line-height calcules, que notre
   padding fait deborder ; le contenu est alors rogne. Remede : hauteur
   libre, line-height explicite, boite en border-box, debordement visible,
   et aucune contrainte de hauteur heritee. */

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.xspButtonCommand,
.lotusBtn,
.dijitButton .dijitButtonNode {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  line-height: 1.35 !important;
  padding: 12px 26px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  white-space: nowrap;
  vertical-align: middle;
  display: inline-block;
  text-align: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Le libelle interieur que Domino enveloppe parfois dans un span. */
button span,
.xspButtonCommand span,
.dijitButton .dijitButtonText {
  line-height: 1.35 !important;
  vertical-align: baseline;
  display: inline;
}

/* Un bouton pleine largeur (connexion) garde le meme confort vertical. */
button[style*="width:100%"], .xspButtonCommand[style*="width:100%"] {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

[dir="rtl"] button, [dir="rtl"] .xspButtonCommand {
  line-height: 1.6 !important;
  padding: 14px 30px !important;
}


/* =====================================================================
   M4 - 25/08 : typographie arabe, respiration des pages, boutons.
   ===================================================================== */

/* --- 1. l'arabe ------------------------------------------------------ */
[dir="rtl"] {
  font-family: "Almarai", "Cairo", Tahoma, "Segoe UI", "Arial Unicode MS", sans-serif;
  font-size: 120%;
  line-height: 2.05;
  letter-spacing: 0;
  word-spacing: 0.04em;
}
[dir="rtl"] b, [dir="rtl"] strong { font-weight: 700; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 {
  font-family: "Cairo", "Almarai", Tahoma, "Segoe UI", sans-serif;
  line-height: 1.7;
  letter-spacing: 0;
}
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] button {
  font-family: "Almarai", "Cairo", Tahoma, "Segoe UI", "Arial Unicode MS", sans-serif;
  font-size: 18px;
  line-height: 1.9;
}
/* L'arabe n'a pas de capitales : toute mise en majuscules est du bruit. */
[dir="rtl"] * { text-transform: none !important; }

/* --- 2. la respiration en bas de page --------------------------------
   Le contenu se collait au bord inferieur. On pose la reserve sur le
   conteneur de contenu, PAS sur le formulaire : les pages vitrine ont un
   pied de page sombre qui doit rester colle au bas de la fenetre. */
/* Remplissage et NON marge : une marge basse fusionne avec celle du
   formulaire XPages qui enveloppe la page, s'echappe du document et ne
   cree aucun espace (mesure le 07/09 : 0 px sous le contenu). Le
   remplissage, lui, ne fusionne jamais. */
/* !important, ET C'EST INDISPENSABLE. Mesure du 07/09/2026 au soir : la
   reserve posee ici n'apparaissait sur AUCUNE page. Cause : les pages
   portent leur propre style EN LIGNE sur le div .cl-contenu, et un style
   en ligne bat une feuille de style. Vingt et une pages y ecrivent
   « padding:0 20px » ou « padding:0 24px » — un raccourci qui met le
   remplissage bas a ZERO — et trente-cinq y ecrivent « margin: ... »,
   ce qui annule le « margin-bottom:0 » pose ici et laisse la marge
   fusionner comme avant. Sans !important la regle ne sert a rien.
   Le jour ou les 981 styles en dur seront repris, les !important
   pourront tomber. */
.cl-contenu { margin-bottom: 0 !important; padding-bottom: 56px !important; }
[dir="rtl"] .cl-contenu { padding-bottom: 72px !important; }

/* --- 1 bis. LA HAUTEUR DES BOITES, ET POURQUOI RIEN NE POUVAIT COLLER ---
   Mesure du 10/09/2026 sur apps01, page vtServices : le document faisait
   3 113 px de haut, et html, body ET form en faisaient 631 — c'est-a-dire
   exactement la hauteur de la fenetre. La regle vient de la feuille XPages
   elle-meme, xsp.css : « html, body, form { height: 100% } ».

   Consequence, et c'est elle qui a fait echouer la premiere tentative de
   menu colle : un element « position: sticky » ne colle QUE dans la boite
   de son parent. Tant que cette boite s'arrete au bas de la fenetre, le
   menu se decolle des le premier ecran franchi. Le style etait bien
   applique — verifie, « position: sticky » etait bien la — mais il n'avait
   nulle part ou coller.

   height:auto laisse les boites grandir avec le contenu ; min-height:100%
   conserve ce que la regle d'origine cherchait a obtenir, un formulaire qui
   remplit la fenetre meme sur une page courte. Verifie apres coup : le form
   passe de 631 a 3 113 px.

   Le second point : « xp:text escape="false" » rend un SPAN, donc une boite
   EN LIGNE, dans laquelle on place du contenu en blocs. C'est un emboitement
   invalide, et c'est ce span qui devenait le parent du menu. display:contents
   efface la boite du span sans toucher a son contenu : le menu a alors pour
   parent le formulaire, qui fait toute la hauteur de la page. */
html, body, form.xspForm { height: auto; min-height: 100%; }
.xspForm > .xspTextComputedField { display: contents; }

/* --- 2 bis. la police du contenu, contre les styles en dur -----------
   Trente pages posent leur propre font-family sur le div .cl-contenu
   (« sans-serif » ou « Segoe UI »), en attribut style. Un style en
   ligne bat une feuille de style : sans !important ici, les polices
   ci-dessus ne s'appliqueraient qu'a la vitrine et jamais aux pages
   connectees. C'est la seule facon de corriger les trente pages sans
   les rouvrir une a une - et le jour ou les 981 styles en dur seront
   repris, ces deux regles pourront disparaitre. */
.cl-contenu { font-family: "Manrope", "Outfit", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif !important; }
[dir="rtl"] .cl-contenu { font-family: "Almarai", "Cairo", Tahoma, "Segoe UI", "Arial Unicode MS", sans-serif !important; }
.cl-contenu h1, .cl-contenu h2, .cl-contenu h3 { font-family: "Outfit", "Manrope", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; }
[dir="rtl"] .cl-contenu h1, [dir="rtl"] .cl-contenu h2,
[dir="rtl"] .cl-contenu h3 { font-family: "Cairo", "Almarai", Tahoma, "Segoe UI", sans-serif; }

/* --- 3. les boutons : plus jamais rognes ------------------------------ */
button, input[type="button"], input[type="submit"], input[type="reset"],
.xspButtonCommand, .lotusBtn, .dijitButton .dijitButtonNode {
  padding: 13px 28px !important;
  line-height: 1.4 !important;
  height: auto !important;
  min-height: 46px !important;
  max-height: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
[dir="rtl"] button, [dir="rtl"] .xspButtonCommand {
  padding: 15px 32px !important;
  line-height: 1.9 !important;
  min-height: 56px !important;
}

/* --- 4. le calendrier de prise de rendez-vous ------------------------- */
.cl-cal { border-collapse: separate; border-spacing: 5px; margin: 0 auto; background: transparent; }
.cl-cal th { width: 64px; color: #8996a5; font-size: 11px; font-weight: 600;
             text-transform: uppercase; letter-spacing: 0.4px; padding-bottom: 2px;
             text-align: center; }
.cl-cal td { width: 64px; height: 52px; padding: 0; text-align: center; vertical-align: middle; }
.cl-cal .cl-vide { background: #f2f4f7; color: #c3cbd4; border-radius: 9px; font-size: 14px; }
.cl-cal a.cl-jour {
  display: block; height: 52px; box-sizing: border-box; padding-top: 7px;
  background: #eef8dd; border: 1.5px solid #8FBE00; border-radius: 9px;
  text-decoration: none; color: #173a4d; transition: background-color 0.12s;
}
.cl-cal a.cl-jour:hover { background: #e2f2cf; }
.cl-cal a.cl-jour .cl-num { font-size: 17px; font-weight: 700; line-height: 1.05; }
.cl-cal a.cl-jour .cl-nb { font-size: 10.5px; color: #3f6b00; line-height: 1.3; }
[dir="rtl"] .cl-cal th { font-size: 13px; }
[dir="rtl"] .cl-cal a.cl-jour .cl-num { font-size: 19px; }
[dir="rtl"] .cl-cal a.cl-jour .cl-nb { font-size: 13px; line-height: 1.2; }
[dir="rtl"] .cl-cal a.cl-jour { padding-top: 4px; }

/* --------------------------------------------------------------------
   M7 - grille hebdomadaire du planning RH.
   Les puces de creneau sont posees en HTML serveur (ssjsRH / rhPlanning),
   la mise en forme est ici pour ne pas la repeter a chaque cellule.
   -------------------------------------------------------------------- */
.cl-grille {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 900px;
  background: #ffffff;
  border: 1px solid #e2e8ef;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(23, 58, 77, 0.07);
}
.cl-grille th {
  background: #f6f9fb;
  color: #5a6b7c;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 11px 10px;
  border-bottom: 1px solid #e2e8ef;
  text-align: center;
  width: 12.5%;
}
.cl-grille td {
  vertical-align: top;
  padding: 9px 9px 5px 9px;
  border-bottom: 1px solid #eef2f6;
  border-left: 1px solid #eef2f6;
}
.cl-grille td.cl-emp { border-left: 0; }
.cl-grille tr:last-child td { border-bottom: 0; }
.cl-grille th.cl-auj { background: #eef4fa; color: #1f4e79; }
.cl-grille td.cl-auj { background: #fafcfe; }
.cl-grille a.cl-plus {
  display: block;
  text-align: center;
  color: #b4bcc6;
  border: 1px dashed #d7dee6;
  border-radius: 8px;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
}
.cl-grille a.cl-plus:hover { color: #3f6b00; border-color: #8FBE00; background: #f7fbef; }
[dir="rtl"] .cl-grille td { border-left: 0; border-right: 1px solid #eef2f6; }
[dir="rtl"] .cl-grille td.cl-emp { border-right: 0; }

/* --------------------------------------------------------------------
   M8 - menu lateral du back-office.
   Accordeon natif <details>/<summary> : aucun JavaScript client. Le
   marqueur par defaut du summary est retire et remplace par un chevron
   pilote par l'etat [open].
   -------------------------------------------------------------------- */
.cl-bureau {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  max-width: 1460px;
  margin: 24px auto 0 auto;
  padding: 0 24px;
}
.cl-bureau-corps { flex: 1; min-width: 0; }
.cl-bureau-corps > .cl-contenu { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }

.cl-menu {
  flex: 0 0 274px;
  width: 274px;
  background: #ffffff;
  border: 1px solid #e2e8ef;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(23, 58, 77, 0.07);
  overflow: hidden;
  position: sticky;
  top: 16px;
}
.cl-rub { border-bottom: 1px solid #eef2f6; }
.cl-rub:last-child { border-bottom: 0; }

.cl-menu .cl-tete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #173a4d;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.cl-menu .cl-tete::-webkit-details-marker { display: none; }
.cl-menu .cl-tete::marker { content: ""; }
.cl-menu .cl-tete:hover { background: #f6f9fb; }
.cl-menu .cl-ic { width: 20px; text-align: center; font-size: 15px; line-height: 1; }
.cl-menu .cl-tete::after {
  content: "\203A";
  margin-left: auto;
  color: #8996a5;
  font-size: 17px;
  line-height: 1;
}
[dir="rtl"] .cl-menu .cl-tete::after { margin-left: 0; margin-right: auto; content: "\2039"; }
.cl-rub[open] > .cl-tete {
  background: #f2f7fa;
  border-left: 4px solid #8FBE00;
  padding-left: 14px;
}
[dir="rtl"] .cl-rub[open] > .cl-tete {
  border-left: 0;
  border-right: 4px solid #8FBE00;
  padding-left: 18px;
  padding-right: 14px;
}
.cl-rub[open] > .cl-tete::after { content: "\2039"; }
[dir="rtl"] .cl-rub[open] > .cl-tete::after { content: "\203A"; }

.cl-menu .cl-corps { padding: 2px 0 10px 0; }
.cl-menu .cl-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px 9px 48px;
  font-size: 14px;
  text-decoration: none;
  color: #5a6b7c;
}
[dir="rtl"] .cl-menu .cl-item { padding: 9px 48px 9px 18px; }
.cl-menu a.cl-item:hover { background: #f6f9fb; color: #173a4d; }
.cl-menu a.cl-actif { background: #173a4d; color: #ffffff; font-weight: 600; }
.cl-menu .cl-futur { color: #b4bcc6; cursor: not-allowed; }
.cl-menu .cl-pastille {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #f0f2f5;
  color: #98a3b0;
  padding: 2px 7px;
  border-radius: 20px;
}
[dir="rtl"] .cl-menu .cl-pastille { margin-left: 0; margin-right: auto; }

@media (max-width: 980px) {
  .cl-bureau { display: block; padding: 0 16px; }
  .cl-menu { width: auto; position: static; margin-bottom: 20px; }
}

/* ==================================================================== *
 * M12 - LES DOCUMENTS IMPRIMABLES
 *
 * Pas de bibliotheque PDF : le document est une page HTML que le
 * navigateur imprime ou enregistre en PDF (Ctrl+P). Tout ce qui n'est
 * pas le document lui-meme (barre d'outils, navigation) disparait a
 * l'impression - c'est le role du bloc "@media print" en fin de section.
 * ==================================================================== */

.im-fond {
  background: #eef1f5;
  min-height: 100vh;
  padding: 0 0 60px 0;
  font-family: sans-serif;
}

/* La barre d'outils : a l'ecran seulement. */
.im-barre {
  background: #173a4d;
  color: #ffffff;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
}
.im-barre .im-bouton {
  background: #ffffff;
  color: #173a4d;
  border: 0;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.im-barre .im-retour {
  color: #b9cddb;
  text-decoration: none;
  margin-left: auto;
}
[dir="rtl"] .im-barre .im-retour { margin-left: 0; margin-right: auto; }

/* La feuille. 210mm de large : ce que l'on voit a l'ecran est ce qui
   sortira sur du A4. */
.im-page {
  background: #ffffff;
  width: 210mm;
  max-width: 100%;
  min-height: 250mm;
  margin: 28px auto;
  padding: 18mm 16mm;
  box-sizing: border-box;
  box-shadow: 0 4px 18px rgba(23, 58, 77, 0.16);
  color: #1c2b36;
  font-size: 13px;
  line-height: 1.5;
}

.im-tete {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  border-bottom: 2px solid #173a4d;
  padding-bottom: 14px;
  margin-bottom: 22px;
}
.im-clinique { flex: 1 1 auto; }
.im-nom {
  font-size: 19px;
  font-weight: 700;
  color: #173a4d;
  margin-bottom: 5px;
}
.im-coord { font-size: 12px; color: #5a6b7c; line-height: 1.6; }
.im-doc { flex: 0 0 auto; text-align: right; }
[dir="rtl"] .im-doc { text-align: left; }
.im-titre {
  font-size: 22px;
  font-weight: 700;
  color: #173a4d;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.im-ref { font-size: 13px; color: #5a6b7c; margin-top: 4px; }

.im-blocs {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.im-bloc {
  flex: 1 1 200px;
  border: 1px solid #dde4ec;
  border-radius: 7px;
  padding: 11px 14px;
}
.im-large { flex: 1 1 100%; }
.im-etiq {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8996a5;
  margin-bottom: 5px;
}
.im-val { font-size: 13px; line-height: 1.6; }
.im-motif {
  border: 1px solid #dde4ec;
  border-radius: 7px;
  padding: 11px 14px;
  margin-bottom: 18px;
}

/* Ce qui manque est ecrit SUR le document, pas seulement a l'ecran. */
.im-avert {
  border: 1px solid #c98b2e;
  background: #fdf6e8;
  color: #7a5310;
  border-radius: 7px;
  padding: 10px 14px;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 600;
}
.im-manque { color: #a4571f; font-weight: 600; }

.im-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
}
.im-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5a6b7c;
  border-bottom: 1px solid #173a4d;
  padding: 7px 8px;
}
[dir="rtl"] .im-table th { text-align: right; }
.im-table td {
  border-bottom: 1px solid #e7ecf2;
  padding: 9px 8px;
  vertical-align: top;
}
.im-num { text-align: right; white-space: nowrap; }
[dir="rtl"] .im-num { text-align: left; }
.im-petit { font-size: 10px; color: #98a3b0; margin-top: 2px; }
.im-vide { color: #98a3b0; font-style: italic; }

.im-totaux {
  width: 62%;
  margin-left: auto;
  border-collapse: collapse;
  margin-bottom: 22px;
}
[dir="rtl"] .im-totaux { margin-left: 0; margin-right: auto; }
.im-totaux td {
  padding: 6px 8px;
  border-bottom: 1px solid #eef1f5;
  font-size: 13px;
}

.im-note {
  font-size: 12px;
  color: #5a6b7c;
  margin-bottom: 20px;
}
.im-signature {
  margin-top: 26px;
  width: 62%;
  margin-left: auto;
  font-size: 11px;
  color: #5a6b7c;
}
[dir="rtl"] .im-signature { margin-left: 0; margin-right: auto; }
.im-cadre {
  height: 26mm;
  border: 1px dashed #c3ccd6;
  border-radius: 6px;
  margin-top: 6px;
}
.im-pied {
  margin-top: 30px;
  border-top: 1px solid #dde4ec;
  padding-top: 10px;
  font-size: 11px;
  color: #8996a5;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.im-date { margin-left: auto; white-space: nowrap; }
[dir="rtl"] .im-date { margin-left: 0; margin-right: auto; }

.im-erreur {
  background: #ffffff;
  border: 1px solid #c0392b;
  border-radius: 10px;
  max-width: 640px;
  margin: 40px auto;
  padding: 26px 30px;
  color: #7d2119;
}

/* -------- L'impression proprement dite -------- */
@media print {
  .im-barre { display: none; }
  .im-fond { background: #ffffff; padding: 0; }
  .im-page {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }
  .im-table tr { page-break-inside: avoid; }
  .im-totaux, .im-signature, .im-avert { page-break-inside: avoid; }
  .im-avert { background: #ffffff; }
}
@page { size: A4; margin: 14mm; }

/* ==================================================================== *
 * R1 - RESPONSIVE (29/08/2026)
 *
 * Prealable indispensable, sans quoi RIEN de ce qui suit ne s'applique :
 * chaque XPage porte, dans <xp:this.resources>, la balise
 *
 *   <xp:headTag tagName="meta">
 *     <xp:this.attributes>
 *       <xp:parameter name="name"    value="viewport"/>
 *       <xp:parameter name="content" value="width=device-width, initial-scale=1"/>
 *     </xp:this.attributes>
 *   </xp:headTag>
 *
 * Sans elle, un navigateur mobile rend la page dans une fenetre
 * virtuelle de 980 px puis la reduit : les @media ci-dessous ne se
 * declenchent jamais, et l'utilisateur doit pincer pour lire. C'est la
 * ligne unique qui a fait passer vtAccueil de trois colonnes illisibles
 * a une colonne confortable.
 *
 * Deux paliers seulement, et ils correspondent a des objets reels :
 *   900 px  - tablette en portrait, petit portable
 *   620 px  - telephone
 * ==================================================================== */

/* Ce qui ne doit JAMAIS deborder, quel que soit l'ecran. */
img, video, canvas { max-width: 100%; height: auto; }
pre, code { white-space: pre-wrap; word-break: break-word; }

/* -------------------------------------------------- palier tablette */
@media (max-width: 900px) {

  /* Le contenu porte le defilement horizontal des tableaux larges.
     .cl-grille est declaree min-width: 900px : sans ce conteneur, elle
     pousse toute la page et l'ecran part en travers. Ici, elle glisse
     a l'interieur de la zone de contenu et le reste de la page reste
     droit. */
  .cl-contenu { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .cl-bureau { display: block; padding: 0 14px; gap: 0; }
  .cl-bureau-corps { width: auto; }
  .cl-menu { width: auto; position: static; margin-bottom: 18px; }

  /* La barre de navigation passe a la ligne au lieu de deborder. */
  .cl-nav { flex-wrap: wrap; row-gap: 8px; padding-left: 14px; padding-right: 14px; }

  .cl-carte { border-radius: 12px; }
  .cl-carte-tete, .cl-carte-corps, .cl-carte-pied { padding-left: 18px; padding-right: 18px; }

  /* Les tableaux fabriques en SSJS (tableauHtml) : on serre un peu. */
  table { font-size: 13.5px; }
}

/* ------------------------------------------------- palier telephone */
@media (max-width: 620px) {

  body { font-size: 15.5px; }

  /* Une seule colonne, partout. Un champ a moitie large sur un
     telephone ne sert personne. */
  .cl-form .cl-rang { display: block; }
  .cl-form .cl-rang > .cl-champ { min-width: 0; width: auto; }

  /* Les boutons se prennent au pouce : pleine largeur, hauteur franche.
     min-width: 190px les faisait deborder sur les petits ecrans. */
  .cl-form button,
  .cl-form .xspButtonCommand,
  .xspButtonCommand {
    min-width: 0;
    width: 100%;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  /* Deux boutons cote a cote restent lisibles s'ils sont dans un pied. */
  .cl-carte-pied { display: flex; flex-direction: column; gap: 10px; }

  /* La saisie reste a 16 px : en dessous, iOS zoome tout seul sur le
     champ et l'utilisateur se retrouve deporte. Ne pas reduire. */
  .cl-form input, .cl-form textarea, .cl-form select { font-size: 16px; }

  .cl-contenu { padding-left: 14px; padding-right: 14px; }
  .cl-carte-tete, .cl-carte-corps, .cl-carte-pied { padding-left: 15px; padding-right: 15px; }

  /* Les tuiles et grilles de cartes : une colonne. */
  .cl-recap { flex-direction: column; }

  /* Le document imprimable, consulte a l'ecran sur telephone. */
  .im-page { width: auto; margin: 0; padding: 18px 14px; box-shadow: none; }
  .im-fond { padding-bottom: 30px; }
  .im-blocs { display: block; }
  .im-bloc { margin-bottom: 14px; }
  .im-table { font-size: 13px; }
  .im-table th, .im-table td { padding: 7px 5px; }

  table { font-size: 13px; }
}

/* ------------------------------------------------------------- RTL
 * L'arabe est deja agrandi de 118 % pour etre lisible ; sur un
 * telephone, cet agrandissement fait deborder les libelles en
 * majuscules. On rend la casse normale et on desserre l'interlettrage.
 * ------------------------------------------------------------------ */
@media (max-width: 620px) {
  [dir="rtl"] { font-size: 112%; line-height: 1.85; }
  [dir="rtl"] .cl-form label { text-transform: none; letter-spacing: 0; }
}

/* --------------------------------------------------------- LES MONTANTS
 * Le separateur de milliers est un espace INSECABLE (U+00A0), pose par
 * formatMontant depuis le 29/08 : un espace ordinaire est neutre pour
 * l'algorithme bidirectionnel et, dans un paragraphe en arabe, les deux
 * groupes de chiffres se retrouvent inverses ("4 500,00" devient
 * "500,00 4"). La regle ci-dessous est une seconde barriere, a poser sur
 * un montant qu'on veut lire imperativement de gauche a droite, meme en
 * arabe : <span class="cl-montant">.
 * -------------------------------------------------------------------- */
.cl-montant {
  unicode-bidi: isolate;
  direction: ltr;
  white-space: nowrap;
}