/* LittleStars Sitting - feuille unique, aucune dependance externe.
   Direction retenue : maquette C, bandes contrastees.
   Couleurs de la cliente : #156BA3 bleu roi, bleu ciel, blanc casse, dore du logo.
   REGLE ABSOLUE : aucun texte sombre sur un fond bleu. Tout aplat bleu est en texte clair.
   Proprietes logiques partout pour que /ar/ en RTL fonctionne sans surcharge. */

:root{
  --bleu:#156BA3;
  --nuit:#0D3F63;
  --ciel:#9BD3F0;
  --ciel-pale:#E4F2FA;
  --creme:#FBF5EA;
  --creme-fonce:#F3EADA;
  --or:#EFB03C;
  --or-clair:#FBE9C6;
  --or-vif:#FFD166;
  --vert:#3DBB70;
  --or-texte:#3A2708;
  --encre:#12303F;
  --gris:#55707F;
  --blanc:#fff;

  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --barre:74px;
  --mesure:64ch;
  --large:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--barre) + 12px)}

body{
  margin:0;
  background:var(--creme);
  color:var(--encre);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.66;
  -webkit-text-size-adjust:100%;
}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;margin:0 0 .5em;color:var(--nuit)}
h1{font-size:clamp(2.3rem,6vw,4.1rem)}
h2{font-size:clamp(1.75rem,3.9vw,2.6rem)}
h3{font-size:1.14rem;line-height:1.3}
p{margin:0 0 1em;max-width:var(--mesure)}
a{color:var(--bleu);text-underline-offset:.18em}
a:hover{color:var(--nuit)}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--or);outline-offset:3px;border-radius:4px}

.wrap{width:min(100% - 2.5rem,var(--large));margin-inline:auto}
.etroit{max-width:780px}
section{padding-block:clamp(3.2rem,7.5vw,6rem);text-align:center;scroll-margin-top:calc(var(--barre) + 12px)}
section p,.intro,.chapo{margin-inline:auto}
.hero .wrap>div,.tuile,.q,.avis,.faq,.pied{text-align:center}
.inclus-carte{text-align:start}

/* ---------- Boutons ---------- */

.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.9rem 1.6rem;border-radius:4px;
  background:var(--or);color:var(--or-texte);border:2px solid var(--or);
  font:inherit;font-size:1rem;text-decoration:none;cursor:pointer;
}
.btn:hover{background:#E0A02C;border-color:#E0A02C;color:var(--or-texte)}
.btn.vide{background:transparent;color:var(--nuit);border-color:var(--nuit)}
.btn.vide:hover{background:var(--nuit);color:var(--blanc)}
.btn.vide-clair{background:transparent;color:var(--blanc);border-color:rgba(255,255,255,.7)}
.btn.vide-clair:hover{background:rgba(255,255,255,.15);color:var(--blanc)}
.btn.secondaire{background:transparent;color:var(--nuit);border-color:var(--nuit)}
.btn.secondaire:hover{background:var(--nuit);color:var(--blanc)}

/* ---------- Barre ---------- */

.barre{background:var(--nuit);position:sticky;top:0;z-index:50}
.barre .wrap{display:flex;align-items:center;gap:1rem;padding-block:.5rem;flex-wrap:nowrap}
.marque{display:flex;align-items:center;flex:none;color:var(--blanc);text-decoration:none}
.marque img{height:56px;width:auto;max-width:230px;object-fit:contain;background:var(--creme);padding:.22rem;border-radius:4px}
.nav{display:flex;gap:1.3rem;font-size:.95rem;flex:1 1 auto;min-width:0;justify-content:flex-end;
  overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{color:rgba(255,255,255,.86);text-decoration:none}
.nav a:hover{color:var(--or)}
.langues{display:flex;gap:.3rem;font-size:.85rem;flex:none}
.langues a{color:rgba(255,255,255,.72);text-decoration:none;padding:.16rem .45rem;border-radius:4px}
.langues a[aria-current="true"]{background:var(--or);color:var(--or-texte)}
@media(max-width:880px){
  :root{--barre:68px}
  .barre .wrap{gap:.7rem;padding-block:.4rem}
  .marque img{height:48px}
  .nav{gap:1rem;font-size:.92rem;justify-content:flex-start;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .langues{font-size:.8rem}
}

/* ---------- Hero ---------- */

.hero{background:var(--creme);padding-block:clamp(2.8rem,7vw,5rem) clamp(2.5rem,6vw,4rem)}
.hero{text-align:center}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,3.5rem);align-items:center}
.hero .wrap>*{min-width:0}
.hero h1{max-width:16ch;margin-inline:auto}
.chapo{font-size:1.2rem;color:var(--gris);max-width:46ch}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-block-start:1.8rem}

