/* ============================================================
T DIGITAL AGENCY — Correctifs mobile (mobile.css)
============================================================
Chargé EN DERNIER sur chaque page, après les styles de la page
et après brand.css. Il ne redessine rien : il répare ce qui
casse sur les petits écrans.
Contenu :
1. En-tête d'accueil : rendre le menu atteignable
2. Débordements horizontaux
3. Zones tactiles : 44 px minimum
4. En-tête de commande.html : logo et bouton qui se touchent
Pour annuler tous ces correctifs d'un coup : retirer la ligne
des pages.
============================================================ */
/* ============================================================
1. EN-TÊTE D'ACCUEIL : LE MENU DOIT ÊTRE ATTEIGNABLE
------------------------------------------------------------
Le bouton « Lancer mon projet » poussait le hamburger hors de
l'écran : sur téléphone, la navigation était inaccessible.
Sous 640 px le bouton quitte la barre — il reste présent dans
le hero et il est repris en bas du menu déroulant.
============================================================ */
@media (max-width: 640px) {
header#mainHeader {
padding: 10px 16px;
height: 72px;
gap: 10px;
}
/* Logo compact sur toutes les pages : c'est ce qui libère la
place pour le bouton menu et pour « Accueil ». */
header .logo-container {
min-height: 44px;
}
header .logo-img {
width: 40px !important;
height: 40px !important;
}
header .logo-brand {
font-size: 13.5px !important;
letter-spacing: 0.2px;
}
header#mainHeader nav {
margin-left: auto;
gap: 0;
}
header#mainHeader .btn-container {
display: none;
}
header#mainHeader .menu-toggle {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
/* Le CTA reprend sa place à l'intérieur du menu déroulant */
#navLinks .nav-cta {
display: flex !important;
}
}
/* Le bouton menu ne doit dépendre d'aucun CDN : c'est la seule
façon d'atteindre la navigation sur téléphone. Si Font Awesome
met du temps à charger ou n'arrive pas, l'icône reste vide
et le bouton devient invisible. On dessine donc le symbole en
CSS et on masque l'icône. */
.menu-toggle i {
display: none !important;
}
.menu-toggle::before {
content: "\2630"; /* ☰ */
font-size: 1.6rem;
line-height: 1;
color: #ffffff;
}
.menu-toggle[aria-expanded="true"]::before {
content: "\2715"; /* ✕ */
font-size: 1.4rem;
}
/* Le CTA du menu n'existe que sur mobile */
#navLinks .nav-cta {
display: none;
align-items: center;
justify-content: center;
margin-top: 10px;
padding: 14px 16px !important;
border-radius: 12px;
background: linear-gradient(135deg, #f97316 0%, #ffa733 100%);
color: #fff !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 0.85rem;
}
/* ============================================================
2. DÉBORDEMENTS HORIZONTAUX
============================================================ */
/* --- 2a. Accueil : section « Notre Histoire » -----------------
Deux colonnes de 320 px minimum côte à côte sans autorisation
de passer à la ligne : 331 px de contenu sortaient de l'écran.
Les styles d'origine sont en attribut style=, d'où !important.
-------------------------------------------------------------- */
@media (max-width: 900px) {
#notre-histoire .history-flex {
flex-wrap: wrap !important;
gap: 36px !important;
}
#notre-histoire .history-flex > div {
min-width: min(320px, 100%) !important;
flex: 1 1 320px !important;
}
/* Le badge « 2026 » débordait à droite de sa colonne */
#notre-histoire .history-flex .glass-panel {
right: 0 !important;
bottom: -14px !important;
}
}
/* --- 2b. Portfolio : l'éventail de cartes ----------------------
Les cartes p1 à p3 sont décalées en pourcentage ; sur un
téléphone le décalage sortait de l'écran. On resserre
l'éventail, on ne touche ni aux couleurs ni aux tailles.
-------------------------------------------------------------- */
@media (max-width: 700px) {
.deck-card.p1 { transform: translateX(5%) rotate(3deg) scale(.94); }
.deck-card.p2 { transform: translateX(9%) rotate(6deg) scale(.88); }
.deck-card.p3 { transform: translateX(12%) rotate(8deg) scale(.84); }
}
/* --- 2c. Formes décoratives orange qui dépassent à droite -------
.hero-shape sur les pages Packs, .blob-back sur historique.html
-------------------------------------------------------------- */
@media (max-width: 1180px) {
/* La forme déborde volontairement du hero sur grand écran. En
dessous de 1180 px elle dépasse du cadre de la fenêtre et fait
apparaître une barre de défilement horizontale de 5 px — mesuré
sur les pages packs entre 1025 et 1175 px. On la rogne au bord
du hero ; au-dessus de 1180 px le débordement reste visible,
comme voulu. */
.hero {
overflow: hidden;
}
}
@media (max-width: 700px) {
.hero-shape {
right: 0 !important;
width: 72% !important;
}
.blob-back {
right: 0 !important;
width: 76% !important;
}
}
/* --- 2e. Titres longs sur écran étroit -------------------------
« Stratégie Financière » et consorts sont affichés en très gros
(clamp jusqu'à 4rem) : sous 560 px un seul mot pouvait mesurer
plus large que l'écran.
-------------------------------------------------------------- */
@media (max-width: 560px) {
h1, h2, h3,
.slide-content h1,
.slide-content h2,
.section-title h2 {
overflow-wrap: break-word;
word-break: break-word;
}
}
/* --- 2d. Petits écrans (≤ 560 px) : grilles en une colonne -----
Les grilles sont bâties sur repeat(auto-fit, minmax(300 à 340px,
1fr)) et les héros sur deux colonnes minimum. Sous 560 px, ce
plancher dépasse la largeur disponible : les cartes sortaient de
l'écran de 15 à 72 px selon les pages. On force une colonne et
on libère les largeurs minimales.
-------------------------------------------------------------- */
@media (max-width: 560px) {
.grid-services,
.pack-container,
.features-grid,
.hero,
.deck-layout {
grid-template-columns: 1fr !important;
}
.card-service,
.pack-card,
.feature-card,
.hero-content,
.hero-visual,
.grid-services > *,
.pack-container > *,
.features-grid > * {
min-width: 0 !important;
max-width: 100% !important;
}
/* La carte « Meilleur Choix » est agrandie de 5 % : sur un petit
écran, cet agrandissement la fait dépasser. */
.pack-card.popular {
transform: none !important;
}
/* brand.css interdit le retour à la ligne dans les boutons, pour
que « Lancer mon projet » reste sur une ligne. Sous 560 px,
« Accélérer ma croissance » (334 px) ou « Lancer un projet
ensemble » (366 px) ne tiennent plus : on autorise deux lignes
pour les boutons seulement. Le nom de la marque, lui, reste
insécable. */
.btn,
.btn-order,
.band-btn,
.btn-back,
.btn-back-cmd,
.pack-pill {
white-space: normal !important;
max-width: 100%;
text-align: center;
}
/* En-tête des pages Packs, Détails et Commande : logo sur une
ligne, navigation sur la suivante, plutôt que de déborder. */
header:not(#mainHeader) {
flex-wrap: wrap;
height: auto !important;
row-gap: 8px;
}
header:not(#mainHeader) .header-nav {
justify-content: flex-start;
width: 100%;
}
}
/* ============================================================
3. ZONES TACTILES : 44 PX MINIMUM
------------------------------------------------------------
Les liens de navigation faisaient 31 à 36 px de haut, et
certains liens de pied de page 15 à 21 px : on rate la cible
au doigt. La taille du texte ne change pas, seule la surface
cliquable s'agrandit.
============================================================ */
@media (max-width: 992px) {
/* Indispensable : sans retour à la ligne, des pastilles qui ne
peuvent plus rétrécir sortent de l'écran. Les pages Packs
l'ont déjà (pack.css), les pages Détails ne l'avaient pas. */
.header-nav {
flex-wrap: wrap;
gap: 7px;
}
.pack-pill,
.btn-back,
.btn-back-cmd,
.chip {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 44px;
}
.nav-links a {
display: flex;
align-items: center;
min-height: 44px;
}
/* Pied de page : « Retour à l'accueil », « Modifier mon choix
de Pack » et les autres liens de service */
.mini-footer a,
.footer-links a,
footer .back-link,
a.change-pack {
display: inline-flex;
align-items: center;
min-height: 44px;
padding-left: 4px;
padding-right: 4px;
}
}
/* ============================================================
3ter. FILET DE SÉCURITÉ SUR LE VOILE DE TRANSITION
------------------------------------------------------------
Le voile de transition couvre tout l'écran. Il ne doit jamais
pouvoir intercepter un clic : si le JS ne le retire pas, la page
deviendrait inutilisable.
============================================================ */
.page-transition {
pointer-events: none !important;
}
/* ============================================================
3bis. SLIDER DE details-finance.html (toutes largeurs)
------------------------------------------------------------
L'image de fond est agrandie à 110 % pour l'effet de zoom : elle
dépassait de 16 px de chaque côté et faisait scroller la page
horizontalement. index.html rogne déjà son slider de la même
façon (.hero-slider { overflow: hidden }).
============================================================ */
.slide {
overflow: hidden;
}
/* ============================================================
4. EN-TÊTE DE commande.html
------------------------------------------------------------
Le nom de la marque venait toucher le bouton « Accueil ».
============================================================ */
@media (max-width: 640px) {
.btn-back-cmd {
flex-shrink: 0;
margin-left: auto;
}
}
@media (max-width: 344px) {
/* Sur les très petits écrans (iPhone SE 1re génération et
équivalents Android), « T DIGITAL AGENCY » ne tient plus à
côté du bouton : on garde le badge du logo, qui reste le
lien vers l'accueil. */
body:has(.btn-back-cmd) .logo-brand {
display: none;
}
}
/* ============================================================
6. FLUIDITÉ ET FINITIONS (ajouté après l'audit de performance)
============================================================ */
/* --- 6a. Défilement doux : sur la page, pas sur chaque élément ---
index.html posait « scroll-behavior: smooth » dans le sélecteur * :
la règle s'appliquait à chacun des milliers d'éléments de la page.
Elle n'a de sens que sur la racine. */
* {
scroll-behavior: auto;
}
html {
scroll-behavior: smooth;
/* l'ancre ne se retrouve plus cachée sous l'en-tête collant */
scroll-padding-top: 96px;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* --- 6b. Écarté : « content-visibility: auto » ---------------------
Testé puis retiré. Sur des pages de 3 000 à 6 400 px, le gain de
rendu est négligeable, alors que la barre de défilement sautait
jusqu'à 409 px pendant la descente et que le texte hors écran
disparaissait des outils qui lisent la page. Le goulot ici est le
réseau, pas le dessin : c'est le poids des images qu'il fallait
traiter, et il l'a été. */
/* --- 6c. Le clavier doit voir où il se trouve ----------------------
Un anneau net au clavier, rien de visible à la souris. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.chip:focus-visible,
.pack-pill:focus-visible {
outline: 3px solid #f97316;
outline-offset: 3px;
border-radius: 8px;
}
/* --- 6d. Micro-réactions : la même courbe partout -----------------
Une seule courbe d'accélération sur tout le site, au lieu de
cinq durées différentes selon la page. */
.btn,
.btn-order,
.btn-select,
.band-btn,
.comp-lien,
.retour-lien,
.pack-pill,
.chip,
.card-service,
.feature-card,
.pack-card,
.comp-col,
.switch-card {
transition-timing-function: cubic-bezier(0.22, 1, 0.28, 1);
transition-duration: 260ms;
}
/* Le clic doit se sentir : l'élément s'enfonce légèrement. */
.btn:active,
.btn-order:active,
.btn-select:active,
.band-btn:active,
.comp-lien:active,
.retour-lien:active,
.btn-submit:active {
transform: translateY(1px) scale(0.99);
transition-duration: 60ms;
}
/* Les cartes réagissent, sans sauter. */
.feature-card,
.comp-col {
transition-property: transform, box-shadow, border-color;
}
.feature-card:hover,
.comp-col:hover {
transform: translateY(-4px);
}
/* --- 6e. Rien ne saute pendant le chargement ---------------------
Une image dont les dimensions sont déclarées réserve sa place ;
ce ratio garantit qu'elle la garde même si le CSS la redimensionne. */
img[width][height] {
height: auto;
}
/* Ces visuels-la remplissent leur cadre : on redonne la hauteur.
Les selecteurs reprennent [width][height] pour passer devant la regle
ci-dessus, qui serait sinon plus specifique et l'emporterait. */
.hero-photo img[width][height],
.blob-photo img[width][height],
.deck-card img[width][height],
.slide img[width][height],
.slide-item img[width][height],
img.slide-bg[width][height] {
height: 100%;
}
@media (prefers-reduced-motion: reduce) {
.btn, .btn-order, .btn-select, .band-btn, .comp-lien,
.retour-lien, .card-service, .feature-card, .pack-card,
.comp-col, .switch-card {
transition: none !important;
transform: none !important;
}
}
/* ============================================================
7. FILET SOUS LES ANIMATIONS D'APPARITION
------------------------------------------------------------
Un bloc qui attend son animation part de « opacity: 0 ». Si le
JavaScript ne tourne pas — script bloqué, chargement coupé, robot
qui ne l'exécute pas — il ne se relève jamais et la section reste
invisible. Mesuré : 21 blocs sur l'accueil, une trentaine sur les
pages « details ».
La règle s'inverse donc : visible par défaut, caché seulement une
fois que le script a posé sa marque sur . Si le script ne
tourne pas, la marque n'arrive pas et tout reste lisible.
Même principe que « .apparait » dans anim.css.
============================================================ */
.reveal {
opacity: 1;
transform: none;
}
html.js-anim .reveal:not(.active) {
opacity: 0;
transform: translateY(40px);
}
html.js-anim .reveal.active {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
html.js-anim .reveal:not(.active) { opacity: 1; transform: none; }
}
/* ============================================================
L'ENVELOPPE NE DOIT RIEN CHANGER A LA MISE EN PAGE
------------------------------------------------------------
Les images du site sont servies en WebP avec repli JPEG, donc
enveloppees dans une balise . Par defaut cette balise
se comporte comme du texte : une image dimensionnee en
pourcentage (« height: 100% ») perd sa reference et reprend sa
taille d'origine, ce qui faisait deborder les carrousels des
pages packs entre 1100 et 1141 px de large.
« display: contents » efface la balise de la mise en page :
l'image se comporte a nouveau comme si elle etait directement
dans son conteneur. Les navigateurs trop anciens ignorent la
regle et retrouvent le comportement d'avant.
============================================================ */
picture { display: contents; }
/* ============================================================
MOUVEMENT REDUIT
------------------------------------------------------------
Certains visiteurs demandent a leur telephone de limiter les
animations : mal des transports, troubles vestibulaires,
migraines, ou simplement un appareil lent. Le systeme nous le
dit, il suffit de l'ecouter.
Cette feuille est chargee par les 14 pages : la regle vaut
donc pour tout le site, y compris le voile de transition.
============================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.page-transition,
.page-transition::before,
.page-transition::after {
display: none !important;
}
}