/* ═════════════════════════════════════════════════════════════════════════════ UI.CSS — SYSTÈME DE MISE EN PAGE Grille, échelle typographique, boutons, motifs de section (héros, étapes, bande sombre, mosaïque, FAQ, appel final) et emplacements de mascotte. Chargé après theme.css (qui fournit la palette et la police) par les pages refaites à la nouvelle direction artistique : index, reexpedition, boutiques. Les pages non encore refaites ne le chargent pas — c'est ce qui permet de les convertir une par une sans rien casser entre-temps. ═════════════════════════════════════════════════════════════════════════════ */ /* Plus Jakarta Sans — la police système était le premier marqueur « amateur » : elle dit au visiteur qu'aucune décision typographique n'a été prise. Chargée en display=swap pour que le texte reste lisible pendant le téléchargement. */ /* ══════════════════════════════════════════════════════════════════════════ PALETTE DE MARQUE — LE SEUL BLOC À REMPLACER QUAND LE NOUVEAU LOGO ARRIVERA. Neuf couleurs. Tout le reste du site en dérive, y compris le nav et le pied de page injectés par nav.js sur les douze pages : rien n'est écrit en dur ailleurs. Remplacer ces valeurs recolore le site entier, mode sombre inclus. ══════════════════════════════════════════════════════════════════════════ */ /* Variables dérivées. Les noms sont historiques (« white » signifie « surface de premier plan », pas la couleur blanche : il devient sombre en mode nuit). Ils sont conservés tels quels parce que nav.js et les onze autres pages les lisent déjà — les renommer casserait le nav partout. */ /* Mode sombre : on ne repeint que la palette de marque, les dérivées suivent. Le beige devient un gris chaud verdâtre pour garder la même identité tiède. */ *{ box-sizing:border-box; } html{ scroll-behavior:smooth; background:var(--white); } body{ margin:0; background:var(--white); color:var(--ink); min-height:100vh; /* clip et non hidden : sur , overflow-x:hidden force overflow-y à auto et fait du body un conteneur de défilement, ce qui casse les ancres (#faq) et la nav collante. */ -webkit-font-smoothing:antialiased; overflow-x:clip; } a{ color:inherit; text-decoration:none; } /* height:auto est indispensable : les attributs width/height du HTML (utiles pour réserver la place au chargement) fixeraient sinon la hauteur en dur et neutraliseraient nos aspect-ratio. */ img{ max-width:100%; display:block; height:auto; } .wrap{ max-width:1180px; margin:0 auto; padding:0 24px; } .section{ padding:96px 0; } /* Bandes beige pleine largeur : le blanc intégral était le vrai reproche. */ .band-sand{ background:var(--sand); } @media (max-width:760px){ .section{ padding:64px 0; } } /* Échelle typographique — c'est ici que se joue l'essentiel de l'écart. Titre principal jusqu'à 84px avec un interligne serré (0.98) : un grand titre lâche paraît mou, c'est la compacité qui donne l'aplomb. */ h1{ font-size:clamp(36px, 4.9vw, 62px); line-height:1.0; font-weight:800; letter-spacing:-.035em; margin:0 0 22px; } h2{ font-size:clamp(28px, 3.9vw, 46px); line-height:1.06; font-weight:800; letter-spacing:-.028em; margin:0 0 14px; } h3{ font-size:19px; font-weight:700; letter-spacing:-.01em; margin:0; } .lead{ font-size:clamp(16px,1.35vw,19px); line-height:1.6; color:var(--ink-soft); margin:0; max-width:56ch; } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-dark); background:var(--accent-light); padding:8px 16px; border-radius:999px; margin-bottom:22px; } .section-head{ max-width:640px; margin-bottom:52px; } .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; } .btn{ display:inline-flex; align-items:center; gap:9px; background:var(--accent); color:var(--on-accent); border:none; padding:16px 30px; border-radius:999px; font-size:15.5px; font-weight:700; font-family:inherit; cursor:pointer; transition:transform .18s, box-shadow .18s, background .18s; } .btn:hover{ background:var(--accent-dark); transform:translateY(-2px); box-shadow:var(--shadow-sm); } .btn.ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); } .btn.ghost:hover{ background:var(--bg-soft); border-color:var(--ink-faint); } .btn.light{ background:#fff; color:var(--bg-deep); } .btn.light:hover{ background:var(--lime); } /* ---------- HÉROS ---------- */ .hero{ padding:56px 0 92px; background:var(--sand); } .hero-grid{ display:grid; grid-template-columns:1.18fr .82fr; gap:48px; align-items:center; } @media (max-width:940px){ .hero-grid{ grid-template-columns:1fr; gap:40px; } } .hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; } .hero-proof{ display:flex; gap:28px; margin-top:40px; flex-wrap:wrap; } .hero-proof .n{ font-size:26px; font-weight:800; letter-spacing:-.02em; } .hero-proof .l{ font-size:13px; color:var(--ink-soft); margin-top:2px; } /* La photo est traitée comme un objet : grand rayon, ombre portée, et une pastille flottante qui la rattache au propos plutôt que de la laisser décorative. */ .hero-media{ position:relative; } .hero-media img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-xl); box-shadow:var(--shadow); } .hero-badge{ position:absolute; left:-22px; bottom:38px; background:var(--white); border-radius:var(--r-lg); padding:16px 20px; box-shadow:var(--shadow); display:flex; align-items:center; gap:13px; max-width:265px; } @media (max-width:940px){ .hero-badge{ left:12px; } } .hero-badge .dot{ width:38px; height:38px; border-radius:50%; background:var(--accent-light); color:var(--accent-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .hero-badge .t{ font-size:13.5px; font-weight:700; line-height:1.3; } .hero-badge .s{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; } /* ---------- ÉTAPES ---------- */ .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } @media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .steps{ grid-template-columns:1fr; } } .step{ background:var(--bg-soft); border-radius:var(--r-lg); padding:28px; transition:transform .2s; } .step:hover{ transform:translateY(-4px); } .step .n{ width:34px; height:34px; border-radius:11px; background:var(--accent); color:var(--on-accent); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; margin-bottom:18px; } .step h3{ margin-bottom:8px; font-size:17px; } .step p{ font-size:14px; color:var(--ink-soft); line-height:1.55; margin:0; } /* ---------- BANDE SOMBRE ---------- */ .dark-band{ background:var(--bg-deep); color:#fff; border-radius:var(--r-xl); overflow:hidden; } .dark-band .wrap{ padding-top:76px; padding-bottom:76px; } .dark-band h2{ color:#fff; } .dark-band .lead{ color:rgba(255,255,255,.72); } .dark-band .eyebrow{ background:rgba(255,255,255,.1); color:var(--lime); } .band-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; } @media (max-width:940px){ .band-grid{ grid-template-columns:1fr; gap:36px; } } .band-grid img{ width:100%; aspect-ratio:5/4; object-fit:cover; border-radius:var(--r-lg); } .band-list{ display:flex; flex-direction:column; gap:20px; margin-top:32px; } .band-list li{ display:flex; gap:14px; align-items:flex-start; list-style:none; } .band-list .ic{ width:26px; height:26px; border-radius:50%; background:var(--lime); color:var(--bg-deep); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; font-weight:800; } .band-list .tx{ font-size:15px; line-height:1.55; color:rgba(255,255,255,.82); } .band-list .tx strong{ color:#fff; } .band-list ul{ margin:0; padding:0; } /* ---------- ON S'OCCUPE DE TOUT — poster à la Colis Expat ---------- Typographie d'affiche (Archivo Black, chargée par index.html seulement), tampon qui tourne, et trois cartes inégales : suivi (surface claire, avec un pastiche d'interface), regroupement (aplat de marque, code-barres), service client (bande sombre). Tout dérive des jetons de theme.css, donc le mode nuit suit sans règle dédiée. */ .veille-head{ position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:36px; } .veille-titre{ font-family:"Archivo Black","Plus Jakarta Sans",sans-serif; font-weight:400; text-transform:uppercase; font-size:clamp(44px,7vw,92px); line-height:.95; letter-spacing:-.015em; margin:16px 0 18px; } .veille-titre .pt{ color:var(--accent); } .veille-head .lead{ max-width:46ch; } .stamp{ flex-shrink:0; width:150px; height:150px; margin-bottom:6px; } .stamp svg{ width:100%; height:100%; overflow:visible; } /* Seul l'anneau de texte tourne — la patte reste fixe et lisible. transform-box view-box : l'origine 50 % vise le centre du viewBox (60,60), pas celui du texte. */ .stamp-ring{ animation:stamp-spin 26s linear infinite; transform-box:view-box; transform-origin:50% 50%; } /* 10.75px : mesuré pour que le texte boucle exactement sur la circonférence (2π×46 ≈ 289 unités) — plus grand il se chevauche, plus petit il laisse un trou. */ .stamp-txt{ font-size:10.75px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; fill:var(--ink); } @keyframes stamp-spin{ to{ transform:rotate(360deg); } } /* Deux cartes pleine largeur empilées, illustration à gauche et texte à droite. La colonne d'image est en « auto » et non en fraction : quand l'illustration n'existe pas encore, son onerror la retire, la carte prend la classe sans-illu et le texte reprend toute la largeur — jamais de colonne vide. */ .veille-grid{ display:flex; flex-direction:column; gap:18px; } .v-card{ border-radius:var(--r-xl); padding:34px 40px; display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:40px; align-items:center; } .v-card.sans-illu{ grid-template-columns:1fr; } .v-txt{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; } .v-illu{ width:100%; height:auto; display:block; } .v-card h3{ font-family:"Archivo Black","Plus Jakarta Sans",sans-serif; font-weight:400; text-transform:uppercase; font-size:clamp(21px,2.4vw,29px); line-height:1.08; margin:0; } .v-card p{ font-size:15px; line-height:1.6; margin:0; } .v-groupe{ background:var(--accent); color:var(--on-accent); } .v-groupe p{ opacity:.85; } .v-humain{ background:var(--bg-deep); color:#fff; } .v-humain p{ color:rgba(255,255,255,.78); } .v-chip{ display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; padding:7px 14px; border-radius:999px; background:var(--accent-light); color:var(--accent-dark); } .v-chip.lime{ background:rgba(125,235,224,.13); color:var(--lime); } .v-nombre{ font-family:"Archivo Black","Plus Jakarta Sans",sans-serif; font-weight:400; font-size:clamp(58px,7vw,96px); line-height:1; letter-spacing:-.02em; } .v-nombre .fleche{ color:var(--lime); } .v-note{ margin-top:auto; font-size:12.5px; font-weight:700; opacity:.72; } .v-lien{ color:var(--lime); font-weight:800; font-size:15px; text-decoration:none; } .v-lien:hover{ text-decoration:underline; } @media (max-width:940px){ .veille-head{ flex-direction:column; align-items:flex-start; } /* En absolu le tampon couvrait des lettres du titre : sur petit écran il reste dans le flux, calé à droite entre le texte et les cartes. */ .stamp{ align-self:flex-end; width:104px; height:104px; margin:-6px 0 0; } /* L'illustration passe AU-DESSUS du texte, pas à côté : à cette largeur une colonne d'image la réduirait à une vignette illisible. */ .v-card{ grid-template-columns:1fr; gap:26px; padding:30px 26px; } .v-illu{ max-width:340px; margin:0 auto; } } @media (prefers-reduced-motion:reduce){ .stamp-ring{ animation:none; } } /* ---------- MOSAÏQUE ---------- */ .mosaic{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } @media (max-width:900px){ .mosaic{ grid-template-columns:1fr; } } .tile{ position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:340px; display:flex; align-items:flex-end; } .tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s; } .tile:hover img{ transform:scale(1.04); } .tile .veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,14,11,0) 32%, rgba(8,14,11,.88) 100%); } /* Variante illustrée : une image détourée ne peut pas être recadrée en « cover » comme une photo — il lui faut son propre fond et de la place pour respirer. Le dessin quitte donc le positionnement absolu des tuiles photo pour devenir un élément du flux : la colonne le place au-dessus du texte, quelle que soit la hauteur de celui-ci. Une réserve basse en pixels ne tenait pas — à 1000 px de large le texte passe de 122 à 166 px de haut et le dessin le recouvrait. Le voile disparaît : il n'a de sens que sur une photo, pas sur un aplat. */ /* Carte blanche bordée, comme les autres surfaces du site — les canards ont d'abord été posés à même la page, puis remis en carte à la demande du client (« ça fait bizarre comme ça »). Le rognage (overflow hérité de .tile) est redevenu inoffensif : le texte a retrouvé des marges intérieures, alors que posé à x=0 exact il se faisait raser les glyphes qui débordent d'un cheveu à gauche — « ᵊnseignes », « 'es dimensions ». Si ces marges sautent un jour, le rognage recommencera. */ .tile-illu{ background:var(--white); border:1.5px solid var(--line); flex-direction:column; justify-content:flex-end; } .tile-illu img{ position:relative; inset:auto; flex:1 1 auto; min-height:0; width:100%; height:auto; object-fit:contain; box-sizing:border-box; padding:22px 22px 0; } .tile-illu:hover img{ transform:scale(1.06); } .tile-illu .veil{ display:none; } .tile .txt{ position:relative; padding:26px; color:#fff; } .tile .txt h3{ font-size:19px; margin-bottom:6px; } .tile .txt p{ font-size:13.5px; line-height:1.5; margin:0; color:rgba(255,255,255,.8); } /* Posé APRÈS .tile .txt et non à côté de .tile-illu plus haut : les deux sélecteurs ont la même spécificité (0-2-0), c'est donc l'ordre source qui tranche — plus haut, le blanc écrit en dur des tuiles photo reprenait le dessus et le texte restait illisible sur le beige. Le dessin n'a plus de carte sombre sous lui : le texte reprend l'encre de la page, et se cale à gauche sous le dessin. */ /* La marge BASSE n'est pas décorative : .tile est en overflow:hidden, et sans elle la dernière ligne se colle au bord — les jambages du « p » de « pour » et du « q » de « expliquées » se faisaient rogner. flex-shrink:0 pour la même raison : sans lui le texte est un élément flexible que la colonne peut comprimer sous sa hauteur réelle, et le débord est alors coupé sans bruit. */ .tile-illu .txt{ color:var(--ink); padding:14px 20px 20px; flex-shrink:0; } .tile-illu .txt p{ color:var(--ink-soft); } /* Les trois dessins n'ont pas les mêmes proportions (620x627, 500x475, 620x693) : centrés, ils flottaient chacun à sa hauteur. Calés en bas, ils partagent une ligne de sol commune et la rangée se lit d'un seul tenant. */ .tile-illu img{ object-position:center bottom; } /* ---------- TARIF ---------- */ .price-card{ background:var(--accent-lighter); border:1.5px solid var(--accent-light); border-radius:var(--r-xl); padding:44px; display:grid; grid-template-columns:1fr auto; gap:36px; align-items:center; } @media (max-width:820px){ .price-card{ grid-template-columns:1fr; padding:30px; } } .price-rows{ display:flex; flex-direction:column; gap:13px; } .price-row{ display:flex; justify-content:space-between; gap:22px; font-size:15px; padding-bottom:13px; border-bottom:1px solid var(--accent-light); } .price-row:last-child{ border-bottom:none; } .price-row .v{ font-weight:800; white-space:nowrap; } /* Stockage gratuit puis payant : un seul poste en deux lignes. Le trait de séparation saute entre les deux, l'écart se resserre, et la seconde ligne prend un retrait et une taille moindre — elle se lit comme la suite de la première, plus comme un frais de plus. */ .price-row.groupe-debut{ border-bottom:none; padding-bottom:0; } .price-rows .price-row.groupe-suite{ margin-top:-7px; padding-left:16px; font-size:13.5px; color:var(--ink-soft); } .price-row.groupe-suite .v{ font-size:14px; } /* Le seul poste dont le prix est un lien : il doit s'annoncer comme tel, sans pour autant peser plus lourd que les montants voisins. Volontairement NON limité à .price-row : la même ligne existe dans le tableau de l'accueil et dans celui de « Nos frais », et deux règles jumelles finiraient par diverger. Chaque contexte lui donne sa taille par .v ou .val — ici on ne fixe que ce qui en fait un lien. */ .lien-devis{ color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px; } .lien-devis:hover{ text-decoration-thickness:2px; } .price-aside{ text-align:center; } .price-aside .big{ font-size:52px; font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--accent-dark); } .price-aside .cap{ font-size:13px; color:var(--ink-soft); margin-top:8px; max-width:180px; } /* ---------- FAQ ---------- */ .faq-item{ background:var(--bg-soft); border-radius:var(--r-md); padding:4px 24px; margin-bottom:12px; } details summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; font-size:16px; font-weight:700; padding:20px 0; gap:16px; } summary::-webkit-details-marker{ display:none; } /* La croix est DESSINÉE, pas écrite. Le caractère « + » de Plus Jakarta Sans a son encre décentrée d'environ 1 px vers le bas dans sa boîte : flex la centre parfaitement (décalage mesuré 0/0), mais l'œil voit l'encre, pas la boîte — et la rotation de 45° à l'ouverture transformait ce décalage vertical en biais diagonal, bien plus visible. Deux barres en pseudo-éléments sont centrées par la géométrie, indépendamment de la police. Le « + » du balisage reste en place (37 occurrences) mais n'est plus rendu : font-size:0 le masque, et il continue de servir de contenu textuel pour l'accessibilité. */ .plus{ position:relative; width:28px; height:28px; border-radius:50%; background:var(--white); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0; color:var(--accent); transition:transform .2s, background .2s; } .plus::before, .plus::after{ content:''; position:absolute; top:50%; left:50%; width:11px; height:2px; border-radius:1px; background:currentColor; transform:translate(-50%,-50%); } .plus::after{ transform:translate(-50%,-50%) rotate(90deg); } details[open] .plus{ background:var(--accent); color:var(--on-accent); transform:rotate(45deg); } .faq-answer{ font-size:14.5px; color:var(--ink-soft); line-height:1.65; padding-bottom:22px; max-width:70ch; } .flag-badge{ font-size:11px; font-weight:800; color:var(--accent-dark); background:var(--accent-light); padding:3px 9px; border-radius:999px; margin-right:10px; } /* ---------- APPEL FINAL ---------- */ .final{ background:var(--cta); border-radius:var(--r-xl); padding:80px 40px; text-align:center; color:#fff; } .final h2{ color:#fff; margin-bottom:16px; } .final p{ color:rgba(255,255,255,.82); font-size:17px; max-width:52ch; margin:0 auto 32px; line-height:1.6; } /* ---------- EMPLACEMENTS MASCOTTE ---------- Réservés dans le balisage, invisibles tant que les visuels n'existent pas : un emplacement vide ne doit jamais laisser d'espace mort sur le site en ligne. Ajouter ?mascotte=1 à l'URL affiche les repères pointillés avec la pose attendue et la taille exacte — de quoi dessiner la mascotte en connaissant son cadre et son voisinage. Quand un visuel arrive : le déposer dans assets/mascotte/.png — et c'est tout. mascotte.js nomme le fichier d'après le data-canard de l'emplacement, le charge pour vérifier qu'il existe, puis pose --img et la classe « pret ». Une pose pas encore dessinée reste donc invisible. */ .mascotte{ display:none; width:var(--mw,150px); aspect-ratio:1; flex-shrink:0; background:var(--img,none) center/contain no-repeat; } .mascotte.pret{ display:block; } html.apercu-mascotte .mascotte{ display:flex; align-items:center; justify-content:center; text-align:center; border:2px dashed var(--accent); border-radius:var(--r-md); background:var(--brand-wash); color:var(--accent-dark); font-size:10.5px; font-weight:800; letter-spacing:.03em; line-height:1.35; padding:8px; } html.apercu-mascotte .mascotte::after{ content:attr(data-pose); } .mascotte-hero{ position:absolute; right:-14px; bottom:-26px; } @media (max-width:940px){ .mascotte-hero{ right:4px; bottom:-18px; } } /* En-tête de section avec la mascotte à droite : le titre garde sa largeur de lecture, la mascotte occupe le vide plutôt que d'écraser le texte. */ .head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; } .head-row .section-head{ margin-bottom:0; } @media (max-width:760px){ .head-row .mascotte{ display:none; } } .final .mascotte{ margin:0 auto 20px; } /* Apparition au défilement — désactivée si l'utilisateur préfère moins d'animation. */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.22,.7,.3,1), transform .7s cubic-bezier(.22,.7,.3,1); } .reveal.in-view{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } } /* ═════════════════════════════════════════════════════════════════════════════ MOTIFS AJOUTÉS POUR « COMMENT ÇA MARCHE » ET « OÙ ACHETER » ═════════════════════════════════════════════════════════════════════════════ */ /* Étapes en alternance verticale texte / visuel. Une étape par rangée, le visuel changeant de côté à chaque fois : c'est ce qui donne le rythme de lecture d'une vraie explication, là où quatre cartes côte à côte se survolent sans se lire. */ .flow{ display:flex; flex-direction:column; gap:96px; } @media (max-width:760px){ .flow{ gap:56px; } } .flow-row{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; } .flow-row:nth-child(even) .flow-visual{ order:-1; } @media (max-width:860px){ .flow-row{ grid-template-columns:1fr; gap:28px; } .flow-row:nth-child(even) .flow-visual{ order:0; } } .flow-step{ display:inline-flex; align-items:center; gap:10px; margin-bottom:18px; } .flow-step .n{ width:38px; height:38px; border-radius:12px; background:var(--accent); color:var(--on-accent); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; } .flow-step .lbl{ font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); } .flow-row h2{ font-size:clamp(24px,2.9vw,34px); } .flow-row .lead{ font-size:16.5px; } .flow-visual img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-xl); box-shadow:var(--shadow); } /* Variante illustrée. Une photo se recadre en « cover » dans un cadre arrondi et ombré ; une illustration détourée n'a pas de fond à cadrer — l'ombre porterait sur du vide et l'arrondi couperait le dessin. Elle garde donc sa proportion propre et se pose à même la page. */ .flow-visual.illu img{ aspect-ratio:auto; object-fit:contain; border-radius:0; box-shadow:none; } .flow-note{ display:flex; gap:11px; align-items:flex-start; margin-top:22px; padding:14px 17px; background:var(--brand-wash); border:1.5px solid var(--accent-light); border-radius:var(--r-md); font-size:13.5px; line-height:1.5; color:var(--ink-soft); } .flow-note b{ color:var(--accent-dark); } /* Carte d'adresse : à l'étape 1, montrer l'adresse que le client va recevoir vaut mieux qu'une photo d'illustration — c'est l'objet même du service. */ .addr-card{ background:var(--white); border-radius:var(--r-xl); box-shadow:var(--shadow); padding:32px 34px; border:1.5px solid var(--line); position:relative; } .addr-card .tag{ position:absolute; top:-13px; left:28px; background:var(--accent); color:var(--on-accent); font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; padding:6px 14px; border-radius:999px; } .addr-card dl{ margin:6px 0 0; display:grid; gap:11px; } .addr-card .ln{ font-size:16.5px; font-weight:700; letter-spacing:-.01em; } .addr-card .ln.code{ color:var(--accent-dark); } .addr-card .mini{ font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:2px; } .addr-card .foot{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-soft); line-height:1.5; } /* Grille des restrictions — pastilles à icône, à la Colis Expat (leur page Restrictions est la référence donnée par le client). Elle remplace quatre cartes à puces : une interdiction se reconnaît d'un coup d'œil, elle ne se lit pas. Les icônes (Tabler, MIT) sont incrustées en SVG et héritent leur couleur du contexte — le thème sombre suit sans règle dédiée. */ .interdits{ display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:22px 12px; } .interdits-titre{ font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin:30px 0 16px; } .interdits-titre:first-of-type{ margin-top:4px; } .interdit{ display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; } .interdit .pastille{ width:66px; height:66px; border-radius:22px; background:var(--white); border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--accent-dark); } .interdit .pastille svg{ width:30px; height:30px; } .interdit .lbl{ font-size:11.5px; font-weight:700; line-height:1.3; color:var(--ink); max-width:14ch; } /* Le groupe « sous conditions » vire à l'ambre : ces articles-là ne sont pas refusés, ils dépendent de la destination — la couleur porte la nuance que les deux titres énoncent. */ .interdits.conditions .pastille{ color:var(--amber); border-color:color-mix(in srgb, var(--amber) 30%, var(--line)); } .refuse-note{ margin-top:20px; padding:17px 20px; background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-md); font-size:13.5px; line-height:1.6; color:var(--ink-soft); } .refuse-note strong{ color:var(--ink); } /* ---------- ANNUAIRE DE BOUTIQUES ---------- */ .shop-tools{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:26px; } .shop-search{ flex:1; min-width:240px; display:flex; align-items:center; gap:10px; background:var(--white); border:1.5px solid var(--line); border-radius:999px; padding:13px 20px; transition:border-color .15s; } .shop-search:focus-within{ border-color:var(--accent); } .shop-search input{ flex:1; border:none; background:none; outline:none; font-family:inherit; font-size:15px; color:var(--ink); } .shop-search input::placeholder{ color:var(--ink-soft); } .shop-count{ font-size:13px; color:var(--ink-soft); white-space:nowrap; } .shop-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(232px,1fr)); gap:14px; } .shop-wrap{ position:relative; } .shop{ display:flex; align-items:center; gap:13px; background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-md); padding:15px 44px 15px 16px; height:100%; transition:transform .15s, box-shadow .15s, border-color .15s; } .shop:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); border-color:var(--accent-light); } .band-sand .shop{ background:var(--white); } .shop .logo{ width:38px; height:38px; border-radius:10px; flex-shrink:0; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; overflow:hidden; } .shop .logo img{ max-width:26px; max-height:26px; width:auto; height:auto; object-fit:contain; } /* Repli quand aucun favicon n'a pu être récupéré : l'initiale sur fond de marque vaut mieux qu'une case vide ou qu'une image cassée. */ .shop .logo.mono{ background:var(--accent-light); color:var(--accent-dark); font-weight:800; font-size:16px; } .shop .nm{ font-size:14.5px; font-weight:700; letter-spacing:-.01em; display:block; } .shop .ds{ font-size:12px; color:var(--ink-soft); line-height:1.4; display:block; margin-top:2px; } .fav{ position:absolute; top:9px; right:9px; width:29px; height:29px; border-radius:50%; border:none; background:transparent; color:var(--ink-soft); cursor:pointer; font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center; transition:color .15s, background .15s, transform .15s; } .fav:hover{ background:var(--accent-light); color:var(--accent-dark); transform:scale(1.12); } .fav[aria-pressed="true"]{ color:#E8A33D; } .fav[aria-pressed="true"]:hover{ background:rgba(232,163,61,.14); color:#D2891F; } .cat-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:8px; } .cat-head h2{ font-size:clamp(22px,2.4vw,30px); margin:0; } .cat-note{ font-size:13px; color:var(--ink-soft); } .cat-block{ margin-bottom:56px; } .cat-block .lead{ font-size:15px; margin-bottom:20px; } .fav-empty{ background:var(--white); border:1.5px dashed var(--line); border-radius:var(--r-lg); padding:34px; text-align:center; color:var(--ink-soft); font-size:14.5px; line-height:1.6; } .no-result{ padding:34px; text-align:center; color:var(--ink-soft); font-size:15px; } /* ---------- GRILLES TARIFAIRES (frais.html) ---------- */ .tier-card{ background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-xl); padding:34px 36px; } @media (max-width:600px){ .tier-card{ padding:24px 22px; } } .tier-card > h3{ font-size:20px; margin-bottom:6px; } .tier-card > .lead{ font-size:15px; margin-bottom:22px; } .tier{ display:grid; grid-template-columns:1fr auto; gap:8px 26px; align-items:baseline; padding:17px 0; border-bottom:1px solid var(--line); } .tier:last-child{ border-bottom:none; padding-bottom:0; } .tier .lbl{ font-size:15.5px; font-weight:700; letter-spacing:-.01em; } .tier .desc{ grid-column:1; font-size:13px; color:var(--ink-soft); line-height:1.5; margin-top:3px; } /* text-align:right obligatoire : la colonne prend la largeur du plus large de ses deux occupants, et quand la légende (« par élément supplémentaire ») dépasse le chiffre, le prix flottait à gauche de sa colonne — les montants ne tombaient plus les uns sous les autres au bord droit de la carte. */ .tier .val{ grid-row:1; grid-column:2; font-size:17px; font-weight:800; white-space:nowrap; letter-spacing:-.02em; text-align:right; } .tier .val.free{ color:var(--accent-dark); } /* Points d'une prestation : ce que le client obtient concrètement, listé sous la ligne de tarif plutôt que noyé dans le paragraphe explicatif. */ .tier-points{ grid-column:1 / -1; margin:8px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px; } .tier-points li{ display:flex; gap:9px; align-items:flex-start; font-size:13.5px; line-height:1.5; color:var(--ink); } .tier-points li::before{ content:"✓"; color:var(--accent-dark); font-weight:800; flex-shrink:0; } .tier .val-sub{ grid-column:2; font-size:11.5px; color:var(--ink-soft); text-align:right; white-space:nowrap; } @media (max-width:520px){ .tier{ grid-template-columns:1fr; } .tier .val, .tier .val-sub{ grid-column:1; grid-row:auto; text-align:left; } } /* Bandeau de mise en avant : le zéro commission est l'argument principal, il mérite d'être lu avant la grille détaillée plutôt que noyé dedans. */ .zero-card{ /* Entièrement SOUS la frontière héros/section, avec une marge franche : son bord haut tombait à quelques pixels de la ligne selon la largeur d'écran, et le chevauchement assumé essayé ensuite n'a pas plu. L'air est porté par la carte elle-même, pas par le padding de section (qui est à 0 sur cette page). */ margin-top:56px; display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center; background:var(--brand-wash); border:1.5px solid var(--accent-light); border-radius:var(--r-xl); padding:34px 38px; } @media (max-width:700px){ .zero-card{ grid-template-columns:1fr; gap:16px; padding:26px 24px; } } .zero-card .big{ font-size:64px; font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--accent-dark); } .zero-card h3{ font-size:19px; margin-bottom:7px; } .zero-card p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-soft); } /* ---------- LISTE DE GARANTIES ---------- */ .checklist{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } @media (max-width:820px){ .checklist{ grid-template-columns:1fr; } } .check-item{ display:flex; gap:13px; align-items:flex-start; background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-lg); padding:22px 24px; } .check-item .ic{ width:26px; height:26px; border-radius:50%; background:var(--accent-light); color:var(--accent-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; font-weight:800; } .check-item .t{ font-size:15px; font-weight:700; letter-spacing:-.01em; } .check-item .d{ font-size:13px; color:var(--ink-soft); line-height:1.5; margin-top:3px; } /* ---------- CONTACT ---------- */ .contact-card{ background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-xl); padding:44px; text-align:center; max-width:620px; margin:0 auto; } @media (max-width:600px){ .contact-card{ padding:30px 22px; } } .contact-card .mini{ font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); } .contact-mail{ display:inline-block; margin-top:12px; font-size:clamp(19px,2.4vw,27px); font-weight:800; letter-spacing:-.025em; color:var(--accent-dark); word-break:break-all; } .contact-mail:hover{ text-decoration:underline; } .contact-card .note{ margin:18px 0 0; font-size:13.5px; color:var(--ink-soft); line-height:1.6; } .quick-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } @media (max-width:820px){ .quick-grid{ grid-template-columns:1fr; } } .quick-card{ display:block; background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-lg); padding:26px; transition:transform .15s, box-shadow .15s, border-color .15s; } .quick-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:var(--accent-light); } .quick-card .em{ font-size:26px; display:block; margin-bottom:13px; } .quick-card h3{ font-size:16.5px; margin-bottom:6px; } .quick-card p{ margin:0 0 14px; font-size:13.5px; color:var(--ink-soft); line-height:1.55; } .quick-card .go{ font-size:13.5px; font-weight:700; color:var(--accent-dark); } /* ---------- DESTINATIONS ---------- */ /* Les pastilles d'outre-mer : un client de Nouméa ou de Fort-de-France cherche son territoire nommément, pas une promesse de « livraison mondiale ». Le voir écrit est ce qui lève le doute. */ .dest-chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; } .dest-chip{ display:inline-flex; align-items:center; gap:7px; background:var(--white); border:1.5px solid var(--line); border-radius:999px; padding:9px 16px; font-size:13.5px; font-weight:600; letter-spacing:-.01em; } .dest-chip .fl{ font-size:15px; line-height:1; } .dest-split{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch; } @media (max-width:860px){ .dest-split{ grid-template-columns:1fr; gap:18px; } } /* Les deux colonnes flottaient sur le beige, sans rien pour les délimiter : deux titres et deux paquets de pastilles qui se lisaient comme un seul bloc. Elles reprennent le cadre blanc bordé déjà employé sur la même page — même langage visuel, plutôt qu'un troisième style de surface. L'écart passe de 44 à 22 px : les cartes portent désormais leur propre respiration intérieure. */ .dest-card{ background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-lg); padding:28px; } .dest-card h3{ font-size:17px; letter-spacing:-.01em; }