.cadre-photo{position:relative;justify-self:center;width:min(100%,440px);min-width:0;overflow:hidden}
.cadre-photo::before{
  content:"";position:absolute;inset-block:1.8rem -1.2rem;inset-inline:-1.2rem 1.8rem;
  background:var(--or-clair);border-radius:6px;
}
.cadre-photo img,.cadre-photo .photo-a-venir{position:relative;border-radius:6px;aspect-ratio:4/5;object-fit:cover;width:100%;min-width:0}
.cadre-photo .lune{position:absolute;inset-block-start:-22px;inset-inline-end:-22px;width:78px;height:78px;z-index:2}
@media(max-width:820px){
  .hero .wrap{grid-template-columns:1fr}
  .cadre-photo{order:-1;width:min(76%,320px)}
}

/* ---------- Bandeau dore ---------- */

.bandeau-or{background:var(--bleu);color:var(--or-vif)}
.ruban{overflow:hidden;padding-block:.85rem}
.ruban-piste{display:flex;width:max-content;animation:defile 38s linear infinite}
.ruban-piste span{display:inline-flex;align-items:center;white-space:nowrap;
  padding-inline:1.6rem;font-size:1rem;color:var(--or-vif);letter-spacing:.01em}
.ruban-piste span::after{content:"\2605";margin-inline-start:1.6rem;font-size:.7em;opacity:.75}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[dir="rtl"] .ruban-piste{animation-direction:reverse}
@media(prefers-reduced-motion:reduce){.ruban-piste{animation:none}}

/* ---------- Titres de section ---------- */

.chapeau{font-family:var(--serif);color:var(--bleu);font-size:1.05rem;margin-block-end:.35rem}
.intro{color:var(--gris);max-width:58ch}

/* ---------- Services en tuiles bleues, texte clair ---------- */

.tuiles{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));margin-block-start:2.6rem}
.tuile{background:var(--bleu);color:var(--blanc);border-radius:4px;padding:1.8rem;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.tuile:nth-child(2),.tuile:nth-child(3){background:var(--nuit)}
.tuile h3{color:var(--blanc);margin:0}
.tuile p{color:rgba(255,255,255,.86);font-size:.96rem;margin:0}
.tuile svg{width:34px;height:34px;color:var(--or);stroke:var(--or);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Qualites des nounous ---------- */

.qualites{background:var(--ciel-pale)}
.photo-large{width:100%;aspect-ratio:16/6;object-fit:cover;border-radius:4px;margin-block-start:2.2rem}
@media(max-width:640px){.photo-large{aspect-ratio:4/3}}
.grille-q{display:grid;gap:2rem 2.4rem;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));margin-block-start:2.6rem}
.q{border-block-start:3px solid var(--or);padding-block-start:1.1rem;display:flex;flex-direction:column;align-items:center}
.q svg{width:30px;height:30px;color:var(--bleu);stroke:var(--bleu);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-block-end:.6rem}
.q h3{margin-block-end:.3rem}
.q p{color:var(--gris);font-size:.96rem;margin:0}

/* ---------- Ce qui est inclus, en cases ---------- */

.inclus-grille{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));margin-block-start:2.4rem;text-align:start}
.inclus-carte{background:var(--blanc);border:1px solid rgba(21,107,163,.18);border-block-start:3px solid var(--or);
  border-radius:4px;padding:1.3rem;display:flex;align-items:center;gap:1.1rem}
.inclus-carte .ico{flex:0 0 74px;height:74px;border-radius:50%;background:var(--ciel-pale);
  display:grid;place-items:center}
