/* =====================================================================
   PAEPTEM — page publique (welcome) + pages « Voir plus » et « Galerie »
   Un seul bloc de règles par composant, puis des media queries MOBILE-FIRST
   regroupées en fin de fichier (plus de doublons ni de règles qui s'annulent).
   Points de rupture : 640 (grand téléphone / paysage) · 960 (tablette) · 1100 (portable / bureau)
   ===================================================================== */

/* ===== VARIABLES ===== */
:root {
    --font-heading:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --font-body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --font-script:'Caveat',cursive;
    --navy:#0f2942; --navy-deep:#0a1d31; --gray:#64748b; --border-soft:#e5eaf0; --bg-soft:#f7f9fc;
    --blue:#2563eb; --blue-light:#dbeafe; --blue-dark:#1e40af;
    --green:#16a34a; --green-dark:#15803d; --green-light:#dcfce7;
    --orange:#dc2626; --orange-light:#fee2e2; --orange-dark:#b91c1c;   /* profil Touriste = ROUGE (les classes gardent le nom « orange ») */
    --nav-h:64px;                         /* hauteur RÉELLE de la barre du haut (une seule ligne) */
    --gutter:clamp(1rem,4vw,2rem);        /* marges latérales */
    --maxw:1240px;
}
html[lang="ar"], [dir="rtl"] { --font-heading:'Cairo',system-ui,sans-serif; --font-body:'Cairo',system-ui,sans-serif; }

