/* ============================================================ SAMEY — maquette.css Les styles de la maquette Claude Design du 19/08/2026, extraits tels quels des sept pages (bloc de base commun + les trois formats de l'Accueil), plus le peu qu'il a fallu écrire pour remplacer les composants React de Claude Design : menu mobile, filtres et visionneuse de la Galerie. Chargé UNIQUEMENT sur les pages portées (voir samey_enfant_maquette dans functions.php), à la place de style.css qui porte l'ancien design du 15/08. ============================================================ */ /* ---- 1. Base commune aux sept pages ---- */ html,body{margin:0;padding:0;background:#FFF8EE} body{font-family:'Poppins','Helvetica Neue',sans-serif;color:#16130F;-webkit-font-smoothing:antialiased;font-size:17px;line-height:1.65;letter-spacing:-.005em} *{box-sizing:border-box} h1,h2,h3{font-family:'Poppins','Helvetica Neue',sans-serif;font-weight:700;margin:0;letter-spacing:-.03em;text-wrap:pretty} a{color:#16130F;text-decoration:none} a:hover{color:#16130F} /* ---- 2. Les trois formats (bloc de l'Accueil, s'applique à toutes les pages) ---- */ /* Seule exception aux styles en ligne : les trois formats 1440 / 1024 / 390. */ @media (max-width:1024.5px){ [data-svc-row]{grid-template-columns:1fr!important;gap:22px!important} [data-svc-row] [data-svc-photo],[data-svc-row] [data-svc-text]{grid-column:1/-1!important;grid-row:auto!important} [data-pad]{padding-left:36px!important;padding-right:36px!important} [data-steps-wrap]{flex-direction:column!important;gap:32px!important} [data-steps-wrap] > *{flex:0 0 auto!important;width:100%!important} [data-steps-wrap] > *:nth-child(2){display:none!important} [data-footer-cols]{grid-template-columns:1fr 1fr!important} [data-photog]{grid-template-columns:repeat(6,1fr)!important;align-items:start!important} [data-photog] > *:nth-child(1){grid-column:span 3!important} [data-photog] > *:nth-child(2){grid-column:span 6!important;order:3} [data-photog] > *:nth-child(3){grid-column:span 3!important} [data-mosaic]{grid-template-columns:repeat(6,1fr)!important} [data-mosaic] > *{grid-column:span 3!important;grid-row:span 2!important} [data-mosaic] > *:nth-child(1){grid-column:span 6!important;grid-row:span 3!important} [data-nav-links]{display:none!important} /* le lien de la maquette pointait vers `Contact.dc.html` ; sur le site c'est le permalien */ [data-nav-bar] a[href="/contact/"],[data-nav-bar] a[href="Contact.dc.html"]{display:none!important} [data-nav-bar]{padding:9px 9px 9px 16px!important;gap:14px!important} [data-burger]{display:flex!important} [data-panel-inner]{flex-direction:column!important;gap:24px!important} [data-panel-inner] > *{flex:0 1 auto!important;width:100%!important} [data-curtain]{aspect-ratio:16/9!important;max-height:34vh!important} [data-panel] h2{font-size:clamp(28px,4vw,44px)!important} [data-panel] p{font-size:16px!important} } @media (max-width:767.5px){ [data-pad]{padding-left:20px!important;padding-right:20px!important} h1,h2{max-width:100%!important;width:100%!important;min-width:0!important;overflow-wrap:break-word} .m-line{max-width:100%} [data-hero-copy]{padding:96px 20px 24px!important} [data-hero-copy] h1{font-size:28px!important;line-height:1.06!important} h2{font-size:24px!important;line-height:1.12!important} h3{font-size:17px!important;line-height:1.2!important} p{font-size:15px!important;line-height:1.55!important} [data-hero-copy] p,[data-hero-copy] span{max-width:100%!important} [data-scene="hero"] .m-stage{overflow:hidden!important} [data-arc-band]{overflow:hidden!important} .m-reveal,.m-cascade,section,footer,article{min-width:0!important} [data-footer-cols]{grid-template-columns:1fr!important} [data-photog]{grid-template-columns:1fr!important} [data-photog] > *:nth-child(n){grid-column:span 1!important;grid-row:auto!important;order:0} [data-photog] > *:nth-child(3){display:none!important} [data-mosaic]{grid-template-columns:1fr!important;grid-auto-rows:clamp(180px,52vw,300px)!important} [data-mosaic] > *:nth-child(n){grid-column:span 1!important;grid-row:span 1!important} [data-scene="columns"] .m-stage{flex-wrap:wrap!important;align-items:flex-start!important;gap:16px!important;padding:0 20px 56px!important} [data-scene="columns"] .m-stage > div:first-child{position:static!important;flex:1 1 100%!important;padding:56px 0 20px!important;background:none!important;align-items:flex-start!important;text-align:left!important} [data-scene="columns"] .m-stage > div:first-child h2,.m-reveal h2,[data-words],[data-footer] h2{font-size:26px!important} [data-scene="columns"] .m-stage{flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:14px!important;padding:0 20px 56px!important} [data-scene="columns"] [data-col]{width:100%!important;flex:0 0 auto!important;gap:14px!important} [data-scene="columns"] .m-stage > [data-col]:nth-child(3),[data-scene="columns"] .m-stage > [data-col]:nth-child(5){display:none!important} [data-stack-mobile]{padding-top:64px!important;padding-bottom:64px!important} [data-strip-rows]{overflow-x:hidden!important} [data-scene="strip"]:not(.is-scrubbed) [data-strip-copy] ~ [data-strip-copy]{display:none!important} [data-strip-rows] > *{width:max-content!important} } /* ---- 3. Menu mobile (remplace le composant React `sc-if navOpen`) ---- Le `display` du panneau vit ICI et pas en ligne : posé en ligne, il battait l'attribut `hidden` et le menu s'ouvrait par-dessus la page partout où cette feuille n'est pas chargée — dans l'éditeur Elementor, on ne voyait plus que lui (19/08). */ /* Fermé par défaut, ouvert par la classe : après conversion en conteneur Elementor, l'attribut `hidden` du panneau n'existe plus (Elementor ne rend que id et classes). */ #samey-menu-mobile{display:none} #samey-menu-mobile.is-ouvert{display:flex} #samey-menu-mobile[hidden]{display:none} #samey-menu-mobile a{color:#FFF8EE} /* 31/08 : le bouton du menu garde son encre sur fond blanc (la règle #id ci-dessus le rendait blanc sur blanc) */ #samey-menu-mobile a.elementor-button{color:#16130F} /* ---- Menu ouvert, redessiné le 31/08 (décision de Ronaldo) ---- Téléphone : liste resserrée sous la barre, bouton contact calé en bas (plus de bloc flottant au milieu d'un écran vide). Tablette : une carte sous la barre, à droite, sur fond flou — plus de plein écran. Deux variantes du même menu : l'Accueil (liens dans des widgets Elementor) et les autres pages (HTML brut de la maquette, styles EN LIGNE sur chaque , dont un bouton blanc au texte… blanc). Un style en ligne ne cède qu'à !important. */ #samey-menu-mobile.is-ouvert{display:flex!important;flex-direction:column!important;justify-content:flex-start!important;gap:0!important;padding:104px 28px 28px!important} #samey-menu-mobile.is-ouvert > .elementor-widget{margin:0;width:100%} #samey-menu-mobile.is-ouvert a:not(.elementor-button):not([style*="background"]){display:block!important;font-size:clamp(24px,6.4vw,30px)!important;line-height:1.15!important;padding:9px 0!important;margin:0!important;border-bottom:1px solid rgba(255,248,238,.1)} #samey-menu-mobile.is-ouvert > .elementor-widget:has(.elementor-button){margin-top:auto!important;padding-top:24px!important} #samey-menu-mobile.is-ouvert a.elementor-button, #samey-menu-mobile.is-ouvert > a[style*="background"]{display:block!important;width:100%!important;align-self:stretch!important;text-align:center!important;padding:15px 24px!important;border-radius:10px!important;font-size:16px!important;color:#16130F!important} #samey-menu-mobile.is-ouvert > a[style*="background"]{margin-top:auto!important} @media (min-width:768px) and (max-width:1024px){ #samey-menu-mobile.is-ouvert{inset:84px 24px auto auto!important;width:min(420px,calc(100% - 48px))!important;height:auto!important;max-height:calc(100vh - 108px)!important;overflow:auto!important;padding:24px 28px 24px!important;border-radius:18px!important;background:rgba(22,19,15,.94)!important;backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);border:1px solid rgba(255,248,238,.22);box-shadow:0 24px 60px rgba(22,19,15,.35)} #samey-menu-mobile.is-ouvert a:not(.elementor-button):not([style*="background"]){font-size:22px!important;padding:10px 0!important} #samey-menu-mobile.is-ouvert > .elementor-widget:has(.elementor-button){margin-top:16px!important;padding-top:0!important} #samey-menu-mobile.is-ouvert > a[style*="background"]{margin-top:16px!important} /* le reste de la page reste visible, assombri ; un clic dessus referme (maquette.js) */ body.samey-menu-ouvert::before{content:'';position:fixed;inset:0;z-index:58;background:rgba(22,19,15,.38)} } body.samey-menu-ouvert{overflow:hidden} /* ---- 4. Galerie : filtres, tuiles, visionneuse (remplacent les gabarits React) ---- 31/08 (verdict débat, lot 1 / S-12) : le survol -2px des 56 .samey-gal-tuile de /galerie/ violait la décision client « aucun effet sur les photos » — supprimé avec sa transition. */ .samey-gal-tuile[hidden]{display:none!important} [data-filtre]{cursor:pointer;transition:background 180ms,color 180ms} [data-filtre][aria-pressed="true"]{background:#16130F!important;color:#FFF8EE!important; border-color:#16130F!important} /* 31/08 (verdict débat, lot 1) : bloc #samey-visionneuse purgé — 0 porteur DOM sur les 8 pages, 0 référence JS (la visionneuse réelle est #samey-vue, galerie.css) ; son button:hover était un survol sans porteur. */ /* ---- 5. Elementor : le conteneur ne doit rien ajouter au markup de la maquette ---- */ .samey-maquette-bloc,.samey-maquette-bloc > .e-con-inner{padding:0!important;margin:0!important; max-width:none!important;width:100%!important} .samey-maquette-bloc .elementor-widget-html, .samey-maquette-bloc .elementor-widget-container{width:100%} /* ---- 6. Ce qu'Astra ajoute et que la maquette n'a pas demandé ---- Le bouton « retour en haut » d'Astra sort en bleu par-dessus la maquette (vu à l'écran le 19/08 sur la Galerie). La maquette n'a pas de bouton de ce genre. */ .ast-scroll-top,#ast-scroll-top{display:none!important} /* ---- 7. Mobile : deux colonnes plutôt qu'un mur (décision 13 du 19/08) ---- La grille de la Galerie tombait à une colonne sous 768 : 15 tuiles de 438 px, soit 6 500 px de défilement pour voir quinze photos. Deux colonnes coupent le mur en deux et gardent la légende lisible. Même geste sur la mosaïque « Un aperçu, sans ordre ». */ @media (max-width:767.5px){ [data-gal-grid]{grid-template-columns:1fr 1fr!important;gap:10px!important} [data-gal-grid] [data-gal-cap]{padding:10px!important;font-size:11px!important} [data-mosaic]{grid-template-columns:1fr 1fr!important; grid-auto-rows:clamp(120px,34vw,200px)!important;gap:10px!important} } /* ---- 8. Les sections NON ANIMÉES se bornent sur grand écran (Ronaldo, 19/08) ---- « if a section isnt animated reduce its width ». La maquette est dessinée pour 1440, soit 1344 px de contenu utile entre ses marges de 48. À 1920, ces mêmes sections étalaient leur texte sur 1824 px : des lignes trop longues et des grilles distendues. Ce qui se borne : le CONTENU (`[data-pad]`, le conteneur de contenu de la maquette), pas la section. Les aplats encre, crème et corail vont toujours bord à bord : c'est ce qui donne au site sa suite de blocs pleine largeur. Ce qui ne se borne PAS : les blocs `.m-bloc-anime`, c'est-à-dire les cinq scènes scrubbées. Elles ont besoin du plein cadre — la bande traverse l'écran, les colonnes montent sur toute la largeur, l'arc du héros s'écarte vers les bords. `max()` : en dessous de 1440 px de fenêtre, la marge reste celle de la maquette (48), la règle ne fait donc rien sur les formats déjà dessinés. */ @media (min-width:1025px){ .m-bloc-statique [data-pad]{ padding-left:max(48px,calc((100% - 1344px) / 2))!important; padding-right:max(48px,calc((100% - 1344px) / 2))!important; } } /* ---- 9. Les titres des scènes se bornent aussi (Ronaldo, 19/08) ---- Les scènes gardent le plein cadre pour leurs photographies, mais leur TITRE, lui, n'a pas à traverser 1 900 px : à 1920, le h1 du héros faisait 1 809 px de long et « lieu » restait seul sur sa troisième ligne. Mesuré avant : héros 1 809, colonnes 1 809 ; les trois autres titres de scène (bande 1 330, mots 1 240, déroulé 456) étaient déjà bornés par la maquette, on n'y touche pas. Ciblage par scène plutôt que sur `.m-bloc-anime h1,h2` : ces deux titres-là sont les seuls centrés, et `margin-inline:auto` aurait recentré les trois autres, qui sont alignés à gauche par le dessin. */ @media (min-width:1025px){ [data-scene="hero"] h1, [data-scene="columns"] h2{ max-width:min(100%,1344px)!important; margin-inline:auto!important; } /* Le corps suit la largeur, sinon le titre déborde de son propre cadre : en Poppins 800, « Photographier » mesure 10,92 fois la taille de police, soit 1 441 px à 132 — plus large que les 1 344 du cadre. Ronaldo a demandé plus petit encore (« reduit la taille ») : 96 px au héros, 88 aux colonnes, contre 132 et 110 dans la maquette. Le mot le plus long tombe à 1 048 px, le titre respire et tient en trois lignes. */ [data-scene="hero"] h1{font-size:clamp(38px,5.6vw,96px)!important} [data-scene="columns"] h2{font-size:clamp(32px,5.1vw,88px)!important} } /* ---- 10. Responsive complété (Ronaldo, 19/08 : « toutes les pages sont pas responsive ») ---- La maquette n'a écrit un vrai jeu de règles que pour l'Accueil ; les six autres pages s'appuient sur `responsive.css`, dont les paliers sont rigides et laissent des ORPHELINES : à 768, les trois cartes des pages métier passaient en deux colonnes (la troisième seule sur sa ligne), et le pied à quatre entrées faisait de même. Une grille se règle bien quand son nombre de colonnes DIVISE son nombre d'éléments. `auto-fit` seul ne le sait pas ; `:has(> :nth-child(4))` le sait, et distingue les deux cas réels du site : trois cartes (pages métier) et quatre (À propos, pied). */ @media (max-width:1024.5px){ /* trois cartes : trois colonnes tant qu'elles tiennent (200 px + gouttière de 24), puis l'auto-fit passe à deux vers 640 et à une vers 460, sans palier à écrire. */ [data-cards]{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))!important} [data-cards] > *{grid-column:auto!important} /* quatre cartes : deux colonnes, jamais trois — sinon la quatrième reste seule. */ [data-cards]:has(> :nth-child(4)){grid-template-columns:repeat(2,1fr)!important} [data-footer-cols]{grid-template-columns:repeat(2,1fr)!important;gap:28px 24px!important} } @media (max-width:519.5px){ [data-cards],[data-cards]:has(> :nth-child(4)), [data-footer-cols]{grid-template-columns:1fr!important} } /* ---- 11. Rendu dans l'éditeur Elementor ---- L'éditeur ne charge ni `motion.css` ni `scenes.css` (blocs à `opacity:0` et sections épinglées de 280vh n'y ont pas de sens). Or c'est là que vivait `display:flex` sur les scènes : sans lui, leurs colonnes s'empilaient sur toute la largeur et une scène tenait dix écrans. Cette seule déclaration, sans position ni hauteur, suffit à les remettre côte à côte ; sur le front elle ne change rien, `motion.css` décide après. */ .m-stage{display:flex}