.inclus-carte .ico svg{color:var(--bleu);stroke:var(--bleu);margin:0}
.inclus-carte .txt{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.inclus-carte h3{font-size:1.05rem;margin:0}
.inclus-carte .valide{color:var(--vert);stroke:var(--vert);flex:none}


.liste-nette{list-style:none;padding:0;margin:2rem 0 0;max-width:var(--mesure)}
.liste-nette li{padding-block:.6rem;border-block-end:1px solid rgba(21,107,163,.2);
  display:flex;gap:1rem;justify-content:space-between;align-items:baseline}
.liste-nette li:last-child{border-block-end:0}
.liste-nette .valeur{color:var(--bleu);white-space:nowrap;font-size:.95rem}
.non-inclus{font-size:.95rem;color:var(--gris);border-inline-start:3px solid var(--or);
  padding-inline-start:1rem;margin-block-start:1.8rem}

/* ---------- Galerie photos ---------- */

.images{background:var(--blanc)}
.carrousel{position:relative;margin-block-start:2.4rem}
.piste{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-block-end:.6rem;scrollbar-width:none}
.piste::-webkit-scrollbar{display:none}
.piste figure{flex:0 0 clamp(230px,30%,320px);scroll-snap-align:start;margin:0}
.car-btn{position:absolute;inset-block-start:38%;display:grid;place-items:center;z-index:5;width:44px;height:44px;border-radius:50%;
  border:0;background:var(--bleu);color:var(--or);font-size:1.7rem;line-height:1;cursor:pointer;
  box-shadow:0 4px 14px rgba(13,63,99,.28)}
.car-btn:hover{background:var(--nuit)}
.car-prec{inset-inline-start:-14px}
.car-suiv{inset-inline-end:-14px}
@media(max-width:760px){
  .piste figure{flex:0 0 78%}
  .car-btn{width:38px;height:38px;font-size:1.4rem;inset-block-start:34%}
  .car-prec{inset-inline-start:-6px}
  .car-suiv{inset-inline-end:-6px}
}
.piste img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;background:var(--creme-fonce)}
.piste figcaption{font-size:.9rem;color:var(--gris);margin-block-start:.5rem}

/* ---------- Tarifs, bande bleu nuit ---------- */

.tarifs{background:var(--nuit)}
.tarifs h2{color:var(--blanc)}
.tarifs .chapeau{color:var(--ciel)}
.tarifs p{color:rgba(228,242,250,.86)}
.tarifs strong{color:var(--blanc)}
.prix-bande{display:grid;grid-template-columns:auto 1fr;gap:2.5rem;align-items:center;text-align:start;
  margin-block-start:2rem;border-block:2px solid rgba(239,176,60,.55);padding-block:2rem}
.prix-duo{display:grid;gap:1.4rem}
.gros{font-family:var(--serif);font-size:clamp(2.4rem,6vw,3.6rem);color:var(--or);line-height:1;white-space:nowrap}
.gros small{display:block;font-family:var(--sans);font-size:.95rem;color:var(--ciel)}
@media(max-width:720px){.prix-bande{grid-template-columns:1fr;gap:1.2rem}}

/* ---------- Zones ---------- */

.puces,.quartiers{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.4rem;list-style:none;padding:0;margin:2.2rem 0 0}
.puces li,.quartiers li{border-block-end:2px solid var(--or);padding:.3rem .2rem;font-size:.98rem}

/* ---------- Temoignages ---------- */

.grille{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));margin-block-start:2.4rem}
.avis{background:var(--blanc);border:1px solid rgba(21,107,163,.18);border-block-start:3px solid var(--or);
  border-radius:4px;padding:1.7rem;margin:0}
.avis blockquote{margin:0 0 .9rem;font-family:var(--serif);font-size:1.1rem;line-height:1.5}
.avis figcaption{font-size:.9rem;color:var(--gris)}

/* ---------- FAQ ---------- */

.faq{max-width:820px;margin-block-start:2.2rem}
.faq details{border-block-end:1px solid rgba(21,107,163,.22);padding-block:1.05rem}
.faq summary{cursor:pointer;font-family:var(--serif);font-size:1.12rem;color:var(--nuit);
  list-style:none;display:flex;justify-content:center;gap:.9rem;align-items:center;text-align:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--or);font-size:1.5rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq p{color:var(--gris);margin-block:.7rem 0}

/* ---------- Contact ---------- */

.contact{background:var(--bleu)}
.contact h2{color:var(--blanc)}
.contact .chapeau{color:var(--ciel-pale)}
.contact p{color:rgba(255,255,255,.9)}
.contact label{color:var(--blanc)}
.contact .note-form{color:rgba(255,255,255,.75)}

