/* style-tablet.css — vrai responsive 768-1279 (plan 1 socle/global/home + fiches felines +
   galerie publique + formulaires ; version courante = le ?v= du link dans generator.class.php,
   v71 au 2026-08-12 : home/fiche/galerie/booking/contact VALIDES sur iPad par Dan, footer
   unifie aux 3 breakpoints, fil decalage menu/hero resolu (BrowserStack 11/08), scroll-lock
   du popup filtres galerie).
   Charge via <link media="(min-width:768px) and (max-width:1279px)"> : pas de media wrapper global.
   Structure : socle (premier paint inclus) / galerie / paysage >=900 / footer commun / portrait <=899.
   Sous-plages : portrait/hamburger <=899, paysage/nav desktop >=900.
   Spec : _tests/docs/tablette/design-responsive-tablette-20260807.md */

/* — Socle — */
/* PREMIER PAINT (bug iPad 08/08) : avant l'execution du bundle, le reset statique de
   custom-bundle.min.css impose body{min-width:1280px} et .container{width:1200px} -> la page
   deborde du viewport, et Safari iPadOS (UA desktop) AGRANDIT alors le layout viewport pour
   englober le contenu (shrink-to-fit), sans le recalculer avant une rotation = pas de hamburger
   au 1er chargement. Ces miroirs statiques des regles runtime skel (containers "100%!")
   garantissent un premier paint qui tient dans le viewport. NE PAS retirer. */
body { min-width: 0 !important; }
/* Conteneurs : miroir statique de skel .container{width:100%!important} (containers "100%!") ; on borne et on respire */
.container { width: 100% !important; min-width: 0 !important; max-width: 1200px !important; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
/* Overflow guards (equivalents du mobile guard, exclusions PhotoSwipe pitfall #26a) */
img:not(.pswp__img) { max-width: 100%; height: auto; }
/* Exemption covers blog (Dan 12/08) : la garde height:auto ci-dessus ecrasait le
   height:100% de blog.css -> l'image ne remplissait plus le cadre 3/2, bande de fond
   violette sous chaque photo (desktop intact, hors plage du fichier). Les 4 familles
   du groupe blog.css : grille, news, "A lire aussi", hero d'article. */
.blog-card__cover img, .news-card__cover img, .related-card__cover img, .j-hero img { height: 100% !important; }
/* Espace vertical entre rangees de vignettes (Dan 12/08, en 2 temps) : l'espace VISUEL
   (bas de carte -> image suivante) faisait 100px (row-gap 52 + blanc interne ~48)
   -> -20% = 80 -> encore -20% = 64px, soit row-gap 16 */
.blog-grid { row-gap: 16px !important; }
/* (citation temoignage : le fix font-style normal anti double-pente iPad a ete GENERALISE
   dans blog.css v81, toutes largeurs — plus de regle tablette dediee, Dan 12/08) */
/* Bordure decorative du menu (.border_menu, bundle css : 1190px fixes + margin-left 45,
   calibree pour le container desktop 1280 ou elle s'aligne avec les heros blog 125->1315).
   v110 (Dan 18/08) : en plage tablette, insets SYMETRIQUES 22px = pile la largeur des
   heros/crumb blog (j-wrap padding 22), toutes pages ; regle aussi le deborde 1er paint. */
.border_menu { margin-left: 22px; width: calc(100% - 44px); max-width: none; }
html [style*="width:"]:not(.pswp__img):not(.pswp__zoom-wrap) { max-width: 100% !important; }
/* iOS : pas de zoom auto au focus si la police du champ fait >=16px. SEULS les champs
   editables declenchent le zoom : les submit/button en sont EXCLUS (sinon la garde
   gonflait a 16px des CTA calibres 12-13, ex. "BOOK Thetest" input du haut de fiche,
   retour Dan 11/08). */
input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]), select, textarea { font-size: max(16px, 1em) !important; }
/* Typo : tailles desktop conservees (pas de scaling), juste les br decoratifs des titres */
h2 br, h3 br, h4 br, h5 br, h6 br { display: none; }

/* — Hero (home) : remplace le pin CLS desktop (scope >=1280, pitfall #34) — */
#header > a.image img { width: 100%; height: auto; aspect-ratio: 1280 / 460; }

/* — Bandeau blog/news sous le hero (commun 768-1279) : hauteur reduite 43 -> ~35px (padding
   vertical 7 -> 3). Selecteur a.ja-link : la regle du generator (style inline body, apres nous)
   a la meme specificite en .ja-link, il faut la depasser — */
#journal-alert a.ja-link { padding-top: 3px; padding-bottom: 3px; }

/* — H1 + son rectangle (commun 768-1279) : une ligne EN et FR a police 31px inchangee.
   Le titre EN fait 585px naturels, il faut >=605 de contenu -> 92% (cap 720) donne 606-620px
   de contenu (le .box desktop fait 410px fixes) — */
.box { width: 92% !important; max-width: 720px; }

/* — Cartes The Newest Felines home (commun 768-1279, demande Dan 09/08) : bord a bord PLEINE
   LARGEUR comme desktop (4x320=1280 a 1280). La row .container des cartes subit le padding 24
   du socle ET celui de son parent #features.container (retrait de 48px par cote) -> marges
   negatives symetriques + padding 0 + cap 1200 leve. Zone theorique 1201-1279 : #features reste
   borne a 1200, la row centree a ~39px des bords (aucun appareil reel). Scope home garanti :
   la row des cartes membre (login.class.php) n'a PAS la classe .container. — */
#features > .row.container:has(> div.featured.click_feline) { margin-left: -24px !important;
    margin-right: -24px !important; width: calc(100% + 48px) !important; max-width: none !important;
    padding-left: 0; padding-right: 0; }

/* — Fiches felines (commun 768-1279) : fleches fiche->fiche = parite MOBILE (demande Dan
   09/08). L'ancien #page_nav_felines (pleine largeur, top:462 calibre desktop) recouvrait la
   barre d'ancres et AVALAIT les taps (piege de test : un click() programmatique le traverse,
   un vrai tap non), et ses fleches FLOAT de 48px trainaient dans le FLUX avant le hero (le
   top relatif ne deplace que le visuel) -> l'img, element remplace, les evitait en descendant
   de 48px (le "trou sous la barre" restant). Le masquer regle les deux. Les chevrons SVG
   .banner_swipe_arrow (rendus PHP + script swipe/click inline du generator ~1549, actif a
   toute largeur) prennent le relais ; il lit les href de #page_nav_felines meme masque. */
#page_nav_felines { display: none !important; }
/* Chevrons : replique du bloc mobile du generator (~3991), svg. prefixe pour depasser son
   .banner_swipe_arrow{display:none!important} min-768 (specificite, l'inline vient apres nous).
   Sans le +15px mobile : ici l'img n'a pas de margin-top dans le <a>. */
.detail_image { position: relative !important; }
svg.banner_swipe_arrow { display: block !important; position: absolute; top: 50%;
    transform: translateY(-50%); height: 30%; width: auto; color: rgba(255,255,255,.65);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); cursor: pointer; z-index: 2; }
svg.banner_swipe_arrow_left { left: 4px; }
svg.banner_swipe_arrow_right { right: 4px; }
/* Hero en block : tue le line-box de l'inline-block (l'espace parasite sous la barre) */
#header > a.image.detail_image { display: block; }
/* Cadre nom/BOOK sous l'image et rapproche du hero, portrait ET paysage ("h1 comme portrait",
   Dan 09/08) : le -125px de .feline_spec (stylesheet desktop) le faisait chevaucher l'image,
   et le .box gardait ses 45px desktop malgre l'absence du bandeau blog/news des fiches. */
#header .feline_spec { margin-top: 0 !important; }
/* 26px = parite avec les pages a banniere (gap mesure 25.6 : margin 16 + ~10 intrinseque ;
   la fiche n'a pas l'offset -> 26 direct). Demande Dan 11/08 (H1-Normal vs H1-Felines). */
#header .feline_spec .box { margin-top: 26px !important; }
/* Logo leopard/lionne du titre de section Rates : la garde socle img{max-width:100%} le
   reduisait a 0x0 dans son TD de 20px (table titre 3 cellules trait/logo/trait). */
table.box_text td img { max-width: none !important; }
/* Traits du logo tarif : proportions DESKTOP (width 25% du TD, pousses contre le logo par la
   marge 70%). Le <style> inline max-1279 de felines.class.php (~2445) les forcait a 100%
   (calibrage mobile) : specificite hr. requise, l'inline vient apres nous dans le document. */
.tarif_desc1 hr.box_line_left_tarifs { width: 25% !important; margin-left: 70% !important; margin-right: 0 !important; }
.tarif_desc1 hr.box_line_right_tarifs { width: 25% !important; margin-right: 70% !important; margin-left: 0 !important; }
/* Photos de la fiche en mosaique 2 colonnes (pattern CSS Grid mobile, checklist #8) : les
   templates desktop = floats calibres 1304px fixes -> photos 600px empilees puis CLIPPEES
   (1304 dans 820 comme dans 1180). Scope div[id=sortGroup] : la fiche rend des DIV>LI deja
   a plat (pas de UL, pas besoin du flatten JS mobile) ; la galerie publique n'a AUCUN template
   a 768-1279 (verifie 09/08). position:relative sur les LI = pitfall hit-testing iOS + grid
   dense (checklist #8, pose en JS au flatten sur mobile, ici en CSS). */
/* 4 colonnes UNIFORMES portrait ET paysage (Dan 10/08 : "comme en paysage") : rangees a
   hauteur fixe = colonne x 1.5 (ratio natif 600x900 -> zero crop portraits) + object-fit
   cover ; les landscape span 2 (cellule 4:3 vs image 3:2 = crop lateral ~11%, assume).
   Le template1 (4 photos) tombe ainsi sur UNE ligne. */
div[id="sortGroup"][class*="template"], div[id="sortGroup2"][class*="template"], div[id="sortGroup3"][class*="template"] { display: grid !important; width: 100% !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-auto-flow: dense !important;
    grid-auto-rows: calc((100vw - 12px) * 0.375);
    gap: 4px !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; }
div[id="sortGroup"][class*="template"] > li, div[id="sortGroup2"][class*="template"] > li, div[id="sortGroup3"][class*="template"] > li { margin: 0 !important; padding: 0 !important;
    min-width: 0 !important; width: 100% !important; list-style: none !important; display: block !important;
    position: relative !important; box-sizing: border-box !important; justify-self: stretch !important;
    overflow: hidden; }
div[id="sortGroup"][class*="template"] > li img, div[id="sortGroup2"][class*="template"] > li img, div[id="sortGroup3"][class*="template"] > li img { width: 100% !important; height: 100% !important;
    display: block !important; max-width: 100% !important; margin: 0 !important; object-fit: cover; }