/* ===== BASE ===== */
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html, body { max-width:100%; overflow-x:hidden; overflow-x:clip; }   /* filet de sécurité : les causes de débordement sont corrigées plus bas */
body { font-family:var(--font-body); color:#334155; background:#fff; line-height:1.5; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:var(--font-heading); overflow-wrap:break-word; }
p { overflow-wrap:break-word; }
img { max-width:100%; }
video, iframe, svg { max-width:100%; }
a:focus-visible, button:focus-visible { outline:3px solid #60a5fa; outline-offset:2px; border-radius:8px; }

/* ===== BARRE DU HAUT (une seule ligne, hauteur fixe) ===== */
.nav {
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:0 max(var(--gutter), env(safe-area-inset-left));
    background:rgba(255,255,255,.88);
    -webkit-backdrop-filter:blur(12px) saturate(1.4); backdrop-filter:blur(12px) saturate(1.4);   /* préfixe -webkit- obligatoire sur Safari iPhone/iPad */
    border-bottom:1px solid rgba(15,41,66,.06);
    transition:box-shadow .25s ease, background-color .25s ease;
}
.nav.is-scrolled { background:rgba(255,255,255,.96); box-shadow:0 6px 24px rgba(15,41,66,.1); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:.6rem; height:var(--nav-h); max-width:var(--maxw); margin:0 auto; }
.nav-left { display:flex; align-items:center; gap:.6rem; text-decoration:none; min-width:0; min-height:44px; }
.nav-logo { height:38px; width:auto; flex-shrink:0; }
.nav-brand-block { display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.nav-brand { font-size:1.15rem; font-weight:800; color:var(--navy); letter-spacing:.03em; }
.nav-tagline { display:none; font-size:.7rem; color:var(--gray); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:32ch; }
.nav-right { display:flex; align-items:center; gap:.4rem; flex-shrink:0; }

.btn-login, .btn-register {
    display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
    min-width:42px; min-height:42px; padding:0 .8rem; border-radius:12px;
    text-decoration:none; font-weight:700; font-size:.85rem; white-space:nowrap; transition:background-color .25s, color .25s;
}
.btn-login span, .btn-register span { display:none; }          /* téléphone : icônes seules (aria-label présent) */
.btn-login { background:#fff; border:1.5px solid var(--navy); color:var(--navy); }
.btn-register { background:var(--green); color:#fff; border:1.5px solid var(--green); }

/* ===== HÉROS ===== */
.hero {
    position:relative; display:flex; align-items:center; overflow:hidden; color:#fff;
    min-height:520px; min-height:min(76svh, 680px);
    padding:calc(var(--nav-h) + 2rem) max(var(--gutter), env(safe-area-inset-right)) 3rem max(var(--gutter), env(safe-area-inset-left));
    background-color:var(--navy);
    background-image:var(--hero-img, none), linear-gradient(135deg,#0f2942 0%,#1e40af 55%,#15803d 100%);   /* si l'image manque, le dégradé reste */
    background-size:cover; background-position:center; background-repeat:no-repeat;
}
.hero-plain { background-image:linear-gradient(135deg,#0f2942 0%,#1e40af 55%,#15803d 100%); }
.hero-overlay { position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(180deg,rgba(10,29,49,.5) 0%,rgba(10,29,49,.62) 50%,rgba(10,29,49,.84) 100%); }
.hero-overlay-dark { background:linear-gradient(180deg,rgba(15,41,66,.35),rgba(15,41,66,.75)) !important; }   /* pages « Voir plus » */
.hero-inner { position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr); gap:1.4rem; }
.hero-text { min-width:0; max-width:40rem; }
.hero-text h1 { font-size:clamp(1.9rem,1.2rem + 3.2vw,3.5rem); font-weight:800; color:#fff; line-height:1.14; letter-spacing:-.01em; margin-bottom:1rem; text-shadow:0 2px 18px rgba(0,0,0,.35); }
.hero-text h1 span {
    color:#86efac; font-family:var(--font-script); font-size:1.18em; font-style:italic;
    -webkit-text-decoration:underline wavy #4ade80; text-decoration:underline wavy #4ade80;
    text-decoration-thickness:3px; text-underline-offset:7px;
}
.hero-text p { font-size:clamp(1rem,.95rem + .3vw,1.15rem); color:rgba(255,255,255,.92); line-height:1.65; max-width:34rem; }

/* Accès rapides aux 3 profils */
.hero-profiles { list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
.hero-profile {
    display:inline-flex; align-items:center; gap:.55rem; min-height:46px; padding:.35rem 1.1rem .35rem .4rem; border-radius:999px;
    background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.38);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    color:#fff; text-decoration:none; font-weight:700; font-size:.92rem; transition:background-color .25s, transform .25s;
}
.hero-profile i { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; font-size:.85rem; color:#fff; flex-shrink:0; }
.hero-profile-blue i { background:var(--blue); } .hero-profile-green i { background:var(--green); } .hero-profile-orange i { background:var(--orange); }

.hero-quote {
    font-family:var(--font-script); font-size:clamp(1.5rem,1.2rem + 1.4vw,2.6rem); line-height:1.2; font-weight:700; color:#fff;
    text-shadow:0 2px 14px rgba(0,0,0,.45); border-inline-start:3px solid #4ade80; padding-inline-start:1rem; max-width:24rem;
}

/* Le seul « moment » animé de la page : apparition du texte du héros (désactivé si l'utilisateur réduit les animations) */
@media (prefers-reduced-motion:no-preference) {
    .hero-text > *, .hero-quote { animation:rise .7s cubic-bezier(.2,.7,.2,1) both; }
    .hero-text > p { animation-delay:.08s; } .hero-profiles { animation-delay:.16s !important; } .hero-quote { animation-delay:.28s; }
}
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

/* ===== CONTENU ===== */
.page { max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.page-narrow { max-width:860px; }
.block { padding:clamp(2.6rem,6vw,4.5rem) 0 0; scroll-margin-top:calc(var(--nav-h) + 1rem); }
.center { text-align:center; margin-top:1.8rem; }

.section-head { max-width:42rem; margin:0 auto clamp(1.6rem,4vw,2.6rem); text-align:center; }
.eyebrow { display:inline-flex; align-items:center; gap:.45rem; background:var(--green-light); color:var(--green-dark); font-weight:700; font-size:.8rem; padding:.3rem .85rem; border-radius:999px; margin-bottom:.8rem; }
.section-head h2 { font-size:clamp(1.55rem,1.2rem + 1.6vw,2.2rem); font-weight:800; color:var(--navy); line-height:1.2; margin-bottom:.6rem; }
.section-head h2 span { color:var(--green); }
.section-head p { color:var(--gray); font-size:1rem; line-height:1.65; margin-inline:auto; max-width:34rem; }

/* ===== SERVICES ===== */
.services-grid, .testimonials-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:1.4rem; }   /* minmax(0,…) : une longue chaîne ne peut plus élargir la colonne */
.service-card { --accent:var(--blue); min-width:0; background:#fff; border-radius:20px; border:1px solid var(--border-soft); box-shadow:0 10px 30px rgba(15,41,66,.07); display:flex; flex-direction:column; transition:transform .3s, box-shadow .3s, border-color .3s; }
.card-blue { --accent:var(--blue); } .card-green { --accent:var(--green); } .card-orange { --accent:var(--orange); }
.service-photo { position:relative; aspect-ratio:16/10; border-radius:19px 19px 0 0; background:linear-gradient(135deg,var(--blue-light),var(--green-light)); }
.card-orange .service-photo { background:linear-gradient(135deg,var(--orange-light),#fde68a); }
.service-photo img { width:100%; height:100%; object-fit:cover; display:block; border-radius:19px 19px 0 0; }
.service-icon { position:absolute; inset-inline-start:1.2rem; bottom:-26px; width:54px; height:54px; border-radius:50%; border:4px solid #fff; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.3rem; box-shadow:0 10px 22px rgba(15,41,66,.22); }
.icon-badge-blue { background:var(--blue); } .icon-badge-green { background:var(--green); } .icon-badge-orange { background:var(--orange); }
.service-body { padding:2.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; min-width:0; }
.service-heading { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.55rem; }
.service-heading h3 { font-size:1.3rem; font-weight:800; line-height:1.25; min-width:0; overflow-wrap:anywhere; }   /* min-width:0 : un titre sans espace ne pousse plus la flèche hors de la carte */
.title-blue { color:var(--blue-dark); } .title-green { color:var(--green-dark); } .title-orange { color:var(--orange-dark); }
.service-arrow { width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:.9rem; color:#fff; transition:transform .2s; }
[dir="rtl"] .fa-arrow-right { transform:scaleX(-1); }
.arrow-blue { background:var(--blue); } .arrow-green { background:var(--green); } .arrow-orange { background:var(--orange); }
.service-body p { color:var(--gray); line-height:1.65; font-size:.95rem; margin-bottom:1rem; }
.tag-row { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.3rem; }
.tag { padding:.32rem .9rem; border-radius:50px; font-size:.78rem; font-weight:700; }
.tag-blue { background:var(--blue-light); color:var(--blue-dark); } .tag-green { background:var(--green-light); color:#166534; } .tag-orange { background:var(--orange-light); color:#9a3412; }
.btn-more { margin-top:auto; align-self:stretch; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:44px; padding:.6rem 1.3rem; border-radius:50px; text-decoration:none; font-weight:700; font-size:.88rem; color:#fff; transition:transform .25s, filter .25s; }
.btn-more-blue { background:var(--blue); } .btn-more-green { background:var(--green); } .btn-more-orange { background:var(--orange); }
.center .btn-more { align-self:auto; margin-top:0; display:inline-flex; }

/* ===== PRÉSENTATION ===== */
.about-card { background:var(--bg-soft); border:1px solid var(--border-soft); border-radius:24px; padding:clamp(1.6rem,4vw,2.8rem) clamp(1.2rem,4vw,2.8rem); text-align:center; max-width:900px; margin:0 auto; }
.about-card h2 { font-size:clamp(1.55rem,1.2rem + 1.6vw,2.2rem); font-weight:800; color:var(--navy); line-height:1.2; margin:.2rem 0 .8rem; }
.about-date { display:inline-flex; align-items:center; gap:.5rem; background:var(--green-light); color:var(--green-dark); font-weight:700; font-size:.82rem; padding:.35rem 1rem; border-radius:50px; margin-bottom:1rem; }
.about-intro { font-family:var(--font-script); font-size:clamp(1.45rem,1.2rem + 1vw,1.9rem); line-height:1.3; color:var(--green-dark); margin-bottom:.8rem; }
.about-text { color:#475569; line-height:1.75; font-size:1rem; max-width:62ch; margin-inline:auto; }

/* ===== GALERIE ===== */
.gallery-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:1.1rem; }
.gallery-grid-all { grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr)); }
.gallery-item { position:relative; display:block; margin:0; border-radius:18px; overflow:hidden; aspect-ratio:4/3; background:linear-gradient(135deg,var(--blue-light),var(--green-light)); box-shadow:0 10px 26px rgba(15,41,66,.1); text-decoration:none; }
.gallery-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.gallery-item figcaption, .gallery-caption { position:absolute; left:0; right:0; bottom:0; padding:1.8rem 1rem .8rem; color:#fff; font-size:.88rem; font-weight:600; background:linear-gradient(transparent,rgba(15,41,66,.82)); }
.gallery-page { padding-top:calc(var(--nav-h) + 2.5rem); padding-bottom:3rem; }

/* ===== TÉMOIGNAGES ===== */
.testimonial-card { min-width:0; background:#fff; border:1px solid var(--border-soft); border-radius:20px; padding:1.6rem; box-shadow:0 10px 28px rgba(15,41,66,.06); }
.testimonial-card-wide { grid-column:1/-1; text-align:center; }
.testimonial-quote-icon { font-size:1.4rem; display:block; margin-bottom:.9rem; }
.quote-blue { color:var(--blue); } .quote-green { color:var(--green); } .quote-orange { color:var(--orange); }
.testimonial-text { font-style:italic; line-height:1.7; margin-bottom:1rem; }
.testimonial-stars { margin-bottom:1.1rem; font-size:.88rem; }
.testimonial-person { display:flex; align-items:center; gap:.8rem; }
.testimonial-meta { min-width:0; }
.testimonial-avatar-wrap { position:relative; width:44px; height:44px; flex-shrink:0; }
.testimonial-avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; }
.testimonial-avatar-fallback { display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; }
.testimonial-avatar-img { position:absolute; top:0; left:0; background:#fff; }
[dir="rtl"] .testimonial-avatar-img { left:auto; right:0; }
.avatar-blue { background:var(--blue); } .avatar-green { background:var(--green); } .avatar-orange { background:var(--orange); }
.testimonial-author { font-weight:700; color:var(--navy); font-size:.95rem; overflow-wrap:break-word; }
.testimonial-role { color:var(--gray); font-size:.82rem; margin-top:2px; } .testimonial-role i { margin-inline-end:4px; }
img.is-broken { display:none; }   /* photo introuvable (cf. welcome.js) : on voit le dégradé / l'initiale en dessous */

/* ===== PRÊT À COMMENCER : bannière arrondie ===== */
.cta {
    position:relative; overflow:hidden; margin:clamp(2.6rem,6vw,4.5rem) 0 clamp(2rem,5vw,3rem); border-radius:24px; padding:clamp(1.5rem,4vw,2.6rem);
    display:flex; flex-direction:column; align-items:flex-start; gap:1.2rem; color:#fff;
    background-color:var(--navy);
    background-image:var(--cta-img, none), linear-gradient(135deg,#0f2942 0%,#1e3a5f 100%);
    background-size:cover; background-position:center; background-repeat:no-repeat;
}
.cta-overlay { position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(90deg,rgba(15,41,66,.92),rgba(15,41,66,.5)); }
[dir="rtl"] .cta-overlay { background:linear-gradient(270deg,rgba(15,41,66,.92),rgba(15,41,66,.5)); }
.cta-rocket { position:relative; z-index:2; display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.14); font-size:1.5rem; color:#fff; flex-shrink:0; }
.cta-content { position:relative; z-index:2; min-width:0; }
.cta h2 { font-size:clamp(1.3rem,1.1rem + 1vw,1.85rem); font-weight:800; line-height:1.25; margin-bottom:.4rem; }
.cta p { color:rgba(255,255,255,.88); font-size:.98rem; line-height:1.6; }
.cta-btn { position:relative; z-index:2; display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:48px; padding:.8rem 1.8rem; width:100%; background:var(--green); color:#fff; border-radius:50px; text-decoration:none; font-weight:700; transition:background-color .3s, transform .3s; }

/* ===== PIED DE PAGE ===== */
.footer { background:var(--navy-deep); color:rgba(255,255,255,.82); padding:clamp(2rem,5vw,3.2rem) max(var(--gutter), env(safe-area-inset-left)) calc(1.2rem + env(safe-area-inset-bottom)); font-size:.92rem; }
.footer-inner { max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr); gap:1.8rem 2.4rem; }
.footer-col { min-width:0; }
.footer-brand { display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; color:#fff; }
.footer-brand span { display:flex; flex-direction:column; line-height:1.15; } .footer-brand strong { font-size:1.3rem; letter-spacing:.03em; } .footer-brand small { font-size:.75rem; color:rgba(255,255,255,.65); }
.footer-logo { height:44px; width:auto; background:#fff; border-radius:12px; padding:3px; }
.footer-title { display:block; color:#fff; font-size:.95rem; font-weight:700; margin-bottom:.8rem; }
.footer-list { display:flex; flex-direction:column; gap:.55rem; }
.footer-list a, .footer-list span { display:flex; align-items:flex-start; gap:.6rem; color:inherit; text-decoration:none; overflow-wrap:anywhere; min-height:28px; }   /* anywhere : un long e-mail ne déborde plus */
.footer-list i { color:#4ade80; width:1.1em; text-align:center; margin-top:.28em; flex-shrink:0; }
.footer-copy { max-width:var(--maxw); margin:2rem auto 0; padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.6); font-size:.8rem; }

/* ===== PAGE « VOIR PLUS » ===== */
.detail-banner { position:relative; min-height:300px; display:flex; align-items:flex-end; padding:calc(var(--nav-h) + 2.5rem) var(--gutter) 2.2rem; background:linear-gradient(135deg,var(--blue),var(--green)) center/cover no-repeat; color:#fff; }
.banner-green { background-color:var(--green); } .banner-orange { background-color:var(--orange); }
.detail-banner-inner { position:relative; z-index:2; max-width:760px; min-width:0; }
.service-icon-lg { display:inline-flex; width:64px; height:64px; border-radius:50%; align-items:center; justify-content:center; font-size:1.6rem; border:4px solid #fff; margin-bottom:1rem; }
.detail-banner h1 { font-size:clamp(1.8rem,1.3rem + 2vw,2.6rem); font-weight:800; margin-bottom:.6rem; }
.detail-banner p { font-size:1.05rem; color:rgba(255,255,255,.92); line-height:1.6; }
.detail-article { background:#fff; border:1px solid var(--border-soft); border-radius:20px; box-shadow:0 14px 40px rgba(15,41,66,.08); padding:1.4rem 1.1rem; margin:-1rem 0 3rem; position:relative; z-index:3; }
.detail-prose { color:#334155; line-height:1.85; font-size:1.02rem; margin-bottom:1.8rem; }
.detail-actions { display:flex; gap:1rem; flex-wrap:wrap; }

/* Boutons « pilule » (pages « Voir plus » et « Galerie ») */
.hero-btn-primary, .hero-btn-secondary { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:48px; padding:.8rem 1.8rem; border-radius:50px; text-decoration:none; font-weight:700; font-size:.93rem; transition:background-color .3s, transform .3s; }
.hero-btn-primary { background:var(--green); color:#fff; box-shadow:0 12px 28px rgba(22,163,74,.28); }
.hero-btn-secondary { background:rgba(255,255,255,.9); border:1.5px solid var(--blue); color:var(--navy); }

/* ===== LANGUE : 1 bouton drapeau rond + menu de drapeaux (sans texte) ===== */
.lang-dd { position:relative; }
.lang-current { display:inline-flex; align-items:center; gap:.4rem; min-height:42px; padding-block:.22rem; padding-inline:.3rem .6rem; background:rgba(255,255,255,.92); border:1px solid var(--border-soft); border-radius:50px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.lang-caret { font-size:.65rem; color:var(--navy); transition:transform .2s; }
.lang-dd.open .lang-caret { transform:rotate(180deg); }
.flag { width:28px; height:28px; border-radius:50%; object-fit:cover; display:block; box-shadow:0 0 0 1px rgba(15,41,66,.15); }
.lang-menu { position:absolute; top:calc(100% + .45rem); inset-inline-end:0; display:none; flex-direction:column; gap:.35rem; padding:.5rem; background:#fff; border-radius:40px; box-shadow:0 12px 30px rgba(15,41,66,.2); z-index:200; }
.lang-dd.open .lang-menu { display:flex; }
.lang-opt { display:block; padding:4px; border-radius:50%; transition:transform .15s; }   /* zone tactile ≈ 36 px autour du drapeau */

/* ===== EFFETS AU SURVOL : uniquement sur les appareils qui ont un vrai survol (évite les états « collés » sur iPhone/iPad) ===== */
@media (hover:hover) {
    .btn-login:hover { background:var(--navy); color:#fff; }
    .btn-register:hover { background:var(--green-dark); }
    .hero-profile:hover { background:rgba(255,255,255,.26); transform:translateY(-2px); }
    .service-card:hover { transform:translateY(-6px); box-shadow:0 20px 42px rgba(15,41,66,.13); border-color:var(--accent); }
    .service-arrow:hover { transform:translateX(4px); } [dir="rtl"] .service-arrow:hover { transform:translateX(-4px); }
    .btn-more:hover { transform:translateY(-2px); filter:brightness(.92); }
    .gallery-item:hover img { transform:scale(1.05); }
    .cta-btn:hover, .hero-btn-primary:hover { background:var(--green-dark); transform:translateY(-2px); }
    .hero-btn-secondary:hover { border-color:var(--navy); }
    .lang-current:hover { border-color:var(--green); }
    .lang-opt:hover { transform:scale(1.12); }
    .footer-list a:hover { color:#fff; text-decoration:underline; }
}

/* ===== Navigateurs sans aspect-ratio (Safari < 15) ===== */
@supports not (aspect-ratio:1) {
    .service-photo { height:190px; } .gallery-item { height:210px; }
}

/* =====================================================================
   POINTS DE RUPTURE (du plus petit au plus grand)
   ===================================================================== */

/* Très petits téléphones (≤ 360 px) */
@media (max-width:360px) {
    :root { --nav-h:58px; }
    .nav-logo { height:32px; }
    .nav-brand { font-size:1rem; }
    .btn-login, .btn-register { min-width:40px; padding:0 .6rem; }
    .flag { width:24px; height:24px; }
    .hero-profile { font-size:.86rem; padding-inline-end:.9rem; }
}

/* Grand téléphone / petite tablette : libellés des boutons visibles, 2 colonnes */
@media (min-width:640px) {
    :root { --nav-h:68px; }
    .nav-logo { height:44px; }
    .nav-brand { font-size:1.35rem; }
    .nav-right { gap:.6rem; }
    .btn-login span, .btn-register span { display:inline; }
    .btn-login, .btn-register { padding:0 1.1rem; }
    .btn-more { align-self:flex-start; }
    .services-grid, .testimonials-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }
    .services-grid > :last-child:nth-child(odd), .testimonials-grid > :last-child:nth-child(odd) { grid-column:1/-1; }   /* la 3e carte occupe toute la largeur : plus de carte orpheline */
    .services-grid > :last-child:nth-child(odd) .service-photo { aspect-ratio:21/9; }
    .gallery-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; }
    .gallery-grid-all { grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr)); }
    .testimonial-card { padding:1.8rem; }
    .cta { flex-direction:row; flex-wrap:wrap; align-items:center; gap:1.2rem 1.8rem; }
    .cta-content { flex:1 1 260px; }
    .cta-btn { width:auto; }
    .footer-inner { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .detail-article { padding:2.2rem; margin-top:-1.6rem; }
}

/* Tablette (iPad portrait/paysage) : 3 colonnes, tagline visible */
@media (min-width:960px) {
    .nav-tagline { display:block; }
    .services-grid, .testimonials-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.6rem; }
    .services-grid > :last-child:nth-child(odd), .testimonials-grid > :last-child:nth-child(odd) { grid-column:auto; }
    .services-grid > :last-child:nth-child(odd) .service-photo { aspect-ratio:16/10; }
    .testimonial-card-wide { grid-column:1/-1 !important; }
    .testimonials-grid.count-1 { grid-template-columns:minmax(0,640px); justify-content:center; }
    .testimonials-grid.count-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .hero-inner { grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); align-items:center; gap:2rem; }
    .hero-overlay { background:linear-gradient(90deg,rgba(10,29,49,.9) 0%,rgba(10,29,49,.62) 48%,rgba(10,29,49,.12) 100%); }
    [dir="rtl"] .hero-overlay { background:linear-gradient(270deg,rgba(10,29,49,.9) 0%,rgba(10,29,49,.62) 48%,rgba(10,29,49,.12) 100%); }
    .hero-plain .hero-overlay, [dir="rtl"] .hero-plain .hero-overlay { background:none; }
    .hero-quote { justify-self:end; align-self:end; border-inline-start:0; padding-inline-start:0; text-align:end; transform:rotate(-4deg); }
    [dir="rtl"] .hero-quote { transform:rotate(4deg); }
    .footer-inner { grid-template-columns:1.2fr 1fr 1.3fr; }
}

/* Ordinateur portable / grand écran */
@media (min-width:1100px) {
    .hero { padding-bottom:4.5rem; }
}

/* Téléphone en mode paysage (écran très bas) : barre non fixe pour ne pas manger la hauteur */
@media (max-height:480px) and (orientation:landscape) {
    .nav { position:absolute; }
    .hero { min-height:0; padding-top:calc(var(--nav-h) + 1rem); padding-bottom:2rem; }
}

/* Utilisateurs qui préfèrent moins d'animations */
@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after { animation:none !important; transition:none !important; }
}