.form-grille{display:grid;gap:1rem 1.2rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-block-start:2rem}
.champ{display:flex;flex-direction:column;gap:.35rem;text-align:start}
.champ.pleine{grid-column:1 / -1}
.champ label{font-size:.92rem}
.champ input,.champ select,.champ textarea{
  font:inherit;font-size:1rem;padding:.7rem .85rem;border:1px solid rgba(255,255,255,.55);
  border-radius:4px;background:var(--blanc);color:var(--encre);width:100%;
}
.champ textarea{min-height:120px;resize:vertical}
.form-actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;align-items:center}
.note-form{font-size:.88rem;margin-block-start:1rem}

/* ---------- Bouton flottant ---------- */

.flottant{position:fixed;inset-block-end:1.1rem;inset-inline-end:1.1rem;z-index:60;
  width:58px;height:58px;border-radius:50%;background:var(--bleu);color:var(--or);
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(13,63,99,.35);text-decoration:none}
.flottant:hover{background:var(--nuit);color:var(--or)}

/* ---------- Blog ---------- */

.article-tete{padding-block:clamp(2.6rem,5.5vw,4.2rem) 0;background:var(--creme)}
.article-tete .date{color:var(--bleu);font-family:var(--serif);font-size:1rem}
.article-corps{padding-block:2rem clamp(3rem,6vw,5rem)}
.article-corps h2{margin-block-start:2.4rem}
.article-corps ul{max-width:var(--mesure);color:var(--gris)}
.article-corps li{margin-block-end:.5rem}
.encadre{background:var(--blanc);border-inline-start:4px solid var(--or);
  border-radius:4px;padding:1.4rem 1.6rem;margin-block:2rem}
.encadre p:last-child{margin-block-end:0}
.liste-articles{list-style:none;padding:0;margin-block-start:2.2rem}
.liste-articles li{border-block-start:1px solid rgba(21,107,163,.22);padding-block:1.3rem}
.liste-articles li:last-child{border-block-end:1px solid rgba(21,107,163,.22)}
.liste-articles h3{margin-block-end:.3rem}
.liste-articles a{text-decoration:none}
.liste-articles a:hover{text-decoration:underline}
.liste-articles p{color:var(--gris);font-size:.97rem;margin:0}

/* ---------- Pied ---------- */

.pied{background:var(--nuit);color:rgba(228,242,250,.72);padding-block:3rem 2rem;font-size:.95rem}
.pied a{color:var(--ciel)}
.pied-grille{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.logo-pied{height:74px;width:auto;margin:0 auto .9rem;background:var(--creme);
  padding:.3rem;border-radius:4px}
.pied h3{font-size:1.35rem;font-family:var(--serif);color:var(--blanc);margin-block-end:.7rem}
.baseline{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ciel);margin-block-start:.35rem}
.pied ul{display:inline-block;text-align:start}
.pied ul{list-style:none;padding:0;margin:0}
.pied li{margin-block-end:.4rem}
.pied-bas{margin-block-start:2.2rem;padding-block-start:1.2rem;
  border-block-start:1px solid rgba(155,211,240,.25);font-size:.87rem;color:rgba(228,242,250,.6)}

/* ---------- Emplacement photo en attente ---------- */

.photo-a-venir{
  background:repeating-linear-gradient(45deg,var(--creme-fonce),var(--creme-fonce) 10px,#EADFC9 10px,#EADFC9 20px);
  border-radius:4px;min-height:230px;display:grid;place-items:center;
  color:var(--nuit);font-size:.9rem;text-align:center;padding:1rem;
}

/* ---------- Accessibilite ---------- */

.saut-contenu{position:absolute;inset-inline-start:-9999px}
.saut-contenu:focus{position:fixed;inset-inline-start:1rem;inset-block-start:1rem;
  background:var(--blanc);padding:.7rem 1rem;border-radius:4px;z-index:100}

@media(max-width:620px){
  .wrap{width:min(100% - 1.8rem,var(--large))}
  .btn{width:100%;justify-content:center}
  .actions .btn,.form-actions .btn{flex:1 1 100%}
  .bandeau-or .wrap{gap:.45rem 1.2rem;font-size:.92rem}
  .prix-bande{gap:1rem}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}

/* ---------- Arabe / RTL ---------- */

[dir="rtl"] body{font-family:"Noto Naskh Arabic","Geeza Pro","Traditional Arabic",system-ui,sans-serif;line-height:1.9}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{font-family:"Noto Naskh Arabic","Geeza Pro","Traditional Arabic",serif}
[dir="rtl"] .gros{direction:ltr;text-align:end}