div[id="sortGroup"][class*="template"] > li.is-landscape, div[id="sortGroup2"][class*="template"] > li.is-landscape, div[id="sortGroup3"][class*="template"] > li.is-landscape { grid-column: span 2 !important; }
/* v127 (19/08, retour Dan PROD) : la mosaique ci-dessus etendue aux groupes du MODE MEMBRE :
   #sortGroup2 (photos privees, rendu en DOUBLE sur les fiches a acces prive) et #sortGroup3
   (exclusives) - [id="sortGroup"] exact ne les matchait pas -> photos membres empilees/clippees.
   Meme structure DIV>LI (flatten rotation-proof identique dans felines.class.php). */
/* Zone grise des rates collee au bas des photos : la table details_rating (transparente,
   ~38px) s'intercale entre la galerie 2 et .row.fback -> meme fond = gris continu, y compris
   au-dessus du logo leopard (Dan 10/08). */
table.details_rating { background-color: #f5f5f5; }
/* ...mosaique bord a bord comme le mobile (la section .container garde sinon 24px de padding) */
section.templates.gallery, section.container.gallery:has([id^="sortGroup"]) { padding-left: 0 !important; padding-right: 0 !important; }
/* v127 : la 2e forme = sections photos du MODE MEMBRE (galerie privee 2 + exclusives, classe
   .gallery sans .templates) -> bord a bord comme le public ; :has(sortGroup*) = zero collateral. */

/* — Galerie publique escort-girl (Phase 2, commun 768-1279) — */
/* Deverrouillage : .filters = 1280px FIXES (style.css + bundle CSS), clippee par
   #features-wrapper{overflow:hidden} -> a 768-1279 les colonnes 3-4 des cartes etaient
   INVISIBLES (la moitie des felines absentes, decouvert 10/08). Le padding-top 136
   (reserve de la sidebar desktop) redescend a 40 : la tagline du H1 depasse de la section
   au-dessus (margin-bottom -34), a 0 le bouton FILTERS la chevauchait. */
section#features.filters { width: 100% !important; padding-top: 40px !important; }
/* Filtres = pattern popup mobile sur TOUTE la plage (spec 4.2, un seul chemin de code,
   tactile) : le handler #filter_button du bundle detache #filter_space dans un popup
   (aucune garde de largeur, verifie ; display:block inline pose par le JS, checklist #11). */
/* margin-top 24 : la tagline H2 (small_title_box) finit 6px au-dessus (retour Dan 10/08,
   portrait ET paysage) -> ecart ~30px partout */
#filter_button { display: block; width: 300px; margin: 24px auto 44px; }
#filter_space { display: none; width: 100%; margin: 20px 0 0 !important; text-align: center !important; }
/* Titre "Filters" + trait de la sidebar : inutiles en popup (parite mobile) */
.filter_text, .hr_filter { display: none; }
#nr_girls_desktop { display: none !important; }
#bCenter { display: block !important; }
/* Barre SHOW ALL / compteur / APPLY FILTERS en tete du popup (parite mobile) */
#mobile_buttons { display: flex; align-items: center; margin-bottom: 65px; }
#bLeft { float: left; }
#bRight { float: right; }
#bCancel { background: #e4e4e4 !important; color: #000 !important; }
#bApply { background: #938bbc !important; color: #000 !important; }
/* Popup scrollable : le JS pose overflow-y sans borne de hauteur (mobile borne a 100vh).
   Generique .popup_modals mais inoffensif pour login/alertes (contenu court).
   overscroll-behavior:contain : arrive en bout de course, le scroll du popup ne doit pas
   CHAINER vers la page derriere (retour Dan 12/08). */
.popup_modals .modal_content { overflow-y: auto; max-height: calc(100vh - 140px); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* Popup filtres OUVERT : la page derriere doit etre INERTE (retour Dan 12/08 : un drag hors
   modal scrollait la galerie). Verrou a 2 autres couches (ceinture-bretelles WebKit, en plus
   du contain ci-dessus) : (1) scroll du document verrouille tant que le modal filtres est
   VISIBLE — cle sur le display:block INLINE pose par le composant popup du bundle (les modals
   fermes par closeBox restent en DOM avec display:none inline, ne pas matcher sur la seule
   presence de .modal_filter_target) ; (2) aucun pan tactile ne peut demarrer sur le backdrop.
   Scope filtres seul : login/alertes inchanges. */
html:has(.popup_modals[style*="block"] .modal_filter_target),
html:has(.popup_modals[style*="block"] .modal_filter_target) body { overflow: hidden !important; }
.modal_backdrop { touch-action: none; overscroll-behavior: none; }
/* Labels readonly des sliders Age/Height : fond blanc UA sur le modal #f5f5f5 (retour Dan
   10/08) -> transparent. Les selects (Country) restent des vrais controles, blancs. */
#filter_space .slider-range input { background: transparent; }
/* Bouton OK generique du composant popup (modal_buttons, cree par chaque popup.alert) :
   parasite dans le popup filtres, les vrais controles sont SHOW ALL / APPLY FILTERS
   (retour Dan 10/08). Scope au modal filtres seul : les alertes gardent leur OK. */
.popup_modals:has(.modal_filter_target) .modal_buttons { display: none; }
/* Grille cartes pleine largeur bord a bord (parite mobile + decision home 08/08) :
   #feline_split porte width:73%;float:right INLINE, et un padding-left:4px (custom.css) ;
   le .row skel garde ses marges negatives -> tout a zero. */
#feline_split { width: 100% !important; padding-left: 0 !important; }
#fillFelines.row { margin: 0 !important; }
.feline_line > section > a > div > img { width: 100%; height: auto; }

/* — Page RATES publique (audit pages secondaires 12/08) : div.show_felines.container est
   FORCE a 1280px (style.css, !important + specificite > socle .container) -> grille felines
   calee a gauche et 5e carte clippee de 4px a 820. ul.rates_pictures est PARTAGEE (pitfall
   #24 : villes .citycontent + blog .journal) -> tout est scope a la page tarifs. Grille
   full-bleed flex centree, cartes 160 fixes (5/rangee a 820, 7 a 1180). — */
body:has(section#features.tarifs_page) div.show_felines.container { width: 100% !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
/* Pages VILLES (Dan 13/08) : vignettes felines alignees a GAUCHE des paragraphes comme
   desktop — le padding socle .container sur le parent de la grille les decalait de +24
   (les paragraphes vivent dans .center-65, non paddee). Scope villes (img.banner). */
body:has(div > img.banner) div.container:has(> ul.rates_pictures) { padding-left: 0 !important; padding-right: 0 !important; }
body:has(section#features.tarifs_page) ul.rates_pictures { display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100% !important; padding: 0; }
/* ^ flex-start (Dan 12/08) : rangee incomplete justifiee A GAUCHE comme desktop
   (les rangees pleines font exactement 100%, seule la derniere differe) */
body:has(section#features.tarifs_page) ul.rates_pictures > li { flex: 0 0 auto; }
/* Retours Dan 12/08 (lot rates) :
   (1) vignettes BORD A BORD comme les autres grilles de cartes : li/a/img en % (le generique
       width:160 frappe li ET a, pitfall #24) — 5 colonnes portrait, 7 paysage ;
   (2) table : les <col> devises fixes 170x3 ecrasaient le libelle (162px = wrap) ET la
       colonne EUR sans width (39px !) — devises egalisees, le libelle recupere le reste
       et tient sur UNE ligne ; la meme regle frappe TOUTES les tables de l'onglet
       (header/corps alignes sur les memes cols, ne pas passer en auto) ;
   (3) textes plus larges : .tarifs_desc inline 65% ;
   (4) zone grise Payment types bord a bord : elle porte l'id contact_icons DUPLIQUE
       (3e instance !) et tombait sous le cap 760px de la regle page contact ;
   (5) les 3 payment types espaces : .payments > .row inline 70%. */
body:has(section#features.tarifs_page) ul.rates_pictures > li,
body:has(section#features.tarifs_page) ul.rates_pictures > li > a { width: 20% !important; max-width: none !important; }
body:has(section#features.tarifs_page) ul.rates_pictures > li > a { width: 100% !important; }
body:has(section#features.tarifs_page) ul.rates_pictures img { width: 100% !important; height: auto; }
body:has(section#features.tarifs_page) .tarifs_table table col:nth-child(n+2) { width: 105px !important; }
body:has(section#features.tarifs_page) .tarifs_table { width: 94% !important; }
body:has(section#features.tarifs_page) .tarifs_desc { width: 85% !important; }
body:has(section#features.tarifs_page) #contact_icons:not(.c1):not(.c2) { width: 100% !important; max-width: none !important; }
body:has(section#features.tarifs_page) #contact_icons:not(.c1):not(.c2) .payments > .row { width: 94% !important; }
@media (min-width: 900px) {
    /* Paysage : memes intentions, valeurs desktop-like (verification de coherence Dan) */
    body:has(section#features.tarifs_page) ul.rates_pictures > li { width: 14.2857% !important; }
    body:has(section#features.tarifs_page) .tarifs_table table col:nth-child(n+2) { width: 150px !important; }
    body:has(section#features.tarifs_page) .tarifs_table { width: 88% !important; }
    body:has(section#features.tarifs_page) .tarifs_desc { width: 75% !important; }
    body:has(section#features.tarifs_page) #contact_icons:not(.c1):not(.c2) .payments > .row { width: 82% !important; }
}

/* — Page FAQ (retours Dan 12/08) : #faq_text_ porte la classe .container -> MON padding
   socle 24 reduisait son contenu a 787px, la rangee recherche (~812 : label + champ 354 +
   menu 365) WRAPPAIT aux 2 orientations, et le bouton Search se decalait de +24 vs les
   triangles de section. Padding 0 = rangee sur une ligne en paysage ET bouton/triangles/
   sections alignes sur le meme bord. — */
#faq_text_ { padding-left: 0 !important; padding-right: 0 !important; }
/* — Page SEARCH (Dan 12/08) : la boite de recherche Google CSE (form 652px) et les
   resultats (700px) rendent cales A GAUCHE de leur conteneur -> centres, les 2
   orientations. — */
.searchFaqClass form.gsc-search-box, .searchFaqClass .gsc-wrapper { margin-left: auto !important; margin-right: auto !important; }

/* — Formulaire BOOKING (Phase 2 formulaires, spec 4.7) : PORTRAIT = pile 640 labels
   au-dessus (parite mobile) ; PAYSAGE = format desktop 2 colonnes FLUIDIFIE (Dan 11/08).
   Commun : bouton BOOK cible tactile 48px. — */
form#frmBooking a.bookSend { height: 48px !important; line-height: 50px !important; }

/* Booking PORTRAIT (768-899) : colonne unique 640 centree, labels au-dessus */
@media (max-width: 899px) {
    /* Colonne 640 : la page porte width:990px INLINE !important (+ .fe_booking 980) ; la
       garde socle les cape a 100% -> on borne le container a 640. Specificite : la garde
       html [style*=]:not():not() = (0,3,1) -> il faut (0,3,2). */
    html div.container.reserve[style*="width"] { max-width: 640px !important; }
    .reserve #title { width: 100% !important; }
    /* Colonnes desktop 462px empilees pleine largeur */
    form#frmBooking .colleft, form#frmBooking .colright { width: 100% !important; margin: 0 !important; float: none; }
    /* Labels au-dessus (mecanique style-mobile : .input_left en bloc 100% passe SOUS le
       label flottant) + champs pleine largeur */
    form#frmBooking .text_left { margin-left: 0 !important; width: auto !important; margin-bottom: 6px; }
    form#frmBooking .input_left { width: 100% !important; margin-left: 0 !important; padding-left: 0 !important; }
    form#frmBooking input.line { width: 100% !important; margin-left: 0 !important; }
    /* Respiration Payment type -> "The meeting will take place at" (Dan 11/08) : le
       margin:0 generique ci-dessus collait la colright empilee sous la colleft */
    form#frmBooking #reserve_feline .colright { margin-top: 28px !important; }
    /* Bloc "the meeting will take place at" : libelle 238px + radios en absolute right:0
       (calibrage desktop) -> deux blocs empiles, City/Country repart sur sa propre ligne */
    form#frmBooking .meeting_where { float: none !important; width: auto !important; margin-bottom: 8px !important; }
    form#frmBooking .w_hotel { position: static !important; float: none !important; display: block; margin-bottom: 14px; }
    /* Rangees descriptions + textareas : le swap JS mobile (.mobileswaprows1, matchMedia
       <=767 one-shot ~4476) n'appaire pas ici -> appairage CSS : rangees display:contents
       dans .fe_booking flex colonne, ordre texte1, ta1, texte2, ta2, rangee finale.
       Clearfix skel ::before/::after = items flex fantomes (piege v13). */
    .fe_booking { display: flex; flex-direction: column; }
    .fe_booking > .row.mobileswaprows1 { display: contents; }
    .fe_booking > .row.mobileswaprows1::before, .fe_booking > .row.mobileswaprows1::after { content: none !important; }
    .fe_booking > div:nth-child(1) > .colleft { order: 1; }
    .fe_booking > div:nth-child(2) > .colleft { order: 2; margin-top: 14px !important; }
    .fe_booking > div:nth-child(1) > .colright { order: 3; margin-top: 48px !important; }
    .fe_booking > div:nth-child(2) > .colright { order: 4; margin-top: 14px !important; }
    .fe_booking > .row:not(.mobileswaprows1) { order: 5; }
    form#frmBooking textarea.input_textarea { width: 100% !important; box-sizing: border-box; }
    /* Photo de la feline sous le formulaire, pleine colonne */
    form#frmBooking .colright img { width: 100% !important; height: auto !important; margin-top: 20px; }
    /* Widget Turnstile : le margin:0 generique avale le margin-top:63px inline de son
       conteneur (colle au select) et le div 300px (fixe par le script CF) restait a
       gauche -> respiration + centrage margin auto (flex ne centre que l'iframe interne) */
    form#frmBooking .g-recaptcha { margin: 40px auto 0 !important; width: 300px; max-width: 100%; }
}

/* Booking PAYSAGE (900-1279) : desktop fluidifie — les colonnes 462px fixes (990 total)
   wrappaient sous 1030 -> 47% fluides (400-462px selon largeur), mecanique desktop
   conservee (labels a gauche, floats, marges inline dont le mt:63 du bloc Turnstile). */
@media (min-width: 900px) {
    html div.container.reserve[style*="width"] { max-width: calc(100% - 48px) !important; }
    form#frmBooking .colleft { width: 47% !important; }
    form#frmBooking .colright { width: 47% !important; margin-left: 5.5% !important; }
    /* Colleft IMBRIQUE (Turnstile + bouton BOOK dans le colleft de la rangee finale) :
       47% de 47% = bouton etroit ; desktop le rend pleine colonne */
    form#frmBooking .colleft .colleft { width: 100% !important; margin-left: 0 !important; }
    form#frmBooking textarea.input_textarea { width: 100% !important; box-sizing: border-box; }
    form#frmBooking .colright img { width: 100% !important; height: auto !important; }
}

/* — Formulaire CONTACT (commun 768-1279) — */
/* Rangee des 4 icones : inline width:60% = cellules de 123px, les textes email/telephone
   se chevauchaient -> memes proportions que la rangee equivalente du footer (max 760) */
/* :not(.c1):not(.c2) : l'id contact_icons est DUPLIQUE 3x (bloc page contact + les 2 rangees
   du footer c1/c2) -> sans le :not, cette regle bornait aussi les colonnes footer a 760
   (le frein paysage constate par Dan le 11/08). */
#contact_icons:not(.c1):not(.c2) { width: 92% !important; max-width: 760px !important; }
/* Colonne de contenu .db_text (inline 60% = 463px) -> 640 comme booking. Scope page
   contact seule : les autres pages editoriales = etape "pages secondaires". Specificite
   (0,4,2) requise pour depasser la garde socle (0,3,1) sur max-width. */
body:has(#contactForm) div.db_text[style] { width: 90% !important; max-width: 640px !important; }

/* — CASTING (flux multi-etapes ?p=0..4) : commun / portrait pile / paysage desktop
   fluidifie (retours Dan 11/08) — */
/* Barre d'etapes : #casting = 1189px FIXES desktop (!important) -> clippee par le wrapper
   overflow hidden, la fin des etapes etait INVISIBLE. Pleine largeur, wrap centre. */
#casting { width: 100% !important; text-align: center; }
/* Textes intro/criteres : .casting_text = 835px fixes -> texte coupe au bord droit a 820
   (meme famille que le clip galerie). Mobile fait 90%. */
.casting_text { width: 92% !important; max-width: 700px; margin: 0 auto !important; box-sizing: border-box; }
/* Conteneur du form (p3) : PRESERVER l'espace sous la barre d'etapes (l'inline porte
   margin-top:60 ; mon ancien margin:0 auto le collait a la ligne de separation, Dan 11/08) */
.casting_p { width: 92% !important; margin: 40px auto 0 !important; }
/* CTA de bas d'etape (I'm interested / I meet your criteria / I confirm) : centres
   (inline text-align:right + float:right p3), largeurs fixes .next 835 / .next1 975
   cassees. Largeur = celle de la COLONNE au-dessus (Dan 11/08) : p1/p2 = gabarit des
   textes (700), p3 = 100% du conteneur du form (.casting_p) pour eviter le wrap. */
.container.next, .container.next.next1 { width: 92% !important; max-width: 700px !important;
    float: none !important; margin: 0 auto !important; text-align: center !important; }
.container.next.next2 { width: 100% !important; max-width: none !important;
    float: none !important; margin: 0 auto !important; text-align: center !important;
    padding-top: 40px; }
    /* ^ padding-top 40 (PAS margin) : le CTA "Je confirme..." etait COLLE au bas du form
       (retour Dan 12/08). Il porte clear:both -> en paysage la CLEARANCE des colonnes
       flottees ABSORBE tout margin-top ; le padding, lui, tient partout. */
/* Radios "deja travaille comme escorte" : div inline text-align:left sans classe, ses
   line boxes contournent le label flottant (1re ligne a droite, wrap a gauche) -> clear */
#form_casting div[style*="text-align:left"] { clear: both; padding-top: 4px; }
/* Bouton d'envoi (etape photos) : centre, cible 48px (l'inline le decale de 152px).
   Retours Dan 12/08 (2e lot p4) : bouton descendu (inline margin-top:40 -> 64) ; libelle
   RECENTRE VERTICALEMENT (l'inline line-height:46 + padding 5px dans la height forcee 48
   border-box = content ~38px -> texte trop bas ; et un input ne centre PAS son libelle a
   line-height:normal, mesure a l'encre dy +9.5px) : padding vertical 0, borders 0 ->
   line-height 48 = content-box exact. Le padding !important : la skel `.row > *
   {padding:0!important}` ecrase tout padding non marque des enfants de .row. */
#form_casting .cast_submit input, .cast_submit input.input_submit { margin-left: 0 !important; margin-top: 48px !important; height: 48px !important; min-width: 200px; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 48px !important; }
/* ^ 48/48 : le texte "En cliquant..." au MILIEU de l'espace bloc SSL -> bouton (retour
   iPad Dan 12/08 "trop colle" — la hauteur du widget Turnstile varie selon l'etat/le
   device, l'equilibre padding=margin reste stable) */
.cast_submit { text-align: center; }
/* Etape photos : boutons "Choose a photo" + cellules nom de fichier + "delete" = des
   LABELS (classes fileupload1..7 / file1..7 / effacer1..7) dans les rangees .dotleaders,
   30 -> 40px (spec : boutons upload larges) */
.dotleaders label[class^="file"], .dotleaders label[class^="effacer"] { height: 40px !important; line-height: 40px !important; }
/* Etape photos p4, retours Dan 12/08 :
   (a) "Priere de joindre..." = <p> nu de .page_4_description, laquelle vit HORS .container
   -> texte bord a bord ecran. Memes marges que la rangee uploads en dessous : celle-ci =
   .row inline width:980 centree dans le container (padding 24) => min(980, 100% - 48px). */
.page_4_description p { width: calc(100% - 48px); max-width: 980px; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; }
/* (b) "En cliquant sur ENVOYER..." + bouton : colonne .cast_submit1 FLOTTEE A DROITE
   (inline float:right, span 304px text-align:left) -> defloatee pleine largeur, span et
   bouton centres (le .cast_submit{text-align:center} existant centre l'input).
   (c) espace bouton -> footer reduit : inline margin-bottom:100 -> 60 (gap 113 -> ~73). */
div.cast_submit1 { float: none !important; clear: both; width: 100% !important; margin-bottom: 100px !important; padding-top: 48px !important; }
/* ^ gap visuel bouton -> footer = mb - 40 (collapse avec le margin-bottom:-40 de la row)
   + 13 (padding wrapper) = ~73px (etait 113 + les <br> ci-dessous).
   padding-top 30 (retour Dan 12/08, 2e lot) : le texte "En cliquant..." etait a 4px du
   bloc SSL (l'inline margin-top:25 est AVALE par la clearance, memes floats qu'en (b)). */
.cast_submit1 > span { width: 50% !important; margin: 0 auto; text-align: center !important; }
/* ^ width 50% EXPLICITE (retour Dan 12/08 "reduire de 50%") : un max-width sans !important
   est ecrase par la garde socle max-width:100%!important (specificite 0,3,1) -> le span
   restait pleine largeur. width bat l'inline 304px par !important. */
/* 4 <br> de calage desktop trainent APRES le bloc bouton dans la row (~108px de lignes
   vides au-dessus du footer) : masques, l'espace est pilote par le margin-bottom ci-dessus */
.cast_submit1 ~ br { display: none; }

/* Casting PORTRAIT (768-899) : form en pile 640 labels au-dessus + criteres p2 EMPILES
   comme mobile (Dan 11/08) */
@media (max-width: 899px) {
    .casting_p { max-width: 640px !important; }
    #form_casting .colleft, #form_casting .colright { width: 100% !important; margin: 0 !important; float: none !important; }
    #form_casting .text_left { margin-left: 0 !important; width: auto !important; margin-bottom: 6px; }
    #form_casting .input_left, #form_casting .input_full { width: 100% !important; margin-left: 0 !important; padding-left: 0 !important; }
    #form_casting input.line { width: 100% !important; margin-left: 0 !important; }
    #form_casting textarea { width: 100% !important; box-sizing: border-box; }
    /* Paires Height/Weight et Dress/Bra : demi-cellules inline width:50%;height:60px FIXE ->
       les champs 100% debordaient la hauteur. Paires gardees cote a cote, hauteur libre,
       champ borne pour laisser "cm"/"kg" sur la ligne. */
    /* v123 (Dan 18/08) : PAIRES cote a cote dans TOUTE la plage tablette, les 2
       orientations (iPad Air 820 portrait = paires validees 11/08 ; l'empile ne vaut
       que sur telephones, style-mobile). Hauteur libre + unites cm/kg en ligne. */
    #form_casting div[style*="width:50%"] { height: auto !important; min-height: 60px; }
    #form_casting div[style*="width:50%"] input.line { width: calc(100% - 52px) !important; }
    #form_casting .colright > .text_left { clear: both; padding-top: 14px; }
    /* Radios sous leur libelle + triangle du CTA accroche au dernier mot (retours S24-3/4) */
    #form_casting .input_full { clear: both; }
    #form_casting .permis2 { float: none !important; clear: both; width: 100% !important; box-sizing: border-box; }
    .next2 a { padding-right: 22px; position: relative; }
    .next2 a img { position: absolute; margin-left: 6px; margin-top: 4px; }
    #form_casting textarea { margin-left: 0 !important; }
    /* Criteres p2 : les 2 listes l'une SOUS l'autre comme mobile. Structure reelle :
       .row.casting_ok (wrapper skel, enfants FLOTTES par la grille) > .inner_casting_ok
       (43% ml 10%) + .casting_notok (43% ml -7%) > .inner_casting_notok (80% float right,
       texte a droite). float:none sur un seul = chevauchement du float voisin -> les DEUX
       en pleine largeur + clear. */
    .row.casting_ok { width: 92% !important; max-width: 600px; margin: 0 auto -40px !important; }
    /* ^ max 640 -> 600 : marges laterales 90 -> 110 (retour Dan 12/08 "un peu plus de marge") */
    /* CTA "Je correspond..." descendu de 24px (retour Dan 12/08, portrait seul). PAS un
       margin : il collapse a travers la SECTION vide qui precede (max() des marges, +0). */
    .container.next.next1 { padding-top: 24px; }
    .row.casting_ok > .inner_casting_ok { width: 100% !important; float: none !important; margin: 0 !important; }
    .row.casting_ok > .casting_notok { width: 100% !important; float: none !important; clear: both; margin: 24px 0 0 !important; }
    .inner_casting_notok { width: 100% !important; float: none !important; text-align: left !important; margin: 0 !important; }
}

/* Casting PAYSAGE (900-1279) : form 2 colonnes desktop fluidifie (530px fixes = 1115
   total -> 47%) + criteres : colonne "We do not" ELARGIE (chaque item sur une ligne)
   et vraie gouttiere entre les deux (Dan 11/08) */
@media (min-width: 900px) {
    .casting_p { max-width: calc(100% - 48px) !important; }
    #form_casting .colleft { width: 47% !important; float: left !important; margin: 0 !important; }
    #form_casting .colright { width: 47% !important; float: left !important; margin: 0 0 0 5.5% !important; }
    /* p2 : le .row skel (marges negatives) collait le bloc criteres au bord gauche (11px,
       retour Dan 12/08) -> rangee 92% centree, les colonnes % suivent. Marges top/bottom
       de base conservees (rythme CTA valide). */
    .row.casting_ok { width: 92% !important; margin-left: auto !important; margin-right: auto !important; }
    .inner_casting_ok { width: 45% !important; margin-left: 1.5% !important; }
    .casting_notok { width: 48% !important; margin-left: 4% !important; }
    .inner_casting_notok { width: 100% !important; }
    /* p3 demi-cellules Taille/Poids : input inline 163/173px + label flotte -> "cm"/"kg"
       passaient A LA LIGNE (retour Dan 12/08). Meme mecanique que le portrait : champ
       borne, l'unite reste sur la ligne a toute largeur 900-1279. */
    #form_casting input[name="taille"], #form_casting input[name="poids"] { width: calc(100% - 52px) !important; }
}

/* — CTA BOOK de la fiche : le form#reservez porte LUI-MEME la peau .button SOUS
   l'input-bouton -> double couche ; au tap iOS le :hover sticky (#655a9f + border
   #433d6e) peint un liseret decale facon « 2e bouton » (Dan 18/08, bouton-book.png).
   Le mobile regle ca en JS ($('#reservez').removeClass('button'), bundle <=767) ;
   ici en CSS : peau du form eteinte, l'input est LE bouton, elargi au gabarit 238. — */
#header form#reservez.button, #header form#reservez.button:hover { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
#header form#reservez .booking_submit { width: 238px; -webkit-appearance: none; appearance: none; border-radius: 0; }
/* appearance none : l'input seul visible reprenait l'habillage NATIF iOS des submit
   (coins arrondis) que la peau carree du form masquait avant v119 (Dan 18/08) */

/* — Popup cookies pleine largeur (Dan 18/08, retours iPad mini) — le widget cookieconsent
   est configure "floating" (boite 384px en bas a gauche qui chevauchait le contenu) ;
   parite mobile = barre pleine largeur en bas, replique de l'override de style-mobile.css.
   Toute la plage 768-1279 (portrait avait la meme boite, jamais vue : choix cookie stocke). */
.cc-window.cc-floating { padding: 1em 1.8em !important; max-width: none !important; width: 100% !important; left: 0 !important; right: 0 !important; bottom: 0 !important; flex-direction: row !important; -ms-flex-direction: row !important; align-items: center !important; -ms-flex-align: center !important; }
.cc-window.cc-floating .cc-message { flex: 1 1 auto !important; -ms-flex: 1 1 auto !important; margin-right: 1em !important; }
.cc-window.cc-floating .cc-btn { white-space: nowrap !important; flex: 0 0 auto !important; -ms-flex: 0 0 auto !important; }

/* — Paysage (900-1279) : nav desktop compacte — */
@media (min-width: 900px) {
    #nav > ul > li { padding-right: 0.8em !important; }
    /* Espacement fluide EN seulement (~1.1em a 1180) : les libelles FR, plus longs, wrappent
       des +1px de padding a 1180 (verifie) -> FR reste a 0.8em. Zone 900-930 : wrap PREEXISTANT
       les 2 langues (deja connu plan 1 : "900-919 non teste"), a traiter en Phase 2. */
    html[lang="en"] #nav > ul > li { padding-right: clamp(0.8em, 2vw - 6px, 1.5em) !important; }
    /* Menu ESCORTS... decale a gauche : marge du logo flottant 34 -> 12px (gain 22px) */
    #nav .logo { margin-right: 12px !important; }
    #nav .text_menu { font-size: 0.9em; }
    /* WRAP 900-1139 (reliquat passe 15, perimetre reel mesure 12/08 : la barre ne tient sur
       UNE ligne qu'a partir de ~1140 — en dessous ACCES MEMBRE puis FR/EN passaient SOUS la
       barre, par-dessus le hero : iPad mini/9.7 paysage 1024, iPad 10.2 paysage 1080, iPhone
       Pro Max paysage 900-932. Deficits mesures : 60px a 1080, 116 a 1024, 240 a 900.
       Etage 1 (900-1139) : espacements + cluster droit compactes. La variante html[lang=en]
       est REQUISE : la regle clamp ci-dessus a une specificite superieure a #nav>ul>li seul. */
    @media (max-width: 1179px) {
        /* RETOURS DAN 18/08 (v100-v102) : look desktop conserve (logo 214, texte 0.9em,
           bouton/FR-EN desktop). v102 : CHAT ONLINE RETIRE sur ces largeurs (decision Dan,
           « trop d'elements ») -> la place va aux menus (padding fluide, plafond 26) et
           FR/EN sont PINNES au bord droit ; le pin exige le ul en FLEX (margin-left:auto
           sur le li qui PRECEDE .split_lang, selecteur structure-agnostique : les classes
           menu_language/_active s'inversent selon la langue). Baselines : flex-start perd
           l'alignement baseline inline-block -> margin-top explicites FR/EN (23/26,
           valeurs 1180). 1180-1279 = bloc min-1180 dedie plus bas (v111).
           ⚠️ une regle non identifiee ecrase les margins des li nav sans !important. */
        /* v107 (Dan) : icone chat SEULE entre CONTACT et le bouton — les bulles sans le
           texte CHAT ONLINE/OFFLINE. Pas de nouvel asset : les 2 PNG (online violet /
           offline gris, swap change_chat_img du bundle sur #chatOpenClose, etat initial
           generator ~4043 via is_open) ont le MEME layout texte x0-45 / bulles x49-80
           (verifie au pixel) -> crop CSS object-fit:none + object-position:right = les
           32px de droite, fonctionnel dans les 2 etats. Marge auto ici = l'icone et le
           bouton groupes a droite. */
        #nav > ul > li:has(> span.chat) { margin-left: auto !important; width: 32px !important; padding-right: 0 !important; margin-right: 30px !important; margin-top: 41px; }
        #nav span.chat img#chatOpenClose { width: 32px !important; height: 25px !important; object-fit: none; object-position: right center; }
        /* sous 960 l'icone ne tient plus (900 FR etait deja au plancher) : chat masque,
           le bouton reprend la marge auto */
        @media (max-width: 959px) {
            #nav > ul > li:has(> span.chat) { display: none !important; }
            #nav > ul > li.login { margin-left: auto !important; }
        }
        #nav > ul { display: flex !important; align-items: flex-start; padding-right: 28px; box-sizing: border-box; }
        #nav > ul::before, #nav > ul::after { content: none !important; }
        /* v103 (Dan) : le bouton MEMBRES part a droite (marge auto sur li.login), FR/EN a
           30px de sa droite (24 + padding 6), et les menus prennent tout le jeu restant.
           Pages villes (pas de switcher) : bouton au bord droit, coherent. */
        /* le li du bouton ne prend PAS le padding fluide des menus (les 2 formes, piege 61)
           -> gap bouton->FR/EN = 24 + padding 6 = 30px constant */
        #nav > ul > li.login, html[lang="en"] #nav > ul > li.login { padding-right: 0 !important; }
        #nav > ul > li:has(+ li.split_lang) { margin-left: 24px !important; }
        /* Pages MONOLANGUES (villes sans switcher nav) : bouton a la MEME place que sur les
           pages bilingues, blanc de 86px a la place du selecteur (= sa largeur mesuree,
           constante a toutes les largeurs et langues), comme desktop (Dan 18/08) */
        #nav > ul:not(:has(li.split_lang)) > li.login { margin-right: 86px !important; }
        /* menus 4px trop hauts vs bouton/FR-EN (centres 33 vs 37, screenshot Dan) */
        #nav > ul > li:has(> span.text_menu) { margin-top: 22px !important; }
        #nav li.menu_language, #nav li.menu_language_active { margin-top: 23px !important; }
        #nav li.split_lang { margin-top: 26px !important; }
        /* Libelle court MEMBERS/MEMBRES (spans generator ~2909, inline ~3981 masque le court
           a 0,1,0 -> nos 1,1,0 gagnent) ; MEMES police/taille/couleur que le long (la classe
           portait un vieux 11.9px espace 3px) ; icone login.png retiree (Dan) */
        /* v105-v106 (Dan) : libelle COMPLET restaure (MEMBER ACCESS / ACCES MEMBRE) puis
           icone login.png de retour (v106) = bouton complet comme desktop ; le span court
           reste masque par le defaut generator */
        #nav li.login a.button_login { width: auto !important; padding: 0 16px !important; margin-left: 0 !important; }
        #nav .logo { margin-left: 1px !important; }
        /* padding menus FLUIDE : jeu disponible / 6, plafond 26 (desktop 34) ; le solde
           au-dela du plafond part dans le margin auto = FR/EN restent au bord droit */
        #nav > ul > li { padding-right: clamp(6px, calc((100vw - 979px) / 6), 34px) !important; }
        html[lang="en"] #nav > ul > li { padding-right: clamp(6px, calc((100vw - 935px) / 6), 34px) !important; }
        /* FR/EN identiques a desktop (paddings 6px, fs 15 herites) ; trait separateur a 0
           comme desktop — les DEUX variantes de selecteur obligatoires (piege passe 61 :
           le padding generique EN (1,1,2) bat la regle nue (1,1,1)) */
        #nav li.menu_language_active, #nav li.menu_language, html[lang="en"] #nav li.menu_language_active, html[lang="en"] #nav li.menu_language { padding-left: 6px !important; padding-right: 6px !important; }
        #nav li.split_lang, html[lang="en"] #nav li.split_lang { padding-left: 0 !important; padding-right: 0 !important; }
    }
    /* Etage bas (900-1079 : iPad Pro 13 portrait 1024, iPad 10.2 paysage 1080 pile au bord,
       iPhones Pro Max/Plus paysage 926-932) : memes principes, on ne reduit que le logo
       et les marges — pas le style du bouton. */
    @media (max-width: 1099px) {
        #nav .logo img { width: 180px !important; height: auto !important; }
        #nav .logo { margin-left: 4px !important; }
        #nav li.login a.button_login { margin-left: 0 !important; padding: 0 12px !important; }
        #nav > ul > li { padding-right: clamp(4px, calc((100vw - 940px) / 6), 34px) !important; }
        html[lang="en"] #nav > ul > li { padding-right: clamp(4px, calc((100vw - 896px) / 6), 34px) !important; }
    }
    @media (max-width: 1005px) {
        #nav .logo img { width: 150px !important; }
        #nav .logo { margin-left: 7px !important; }
        #nav > ul > li { padding-right: clamp(3px, calc((100vw - 851px) / 6), 34px) !important; }
        html[lang="en"] #nav > ul > li { padding-right: clamp(3px, calc((100vw - 807px) / 6), 34px) !important; }
    }
    /* 960-1005 : l'icone chat est visible -> constante +50 (32px icone + 18 marge) */
    @media (min-width: 960px) and (max-width: 1005px) {
        #nav > ul > li { padding-right: clamp(3px, calc((100vw - 910px) / 6), 34px) !important; }
        html[lang="en"] #nav > ul > li { padding-right: clamp(3px, calc((100vw - 866px) / 6), 34px) !important; }
    }
    /* Micro-cran 900-920 (aucun device reel, bord de plage : fenetres redimensionnees) :
       paddings bouton/FR-EN seuls, look inchange */
    @media (max-width: 920px) {
        #nav li.login a.button_login { padding: 0 10px !important; margin-left: 0 !important; }
        #nav li.menu_language_active, #nav li.menu_language, html[lang="en"] #nav li.menu_language_active, html[lang="en"] #nav li.menu_language { padding-left: 4px !important; padding-right: 4px !important; }
    }
    /* Tarifs FICHE, les 2 orientations (v114 portrait, etendu paysage v116 sur demande
       Dan) : cols auto = libelle sur une ligne (les <col> 170px fixes desktop le
       wrappaient des 1024) ; scope fiche seulement, la page rates publique aligne
       PLUSIEURS tables sur ses cols fixes, ne pas y toucher. v115 : EUR aligne sur
       "En France" (td colspan=4 de la MEME table, ancre au debut de la colonne EUR,
       text-align:left + padding 17 inline) -> entetes et montants a GAUCHE avec le
       meme retrait, rythme des colonnes regulier. */
    body:has(a.detail_image) colgroup col { width: auto !important; }
    body:has(a.detail_image) table:has(col) td[style*="text-align:right"] { text-align: left !important; padding-left: 17px !important; }
    /* Fil d'ariane blog : meme respiration sous la ligne que desktop (9px ; etait 5) */
    .j-breadcrumb { margin-top: 4px; }
    /* 1180-1279 (iPad Air paysage 1180, iPad Pro 11 1194, zone haute) : Dan 18/08 (SS
       blog-ipadair26) — meme systeme que les etages mais BARRE COMPLETE desktop (CHAT
       ONLINE avec texte, bouton 154, libelle long) : logo cale sur le bord des heros
       (22 = .border_menu/j-wrap), FR/EN epingles a droite (22), espaces menus fluides,
       gaps 30/30 autour du bouton. Meme piege 61 : chaque padding porte les 2 formes. */
    @media (min-width: 1180px) {
        #nav > ul { display: flex !important; align-items: flex-start; padding-right: 22px; box-sizing: border-box; }
        #nav > ul::before, #nav > ul::after { content: none !important; }
        /* le SVG felines-logo a ~9.8% de blanc interne a gauche (21px a 214) : la marge
           vise le GLYPHE a 22 (= bord ligne/heros), pas la boite */
        #nav .logo { margin-left: 1px !important; margin-right: 12px !important; }
        #nav > ul > li:has(> span.text_menu) { margin-top: 22px !important; }
        #nav > ul > li:has(> span.chat) { margin-left: auto !important; width: 81px !important; padding-right: 0 !important; margin-right: 30px !important; margin-top: 41px; }
        #nav > ul > li.login, html[lang="en"] #nav > ul > li.login { padding-right: 0 !important; }
        #nav li.login a.button_login { margin-left: 0 !important; }
        #nav > ul > li:has(+ li.split_lang) { margin-left: 24px !important; }
        /* monolangues : cf. regle 86px du bloc <=1179 (meme mesure a 1180-1279) */
        #nav > ul:not(:has(li.split_lang)) > li.login { margin-right: 86px !important; }
        #nav li.menu_language, #nav li.menu_language_active { margin-top: 23px !important; }
        #nav li.split_lang { margin-top: 26px !important; }
        #nav li.menu_language_active, #nav li.menu_language, html[lang="en"] #nav li.menu_language_active, html[lang="en"] #nav li.menu_language { padding-left: 6px !important; padding-right: 6px !important; }
        #nav li.split_lang, html[lang="en"] #nav li.split_lang { padding-left: 0 !important; padding-right: 0 !important; }
        #nav > ul > li { padding-right: clamp(6px, calc((100vw - 1031px) / 6), 34px) !important; }
        html[lang="en"] #nav > ul > li { padding-right: clamp(6px, calc((100vw - 987px) / 6), 34px) !important; }
    }
    /* Casting p3 en 2 colonnes (900-1279), retours Pixel 9 Pro XL 944 (Dan 18/08) :
       les champs OCCUPENT la colonne. Le libelle FLOTTE dans la cellule et etranglait
       le champ (82px : le calc se cale sur la largeur pleine mais la ligne est mangee
       par le float) -> libelle AU-DESSUS du champ dans les 4 cellules, le calc -52
       existant etire alors le champ. Vetements / soutien-gorge : l'un SOUS l'autre
       pleine colonne (leur demi-cellule donnait des champs de 24 et 10px). */
    #form_casting div[style*="width:50%"] .text_left { float: none !important; width: 100% !important; }
    #form_casting div[style*="width:50%"]:has(input[name="taille_vetements"]),
    #form_casting div[style*="width:50%"]:has(input[name="soutien_gorge"]) { width: 100% !important; float: none !important; }
    /* casting-ipadair (Dan) : vetements/soutien a la MEME longueur que Taille/Poids
       (50% de colonne - unite) + air avant le libelle soutien-gorge */
    #form_casting input[name="taille_vetements"], #form_casting input[name="soutien_gorge"] { width: calc(50% - 58px) !important; }
    #form_casting div[style*="width:50%"]:has(input[name="soutien_gorge"]) { margin-top: 14px; }
    /* underline cheveux/yeux posee sur la ligne du libelle comme les rangees Adresse
       (l'input remontait de ~9px au-dessus de la ligne) */
    #form_casting .colright > .text_left + .input_left input,
    #form_casting .colright > .text_left + .input_left textarea { margin-top: 16px; }
    /* respiration au-dessus des libelles de la colonne criteres ("Couleur et longueur de
       vos cheveux" collait a la ligne cm/kg, Pixel 944) */
    #form_casting .colright > .text_left { clear: both; padding-top: 16px; }
    /* Booking 2 colonnes : le bloc radios hotel/residence est ABSOLU right:0 (desktop) et
       mordait le texte "se fera a" a 944 -> retour dans le flux, a la suite du texte. */
    #frmBooking div[style*="position:absolute"] { position: static !important; display: block; margin: 6px 0 0 0; }
    /* ^ block (et pas inline-block) : sinon "Ville / Pays" remonte sur la ligne des radios
       (booking3, Pixel 944) ; les radios prennent LEUR ligne, la suite retombe dessous */
    /* Rangee Ville/Pays CLONEE sur la rangee Date (booking4, Pixel 944) : libelle 130,
       champ au bord du cadre Date (x = col+130) et MEME largeur (269), ecart standardise */
    #frmBooking .fixHotelHeight + .text_left { clear: both; padding-top: 8px; width: 130px !important; }
    #frmBooking .fixHotelHeight + .text_left + .input_left { float: left; margin-left: 0; padding-top: 8px; width: calc(100% - 130px); box-sizing: border-box; margin-bottom: 12px; }
    #frmBooking .fixHotelHeight + .text_left + .input_left input { width: 100% !important; box-sizing: border-box; }
    /* Intro home un peu elargie aussi en paysage (60% desktop -> 80% ; portrait = 100%) */
    .homeDesc p { width: 80% !important; }
    /* Carac fiche : les 2 colonnes .6u (50% skel) se CHEVAUCHAIENT de 30px a 1180 ->
       flex avec vraie gouttiere ("espace entre colonnes trop faible", Dan 09/08) */
    .carac-row { display: flex !important; gap: 48px; }
    .carac-row::before, .carac-row::after { content: none !important; }
    .carac-row > .\36 u { float: none !important; width: auto !important; flex: 1 1 0; }
    /* Titres THE PROFILE / THE PREFERENCES + leur trait : alignes sur la gauche des libelles
       (= 5%, la marge des .caracteristics posee par le <style> inline max-1279 ; le desktop
       fait pareil a 55px). Specificite h2./div. pour battre cet inline. */
    .carac-row h2.header_caracteristics { margin-left: 5% !important; }
    .carac-row div.header_caracteristics_divider { margin-left: 5% !important; margin-right: auto !important; }
    /* Respiration grise entre le bas des colonnes et la galerie du dessous (Dan 10/08),
       symetrique du h2 mt 45 paysage (le dernier row n'a pas de mb effectif) */
    .profil-grey-wrap { padding-bottom: 45px; }
    /* Galerie publique : cartes 4 colonnes (spec 4.2 paysage ; 900/4=225px, 1180/4=295px) */
    .feline_line { width: 25% !important; max-width: 25% !important; height: auto; }
    /* Popup filtres plus haut en paysage (retour Dan 10/08) : le 5% generique posait le
       modal a 59px du haut avec contenu 100vh-140 (calibrage portrait, barre fixe 62+90) ;
       en paysage la nav n'est pas fixe et le backdrop couvre tout -> modal a 20px, contenu
       100vh-80 (+60px visibles). Scope :has = le seul modal filtres, alertes intactes. */
    .popup_modals:has(.modal_filter_target) { margin-top: 20px !important; }
    .popup_modals:has(.modal_filter_target) .modal_content { max-height: calc(100vh - 80px); }
    /* Galerie paysage, retours Dan 10/08 : (1) H1 trop bas sous la nav (56px, geometrie
       desktop) -> margin-top 57 -> 27 = H1 a ~26px. ATTENTION : les crumbs float "Home /
       Escorts" ne poussent RIEN (un float ne deplace pas les blocs, seulement les line
       boxes) mais ils rendent en overlay a 82-115 -> le H1 remonte passerait DESSUS :
       les masquer (parite portrait/mobile, deja sans crumbs). Scope galerie : les autres
       pages paysage gardent crumbs et marge desktop (fiche validee avec). */
    body:has(section#features.filters) .static_crumbs { display: none; }
    body:has(section#features.filters) .margin_top_title { margin-top: 39px; } /* 27->39 : +12 d'air sous la ligne (Dan 18/08) */
}

/* — Footer commun 768-1279 (parite portrait/paysage, demande Dan 08/08) — */
/* Bloc liens : X seul en ligne 1 (centre), tous les autres en ligne 2 centree, ordre flex.
   Les 3 rangees dupliquees #small_footer_icons* passent en display:contents dans leur conteneur
   devenu flex wrap ; X force son retour de ligne via flex-basis:100%. */
#footer .container:has(> div[id^="small_footer_icons"]) { display: flex; flex-wrap: wrap; align-items: center;
    justify-content: center; column-gap: 36px; row-gap: 12px; padding-top: 24px; padding-bottom: 20px;
    background-color: #756ba9; order: 1; }
#footer div[id^="small_footer_icons"] { display: contents; }
/* Clearfix skel .row::before/::after : avec display:contents ces pseudos deviennent des items
   flex de largeur nulle qui ajoutent chacun un gap fantome de 36px -> les supprimer */
#footer div[id^="small_footer_icons"]::before, #footer div[id^="small_footer_icons"]::after { content: none !important; }
#footer div[id^="small_footer_icons"] > div { float: none; width: auto !important; margin: 0 !important;
    position: static !important; display: flex; align-items: center; gap: 8px; }
#footer div[id^="small_footer_icons"] .footer_links, #footer div[id^="small_footer_icons"] .footer_links_image { float: none; width: auto; margin: 0 !important; }
#footer_twitter { flex-basis: 100%; justify-content: center; }
/* Ordre de la ligne 2 : Links, Sitemap, Terms, Privacy, Disclaimer */
#footer_liens { order: 1; }
#footer_sitemap { order: 2; }
#footer_conditions { order: 3; }
#footer_proteccion { order: 4; }
#footer_responsabilite { order: 5; }
/* Slots sociaux vides + garde Tumblr (retire du site depuis longtemps, purge aussi de fe_content
   08/08 : NE JAMAIS le remettre) */
#footer_facebook, #footer_pintrest, #footer_tumblr, #footer_blog, #footer div[id^="small_footer_icons"] > div:not([id]) { display: none !important; }
/* Garde rotation iPhone (10/08) : un GRAND iPhone charge en portrait (<=767, le bundle clone
   les liens .ff, garde matchMedia one-shot ~4476) puis tourne en paysage (812-932 = CETTE
   plage) garde les clones dans le DOM -> liens en double a cote des .3u. Les .ff ne servent
   que le layout mobile. */
.ff { display: none !important; }
/* City guides AVANT le bloc X+liens, fonds echanges pour garder l'alternance. Les deux blocs
   n'etant pas freres (liens dans #footer, cities dans le wrapper), #footer passe en
   display:contents (aucun style de boite, verifie) et le wrapper devient flex colonne. */
#footer-wrapper { display: flex; flex-direction: column; }
#footer { display: contents; }
/* !important requis : la couleur d'origine vient d'un <style> inline du footer fe_content */
.cities_list { background-color: #655a9f !important; }
#footer-wrapper > #copyright { order: 2; }
/* Contact : les 4 icones (email/phone/telegram/chat) sur UNE ligne */
#footer .row.c1 { width: 100% !important; max-width: 760px !important; }
#footer .row.c1 > .\33 u { width: 25% !important; }
/* Casting/FAQ/Search : separateurs verticaux a mi-chemin des contenus a TOUTE largeur via
   calc (les % cales sur 820 decentraient en paysage). Selecteur enfant STRICT obligatoire :
   ids dupliques a l'interieur des colonnes (le bouton FAQ porte aussi id=footer_faq) */
#footer .row.c2 > #footer_casting { width: calc(182px + (100% - 629px)/3) !important; }
#footer .row.c2 > #footer_faq { width: calc(245px + (100% - 629px)/3) !important; }
#footer .row.c2 > #footer_search { width: calc(202px + (100% - 629px)/3) !important; }
/* Recalibrage 11/08 (textes footer raccourcis en DB) : contenus mesures EN 182/245/202
   (total 629), FR 190/220/218 (total 628 ; faq = sous-titre "Une question sur nos
   services ?"). Constantes PAR LANGUE : le bouton FAQ fait 245px en EN et 180px en FR,
   un jeu unique decentre l'autre langue. Les separateurs .vertical_footer_separator =
   bords de colonnes -> mi-chemin par construction. */
html[lang="fr"] #footer .row.c2 > #footer_casting { width: calc(190px + (100% - 628px)/3) !important; }
html[lang="fr"] #footer .row.c2 > #footer_faq { width: calc(220px + (100% - 628px)/3) !important; }
html[lang="fr"] #footer .row.c2 > #footer_search { width: calc(218px + (100% - 628px)/3) !important; }
/* Largeur de la rangee colonnes : portrait = 92%/760 (la geometrie validee, heritee de
   l'ancienne collision d'id) ; paysage >=900 = pleine largeur comme desktop (Dan 11/08). */
#footer .row.c2 { width: 92% !important; max-width: 760px !important; }
/* Bloc recherche : margin-right:-7px inline = 7px de debordement ; recentre dans sa colonne */
#footer .row.c2 > #footer_search > .footer { margin-right: 0 !important; text-align: center; }
#footer .row.c2 .small_title_footer { margin-bottom: 14px; }
/* Texte des liens un peu plus clair (fond passe au clair #756ba9 depuis l'echange des fonds) :
   la couleur d'origine #d0cde2 est inline sur chaque <a> -> !important */
#footer div[id^="small_footer_icons"] a { color: #e9e7f4 !important; }
/* FR/EN alignes sur la gauche du bouton MORE INFORMATIONS a toute largeur : gauche du bouton
   = gap g = (100vw - 659)/6 ; marge = g - 24 (padding du container).
   PIEGE (Dan 11/08, footer FR decale +45px) : la 1re boite est <a><div> sur page EN mais
   <div> NU sur page FR (langue active, margin-left:48px inline) -> cibler la PREMIERE boite
   quelle que soit sa structure, et remettre la 2e a 0 (sinon la calibree tombait dessus). */
#lang_choose > div:first-child, #lang_choose > a:first-child > div { margin-left: calc((100vw - 659px)/6 - 24px) !important; }
#lang_choose > div:not(:first-child), #lang_choose > a:not(:first-child) > div { margin-left: 0 !important; }
/* ...sauf paysage : alignes sur le F du logo FELINES (x=45 constant, mesure a 940/1180/1279).
   Bloc APRES la regle commune pour gagner la cascade. */
@media (min-width: 900px) {
    #lang_choose > div:first-child, #lang_choose > a:first-child > div { margin-left: 21px !important; }
    /* Paysage : colonnes etalees pleine largeur comme desktop (Dan 11/08) */
    #footer .row.c2 { width: 100% !important; max-width: 1280px !important; }

    /* — Cadre H1 A CHEVAL sur le hero + rectangle 410 comme DESKTOP, toutes les pages
       (demande Dan 12/08). Portrait inchange (cadre sous l'image, regles max-899). — */
    /* Rectangle aux proportions desktop (le commun l'elargit a 92%/720 pour le portrait) */
    .box { width: 410px !important; max-width: 410px; }
    /* Fiche : retour au chevauchement desktop (les regles COMMUNES 0/26px, posees quand le
       paysage suivait le portrait, sont contrees ici : -125 stylesheet + 45 desktop) */
    /* position/z-index : le .detail_image{position:relative} des chevrons (regle commune)
       peint la photo AU-DESSUS du cadre statique -> le haut du cadre disparaissait derriere
       l'image (le desktop n'a pas cette regle). pointer-events none/auto = seul le cadre
       intercepte, la bande de photo derriere reste tapable (PhotoSwipe/chevrons). */
    #header .feline_spec { margin-top: -125px !important; position: relative; z-index: 3; pointer-events: none; }
    #header .feline_spec .box { pointer-events: auto; }
    /* Le CTA "BOOK <alias>" (form#reservez, DOM apres le cadre, se glisse sous son bord bas)
       repasse AU-DESSUS du cadre comme en ordre DOM desktop, sinon le z:3 ci-dessus masquait
       la moitie haute du bouton (libelle centre invisible). form# = sans ambiguite, l'id
       reservez est duplique avec le a#reservez du bas de fiche (piege connu). */
    #header form#reservez, #header a#reservez { position: relative; z-index: 4; } /* a#reservez = bouton
       BACK TO PROFILE de booking (id duplique, famille passe 38-39) : il passait DERRIERE le cadre z3
       en zone tablette (bande violette seule visible, Dan 18/08 iPad Air 13) */
    /* 55 et non 45 : sous 1280 le a.image passe en display:block (generator), le line-box
       inline du desktop (~10px sous l'img) disparait -> -80 au lieu de -70 ; +10 compense.
       Meme correction pour la home ci-dessous. */
    #header .feline_spec .box { margin-top: 55px !important; }
    /* Home : le generator (style inline du bandeau, APRES nous dans le document) force
       #header>div[align=center] a -25!important en 768-1280 -> cadre sous le bandeau.
       div#header = specificite superieure, on retablit le -125 desktop. */
    div#header > div[align="center"] { margin-top: -125px !important; }
    /* +10 HOME SEULE (signature h2.homep) : les pages a banniere (contact...) ont AUSSI
       un div[align=center] mais leur hero #header>img n'a pas le line-box perdu -> elles
       sont deja a -71 avec le mt:45 de base (verifie, la regle non scopee les decalait). */
    body:has(h2.homep) div#header > div[align="center"] .box { margin-top: 55px !important; }
    /* Bandeau News/Blog home : replique du bloc desktop min-1281 du generator (absolu,
       cale a droite sous le hero) avec 2 adaptations : top FLUIDE ancre au bas du hero
       (full-bleed 100vw en 460/1280 + tete a 70px, design acte passe 50 ; le desktop code
       530px en dur pour un hero 1280 fixe) et largeur PLAFONNEE pour ne jamais mordre le
       cadre 410 centre (le duo 410+429 est calibre 1280 ; .ja-title porte l'ellipsis). */
    #journal-alert { position: absolute !important; right: 0 !important; left: auto !important;
        top: calc(70px + 35.9375vw); z-index: 5;
        width: calc((100vw - 410px) / 2 - 6px) !important;
        height: 30px; box-sizing: border-box; overflow: hidden; }
    /* ^ largeur = du bord droit du cadre 410 a l'ecran, jeu de 6px comme desktop (box r925 /
       ja l931) ; a 1279 la formule converge vers les 429px desktop. Le titre garde son
       ellipsis (il tronque aussi sur desktop quand il est long) : la bande du bandeau
       (30px sous le hero) croise la hauteur du cadre, impossible de l'elargir au-dela
       sans le recouvrir (retour Dan 12/08 "largeur bandeau"). */
    #journal-alert a.ja-link { justify-content: flex-end !important; gap: 14px !important;
        padding: 0 12px !important; height: 30px; }

    /* Fiche : description reduite de 30% en paysage (Dan 12/08 ; 1062 -> ~743 a 1180).
       Le <style> inline max-1279 de felines.class.php force #description .desc
       {width:100%!important;margin:0!important} APRES nous -> il porte un ID (1,1,0),
       le prefixe #description est OBLIGATOIRE (piege passe 24, variante ID), et le
       margin auto doit etre re-impose sinon le bloc retreci colle a gauche. */
    #description div.desc.desc_details { width: 70% !important; margin: 0 auto !important; }

    /* Blog paysage : 3 colonnes comme desktop (essai demande Dan 12/08 ; blog.css ne
       passe a 3 qu'au-dela de la plage tablette, le paysage restait a 2) */
    .blog-grid { grid-template-columns: repeat(3, 1fr) !important; }
    /* Zone ACTUALITES remontee de 20% en paysage (Dan 12/08 ; 77 -> 62, meme collapse) */
    .news-section { margin-top: 36px !important; }
    .blog-grid-wrap { margin-bottom: 36px !important; }
}

/* — Portrait (768-899) : chrome mobile (hamburger), contenu desktop fluide — */
@media (max-width: 899px) {
    /* Nav desktop et login flottant caches : titleBar (generator) les remplace */
    #nav { display: none !important; }
    .button_login { display: none !important; }
    /* Largeur ET hauteur du titleBar posees statiquement : sans largeur il shrink-wrap son contenu
       au 1er paint (1235px mesures, shrink-to-fit iPadOS) ; sans hauteur il rend ~50px sur iPad
       (contenu) et le panneau hamburger depasse au-dessus du hero (62px = replique style-mobile) */
    #titleBar { width: 100% !important; left: 0; height: 62px !important; background-color: #fff; }
    /* Espace sous la barre fixe 62px du titleBar */
    body { padding-top: 62px; }
    /* Le hero home porte deja un margin-top:62px inline (generator ~2358) pour degager la barre :
       avec le padding body ci-dessus ca doublerait (132px de chrome, bug iPad 08/08). L'inline n'a
       pas de !important, la feuille gagne. :not(.detail_image) = ne pas toucher les fiches. */
    #header > a.image:not(.detail_image) { margin-top: 0 !important; }
    /* Icone hamburger : glyphe FontAwesome (replique de style-mobile.css, qui ne charge qu'a <=767) */
    #titleBar .toggle:before { display: block; font-family: FontAwesome; font-style: normal; font-weight: 400;
        -webkit-font-smoothing: antialiased; content: "\f0c9"; width: 60px; height: 40px; position: absolute;
        left: 5px; top: 12px; text-align: center; line-height: 40px; font-size: 28px; color: #938bbc; }
    #titleBar .toggle:active:before { opacity: 0.5; }
    /* Popups (Member access, alertes de validation... systeme .popup_modals generique) :
       margin 5% = 41px a 820 -> le haut passait sous la barre fixe de 62px */
    .popup_modals { margin-top: 90px !important; }
    /* Panneau : habillage (replique style-mobile.css) */
    /* Fond violet via box-shadow inset, background-color BLANC : iOS Safari etend la
       background-color d'un element fixe colle au bord dans la safe-area de l'encoche
       (iPhone paysage, menu ouvert = bande violette pleine hauteur, BS5c 11/08) ; la
       box-shadow inset ne fuit jamais. Rendu interieur strictement identique.
       Le separateur droit est AUSSI une ombre inset (pas un border-right) : les borders se
       joignent en biseau au coin -> le trait sombre remontait dans le bord blanc 70px (BS6) ;
       l'ombre ne peint que le padding-box, donc uniquement a cote du violet. */
    #navPanel { background: #fff; border-right: 0;
        box-shadow: inset -2px 0 0 #433d6e, inset 0 0 0 9999px #655a9f;
        font-weight: 400;
        text-transform: uppercase; color: #fff; letter-spacing: 2px; font-size: 0.85em; }
    #navPanel .link { display: block; color: #ddd; text-decoration: none; height: 44px; line-height: 44px;
        border: 0; border-top: solid 1px #433d6e; padding: 0 1em; }
    #navPanel .link:first-child { border-top: 0; }
    #navPanel .link.depth-0 { color: #fff; font-size: 12px; letter-spacing: 1px; }
    /* 4. Intro home : colonne de texte elargie (60% herite du desktop = 463px perdus dans 820) */
    .homeDesc p { width: 100% !important; }
    /* 4c. H2 "Refined Companions / Compagnes raffinees" remonte (ecart bouton->H2 49 -> ~32px) ;
       scope home via :has(h2.homep) pour ne pas toucher les sections des autres pages */
    #features.main_margin_top:has(h2.homep) { margin-top: 20px !important; }
    /* 6. Traits de part et d'autre des glyphes leopard/lionne : proportion desktop (~75% de la
       carte ; la regle globale pose 40px de marges fixes = traits rabougris sur cartes etroites) */
    #featured_felines { margin-left: 22px !important; margin-right: 22px !important; }
    /* 7. Espace avant les titres de section (Latest testimonials, High-End...) : marges desktop reduites */
    table.box_text { margin-top: 10px !important; }
    .seo_footer_block table.box_text { margin-top: 0 !important; }
    /* ...sauf The Newest Felines (1re table de #features, apres les boutons Discover/Contact) :
       proportion desktop/mobile (ecart visuel 40-55px, cible 45) */
    #features > table.box_text:first-of-type { margin-top: 35px !important; }
    /* 7b. Bloc seo 3e colonne (Trust & Discretion) : collait au paragraphe au-dessus (0px) ->
       meme respiration que la gouttiere horizontale entre les 2 premieres colonnes (30px) */
    .seo_footer_block .seo_col + .seo_col + .seo_col { margin-top: 30px; }

    /* — Fiche feline portrait (revue iPad Dan 09/08) — */
    /* 8. Crumbs masques (parite mobile ; 33px de flux, overlay calibre desktop) + hero colle
       sous la barre (l'inline margin-top:-18px est neutralise ; le display:block est au commun). */
    .static_crumbs { display: none !important; }
    #header > a.image.detail_image { margin-top: 0 !important; }
    /* 9. Separateur sous la citation : moins d'espace avant la description (34 -> 12px).
       hr. requis : le <style> inline max-1279 de felines.class.php (~2445) pose 34px
       !important APRES nous (la v34 en .hr_details1 seul ne prenait pas). */
    hr.hr_details1 { margin-bottom: 12px !important; }
    /* 10. THE PROFILE / THE PREFERENCES empiles comme sur mobile (2 colonnes .6u cote a cote
       trop etroites en portrait) ; rythme mobile = h2 margin-top 30, pas de marge sur .6u */
    .carac-row > .\36 u { width: 100% !important; float: none !important; margin-left: 0 !important; }
    /* 10b. Zone grise collee aux photos (parite mobile) : le margin-top:45px du h2 FUYAIT par
       collapse a travers .6u/.carac-row/.container/.profil-grey-wrap (aucun padding) et
       poussait tout le bloc gris a 45px de la galerie -> padding 1px = collapse bloque.
       padding-bottom 30 = symetrie avec l'espace galerie->titre The profile (31px ;
       le dernier row n'a pas de margin-bottom effectif, verifie 21=pb+1). */
    .profil-grey-wrap { padding-top: 1px; padding-bottom: 30px; }
    /* 10e. Un peu plus d'air entre la fin du bloc Profile et le titre The preferences
       (Dan 10/08) : 30 -> 50px, pose sur le h2 lui-meme (une marge sur le .6u serait
       absorbee par collapse avec le mt 30 du h2 : max(20,30)=30) */
    .carac-row > .\36 u + .\36 u h2.header_caracteristics { margin-top: 50px !important; }
    /* 10f. Ancre PROFILE & PREFERENCES : le top:-70px inline + l'offset -15 du bundle
       (branche <=899) posaient le haut du titre 7px SOUS la barre fixe de 62 ("arrive
       au milieu du titre", Dan 10/08). -97 = barre 62 + air 20 + offset bundle 15. */
    a[name="carac"] { top: -97px !important; }
    /* 10c. Titres centres comme mobile (l'inline max-1279 les cale a gauche margin 0) +
       espaces mobile : h2 mt 30 (au lieu de 45), trait mb 20 (au lieu de 30) */
    .carac-row h2.header_caracteristics { text-align: center !important; margin: 30px 0 0 !important; }
    .carac-row div.header_caracteristics_divider { margin-bottom: 20px !important; }
    /* 10d. Zone rates alignee sur la zone profile/preferences : l'inline width:80% (618px)
       etait plus etroit que les rangees carac (90% = 695px) */
    .tarifs_table { width: 90% !important; }
    /* 11. Tarifs : colonnes devises au contenu (les <col> fixes ~160px compressaient le
       libelle de la 1re colonne a 98px = wrap sur 3 lignes). Scope fiche (la page rates
       publique aligne PLUSIEURS tables sur ses cols fixes, ne pas y toucher). */
    body:has(a.detail_image) colgroup col { width: auto !important; }
    /* Meme alignement EUR / "En France" qu'en portrait >=900 (v115, cf. bloc paysage) */
    body:has(a.detail_image) table:has(col) td[style*="text-align:right"] { text-align: left !important; padding-left: 17px !important; }
    /* 12. Toutes les pages a banniere (sections about/faq/contact/rates/casting + villes) :
       meme normalisation que home et fiche (demande Dan 09/08).
       a) banniere collee sous la barre : les margin-top inline (30px sections dans #header,
       56px villes sur img.banner) = calibrage desktop, doublaient avec le padding body 62. */
    #header > img { margin-top: 0 !important; }
    /* Villes : le generator (~2129) emet un <style> inline apres nous avec
       #features-wrapper img.banner{margin-top:52px!important} en max-1279 (piege v16 : inline
       de contenu > feuille a specificite egale) -> selecteur enfant pour le depasser. */
    #features-wrapper > div > img.banner { margin-top: 0 !important; }
    /* Villes, alignement menu ouvert (session BrowserStack 11/08, BS3b) : la banniere rendait
       a 76 (padding-top:6px du #features-wrapper, bundle CSS) alors que le violet du panneau
       demarre a 70 (= heros home/fiche) -> 6px de liseré. Scope villes seules (img.banner
       n'existe que la), meme regle que l'ex-v56 mais appliquee SEULE sur l'etat v54 sain. */
    body:has(div > img.banner) #features-wrapper { padding-top: 0 !important; }
    /* Fiches felines : le template porte <div id=header-wrapper style="margin-top:1px"> EN DUR
       (generator ~1270/1432, home non) -> hero a 71 quand home/villes sont a 70 pile = filet
       blanc 1px au-dessus de la photo, menu ouvert (retour Dan BS 11/08). Scope fiche seule. */
    body:has(a.detail_image) #header-wrapper { margin-top: 0 !important; }
    /* b) cadre H1 (.box) SOUS la banniere comme sur la home : le parent porte un inline
       margin-top:-125px (2 graphies selon les pages) qui le faisait chevaucher l'image. */
    div[style*="margin-top:-125px"], div[style*="margin-top: -125px"] { margin-top: 0 !important; }
    /* c) ...et cadre REMONTE pres de la banniere (Dan 11/08 : seule la home a le bandeau
       News/Blog sous son hero, ailleurs le mt:45 desktop du .box = espace mort). ~25px
       sous la banniere comme la galerie. Ne touche ni galerie (.margin_top_title), ni
       fiche (.feline_spec, regle dediee 12px). */
    div[style*="margin-top:-125px"] > .box, div[style*="margin-top: -125px"] > .box { margin-top: 16px !important; }
    /* ...SAUF la HOME (EN+FR, signature h2.homep) : son .box matchait AUSSI (regression
       signalee Dan 11/08, le bandeau Blog/News recouvrait le cadre remonte ; seul le
       PARENT -125 etait protege par le #header>div[align=center]{-25} du generator).
       Retour aux 45px desktop, le bandeau vit dessous. */
    body:has(h2.homep) div[style*="margin-top:-125px"] > .box,
    body:has(h2.homep) div[style*="margin-top: -125px"] > .box { margin-top: 45px !important; }
    /* d) Contact : respiration avant le rectangle "Contact form" (le mt:10 generique de
       table.box_text, calibre home au 7., etait trop serre ici ; paysage = 45 desktop) */
    body:has(#contactForm) table.box_text { margin-top: 35px !important; }
    /* e) About us (Dan 12/08) : zone de texte elargie (inline 65% -> 85%, scope par le
       container temoignages = signature de la page ; le cap 640 de contact a une
       specificite superieure et reste intact) + TEMOIGNAGES EN 1 COLONNE CENTREE :
       la row inline 893px porte des testimony_box FLOTTEES 2 colonnes desktop
       (clear:both / margin-left:93px alternes) = calages disparates a 820. */
    body:has(.container.testimony) .db_text { width: 92% !important; max-width: 720px; }
    .row.testm { width: 100% !important; }
    /* FAQ portrait (Dan 12/08) : textes et zones du dessous a la largeur du rectangle H1
       (.box = 92%/720) ; le menu deroulant inline 365 est reduit pour que la rangee
       tienne sur UNE ligne meme en FR (label "Recherche" plus long). L'inline
       width:835!important de #faq_text_ est cape par la garde socle max-width:100%. */
    .paqPage .faqHeader { width: min(92vw, 720px); margin: 0 auto; box-sizing: border-box; }
    #faq { width: min(92vw, 720px) !important; }
    #faq select#group { width: 240px !important; }
    /* FAQ individuelles (section#faq.container + div.faq__ inline 65%) : zone texte
       elargie a la largeur du cadre (Dan 12/08 ; paysage garde le 65% desktop).
       Padding container a 0 sinon le contenu fait 672 au lieu de 720. */
    section#faq.container { padding-left: 0 !important; padding-right: 0 !important; }
    #faq .faq__ { width: 100% !important; }
    /* Page SEARCH portrait : memes ajustements que la FAQ (Dan 12/08) — textes et zone
       de recherche a la largeur du cadre H1 */
    div.container:has(> .searchFaqClass) { padding-left: 0 !important; padding-right: 0 !important; }
    .searchFaqClass { width: min(92vw, 720px); margin-left: auto; margin-right: auto; }
    /* f) Events PORTRAIT : les 2 vignettes l'une SOUS l'autre (Dan 12/08 ; le paysage garde
       le cote a cote desktop). Cartes .6u flottees 50%, id event_line DUPLIQUE sur les
       DEUX -> selecteur classe. Images natives 1280x460 (bannieres) = zero upscale. */
    #event_container > .\36 u.featured { float: none !important; width: 92% !important; margin: 0 auto 50px !important; }
    /* Articles blog : fil d'ariane a 74px sous la barre (vs ~11 paysage/desktop, retour
       Dan 12/08 "trop d'espace logo -> fil d'ariane") : le padding-top 60 de .journal
       (rythme desktop, nav DANS le flux) s'additionne a la compensation 62 de la barre
       fixe — meme famille double-spacer que la galerie (passe 30). Scope articles seuls
       (.j-breadcrumb n'existe ni sur l'index ni sur les categories, leur banniere vit
       dans le header-wrapper). */
    body:has(.j-breadcrumb) .journal { padding-top: 0 !important; }
    /* Blog index : zone ACTUALITES remontee de 30% (Dan 12/08 ; espace grille->titre
       77px = collapse max(wrap mb 48, section mt 50) + padding 26 -> 54 : les DEUX
       marges du collapse doivent descendre) */
    .news-section { margin-top: 28px !important; }
    .blog-grid-wrap { margin-bottom: 28px !important; }
    /* g) Page "24h au manoir" (scope .videoWrapper), retours Dan 12/08 portrait :
       (1) l'iframe video 853x480 FIXE debordait de l'ecran (24..877 dans 820) -> largeur
       de la barre du haut (glyphe hamburger a x5, fin logo membre a x796) = 100vw - 28
       centre, ratio 853/480 preserve ; (2) photos 428x287 une par ligne (2x428 > 772)
       -> reduites a 47%, cote a cote 2 par 2 comme en paysage. */
    body:has(.videoWrapper) .videoWrapper iframe { display: block; width: 94% !important; height: auto !important; aspect-ratio: 853 / 480; margin: 0 auto; }
    /* ^ 94% = largeur de la PAIRE de photos en dessous (2 x 47% + espace inline, mesuree
       726/772 = 94.04%), video et photos alignees sur les memes bords (Dan 12/08 v2 ;
       la version "largeur de la barre" 100vw-28 remplacee) */
    body:has(.videoWrapper) #features-wrapper p img { width: 47% !important; height: auto !important; }
    .row.testm .testimony_box { float: none !important; clear: both !important; width: 88% !important; max-width: 640px; margin: 0 auto 40px !important; }
    /* ^ 40px entre temoignages (Dan 12/08 "plus d'espace", etait 10) */
    .row.testm .testimony_box .testimony_content { text-align: center; }

    /* — Galerie publique portrait : cartes 3 colonnes (spec 4.2 ; 768/3=256px, 899/3=300px) — */
    .feline_line { width: 33.33% !important; max-width: 33.33% !important; height: auto; }
    /* Bordure decorative absolute top:69 : sous la barre fixe hamburger = trait parasite (parite mobile) */
    .border_menu { display: none !important; }
    /* Rythme mobile en tete de page (retour Dan 10/08 "portrait toujours pas OK") : le
       #header-wrapper (chrome header desktop VIDE en portrait : 63px, nav cachee)
       s'ADDITIONNAIT au padding-top 62 du socle -> 125px de blanc avant le wrapper
       (double-spacer, meme famille que le hero v10). Mobile n'a PAS ce padding : son
       header-wrapper glisse DERRIERE la barre fixe et sert de spacer. La galerie est la
       seule page ou #header n'a ni hero ni banniere -> on retire le chrome vide, scope. */
    body:has(section#features.filters) #header-wrapper { display: none; }
    /* H1 a ~22px sous la barre comme mobile (62 barre + 6 padding wrapper + 16 = 84) */
    body:has(section#features.filters) .margin_top_title { margin-top: 28px; } /* 16->28 : +12 d'air sous la barre (Dan 18/08) */
}

/* ===== v127 (19/08) : casting p4, compteur d'upload centre (retour Dan PROD). Le style
   inline du module le cale en absolute margin-left:-200px (calibrage desktop) ; le module
   n'a le centrage qu'en media <=767 -> replique ici pour la plage (feuille !important >
   inline sans !important). */
div#progressbar { position: relative !important; left: 0 !important;
    margin: 20px auto 0 !important; width: 80% !important; }

/* ===== v129 (19/08, remplace v128 qui a cree une REGRESSION) : casting, message de
   confirmation post-envoi.
   (1) La VRAIE cause de la troncature a droite (SS Dan) : custom.css (bake dans
   custom-bundle.min.css) porte .cast_success p{width:835px;margin:0 auto} = calibrage
   desktop -> sous ~880px le P deborde du viewport et se fait tronquer. Cap au conteneur,
   toute la plage (inoffensif quand 835 tient : >=884, dont paysage = design intact).
   (2) v128 forcait display:block !important INCONDITIONNEL sur le span -> ecrasait le
   display:none INLINE initial = message visible des l'arrivee en p4 AVANT tout envoi
   (regression vue par Dan). REGLE DURABLE : ne JAMAIS forcer display en feuille sur un
   element dont la visibilite est togglee par un display inline JS ; conditionner sur
   l'etat : le .show() jQuery pose display:inline INLINE -> [style*="inline"] ne matche
   que l'etat VISIBLE... FAUX en pratique : quand l'element etait cache par un display:none
   INLINE, .show() RETIRE simplement la propriete (aucun "inline" pose) -> on matche
   l'ABSENCE de "none" dans le style : etat initial style*="display:none" = cache (regle
   inactive), etat montre = plus de "none" = block. Block requis car le wrap d'un inline
   ignore ses marges laterales. */
span.cast_success p, div.cast_success p { max-width: 100% !important; box-sizing: border-box !important; }
@media (max-width: 899px), (orientation: portrait) {
    span.cast_success, div.cast_success { margin-left: 24px !important; margin-right: 24px !important; }
    span.cast_success:not([style*="none"]) { display: block !important; }
}