/* ============================================================
   Maroclic — pages de service (une page = une question de dirigeant)
   Chargée APRÈS styles.css, par ces pages seulement (body.sv) : rien ne change sur l'accueil.
   Mêmes jetons, mêmes composants ; ici, seulement ce que l'accueil n'a pas.
   ============================================================ */

/* --- fil d'Ariane --- */
.fil{ max-width:calc(var(--maxw) + 2 * var(--gut)); margin:0 auto; padding:14px var(--gut) 0; font-size:14px; color:var(--ardoise); }
.fil ol{ list-style:none; display:flex; flex-wrap:wrap; gap:2px 8px; }
.fil li{ display:inline-flex; align-items:center; gap:8px; min-height:32px; }
.fil li + li::before{ content:"›"; color:var(--ardoise); }
html[dir="rtl"] .fil li + li::before{ content:"‹"; }
.fil a{ font-weight:600; text-underline-offset:3px; }
.fil [aria-current]{ color:var(--encre); font-weight:700; }

/* --- héros : la question du dirigeant, puis la réponse --- */
.sv .hero__grid{ padding-top:clamp(18px,2.6vw,34px); row-gap:44px; }
.sv .h1__main{ font-size:clamp(34px,8.6vw,62px); line-height:1; margin-top:18px; }
@media (min-width:1000px){ .sv .h1__main{ font-size:clamp(46px,4.7vw,68px); } }
html[lang="ar"] .sv .h1__main{ font-size:clamp(30px,8vw,58px); line-height:1.25; }
.sv .lede{ margin-top:22px; color:var(--encre); }
.sv .apercu{ margin-top:24px; max-width:560px; }
.sv .apercu ul{ grid-template-columns:minmax(0,1fr); }
.sv .apercu li:nth-child(2){ border-top:1px solid var(--trait); }
.sv .hero__ctas{ margin-top:28px; }

/* --- la scène : une conversation (exemple fictif) --- */
.conv{ list-style:none; display:grid; gap:10px; padding:18px 16px 20px; background:var(--papier); }
.conv li{ max-width:86%; padding:10px 14px 9px; border-radius:18px; font-size:15.5px; line-height:1.4; }
.conv .conv__c{ justify-self:start; background:var(--blanc); box-shadow:0 0 0 1px var(--trait); border-end-start-radius:6px; }
.conv .conv__a{ justify-self:end; background:var(--accent); color:var(--blanc); border-end-end-radius:6px; }
.conv time{ display:block; margin-top:3px; font-size:12px; opacity:.72; direction:ltr; text-align:end; }
.conv .conv__note{
  justify-self:center; max-width:100%; display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:99px;
  background:var(--encre); color:var(--blanc); font-size:13px; font-weight:600;
}
.conv .conv__note::before{ content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--spark); }

/* --- le service : la carte de l'accueil, et ce que fait l'outil --- */
.sv-cartes{ list-style:none; display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
@media (min-width:760px){ .sv-cartes{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .sv-cartes--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.sv-cartes .card:hover{ transform:none; }
.card--fait{ background:var(--ciel); box-shadow:none; }
.card--fait:hover{ box-shadow:none; }
@media (min-width:760px) and (max-width:1099px){ .sv-cartes--3 .card--fait{ grid-column:1 / -1; } }
.fait{ list-style:none; display:grid; gap:12px; }
.fait li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start; font-size:16.5px; line-height:1.45; }
.fait .ico{ width:24px; height:24px; padding:5px; margin-top:1px; border-radius:50%; background:var(--accent); color:var(--blanc); stroke-width:2.8; }

/* --- pour qui : les étiquettes sur fond blanc --- */
.sv .sec:not(.sec--papier) .tags li{ background:var(--papier); box-shadow:none; }

/* --- fin de page : contact et autres services --- */
.autres{ list-style:none; display:grid; gap:12px; margin-top:clamp(34px,4.5vw,56px); }
.autres a{
  display:grid; gap:4px; padding:20px 22px; border-radius:var(--r); background:var(--blanc); box-shadow:0 0 0 1px var(--trait);
  text-decoration:none; transition:box-shadow .25s;
}
.autres a:hover{ box-shadow:0 0 0 2px var(--accent); }
.autres b{ font:850 clamp(19px,1.6vw,22px)/1.15 var(--f-display); font-stretch:88%; letter-spacing:-.01em; }
.autres span{ font-size:15.5px; color:var(--ardoise); }
.autres__t{ margin-top:clamp(40px,5vw,64px); font:800 15px/1.2 var(--f-display); font-stretch:88%; letter-spacing:.06em; text-transform:uppercase; }
.autres__t + .autres{ margin-top:14px; }
@media (min-width:860px){ .autres{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* --- pied : la liste des pages de service --- */
.ftr__svc{ margin-top:8px; }

/* --- arabe (dir=rtl) : pas d'interlettrage sur une écriture liée, et la police arabe partout --- */
html[lang="ar"] .card__p b,
html[lang="ar"] .autres__t{ font-family:var(--f-text); letter-spacing:0; font-size:13px; }
html[lang="ar"] .steps h3,
html[lang="ar"] .prices dt,
html[lang="ar"] .prices .amount,
html[lang="ar"] .faq summary,
html[lang="ar"] .rule,
html[lang="ar"] .autres b{ font-family:var(--f-text); font-weight:700; letter-spacing:0; line-height:1.4; }
html[dir="rtl"] .faq summary{ padding:18px 24px 18px 62px; }
html[dir="rtl"] .faq summary::after{ right:auto; left:18px; }