/* ========================================================================= LE CARROUSEL DE LA REFONTE, POSE DANS LE SITE EN LIGNE C'est la seule piece de la v2 que le client a voulu garder. Elle arrive donc ici seule, sans le socle qui l'accompagnait. LES JETONS SONT CLOISONNES SUR .carrousel La v2 les declare sur :root. Les reprendre ainsi rehabillerait tout le site en ligne -- ses tailles, ses couleurs, ses durees -- alors qu'on ne veut changer que le bandeau. Declares SUR le bloc, ils ne descendent que dans lui. Ce qui vient de la v1 et non de la v2 : le bouton (sa pilule bleue a bord turquoise) et la largeur d'enveloppe (90 %, 1200 px), pour que le bandeau soit du meme site que ce qui le suit. ========================================================================= */ .carrousel { /* --- les jetons, cloisonnes --- */ --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-6: 1.5rem; --e-8: 2rem; --e-16: 4rem; --e-24: 6rem; --t-l: clamp(1.125rem, 0.95rem + 0.7vw, 1.375rem); /* L'ECHELLE DU TITRE EST CELLE DE LA REFERENCE, PAS UNE APPROXIMATION `clamp(2.5rem, 1.2rem + 5.2vw, 5rem)` plafonnait a 80 px la ou le carrousel de reference en fait 112. Mesure a 1280 : titre de 80 px contre 112, soit un tiers de moins -- c'est la difference qu'on voit d'abord entre les deux bandeaux, bien avant les marges. La valeur est reprise telle quelle de `assets/css/v2/socle.css`. */ --t-3xl: clamp(3rem, 1.1rem + 7.6vw, 7rem); --r-pilule: 999px; --sur-photo: #ffffff; --sur-photo-rgb: 255 255 255; --ombre-photo-rgb: 20 14 10; --v-court: 160ms; --v-moyen: 240ms; --glisse: cubic-bezier(0.32, 0.72, 0, 1); --sortie: cubic-bezier(0.23, 1, 0.32, 1); position: relative; display: grid; overflow: hidden; /* LE CARROUSEL REMONTE SOUS L'EN-TETE `main` porte `padding-top: var(--header-height)` parce que l'en-tete est en `position: fixed`. Sans cette marge negative, le carrousel commence SOUS la barre -- et depuis que la barre est transparente sur l'accueil, elle flotte alors sur 100 px de blanc avant que la photo ne commence. C'est exactement le defaut qui se voyait. Les deux vont ensemble : barre transparente ET carrousel remonte. L'une sans l'autre est pire que ni l'une ni l'autre. Le min-height grandit d'autant : sans cela, remonter le carrousel de 100 px lui en retirerait 100 de visible. Mesure : 718 px de bande, contre 712 en refonte. */ margin-top: calc(-1 * var(--header-height)); /* LA HAUTEUR EST CELLE DU CARROUSEL DE REFERENCE La reference n'est pas le slider de lecocondesoi.fr -- que j'ai longtemps pris pour cible a tort -- mais le carrousel de `projects/lecocondesoi`. Mesure, deux tailles de fenetre : haut hauteur section suivante fenetre reference 94 618 712 813 reference 94 680 774 895 Sa bande vaut donc 76dvh + la hauteur de son en-tete. Ici l'en-tete est en `position: fixed` et non dans le flux : le carrousel remonte dessous, et son min-height porte la somme. Reste 6 px d'ecart, l'en-tete faisant 100 px ici contre 94 la-bas. Le plafond de 46rem empeche le bandeau de grandir indefiniment sur un ecran de 1400 px de haut. `dvh` et non `vh` : sur mobile, `vh` compte la barre d'adresse qui se retracte, et le bandeau depasse de sa hauteur au premier defilement. `min-height` et non `height` : une diapositive au texte long doit pouvoir pousser, pas etre coupee. */ min-height: calc(min(76dvh, 46rem) + var(--header-height)); background-color: var(--dark-brown); /* La v1 pose « section { padding: 5rem 2rem } » : sans cette remise a zero, le fond du carrousel serait borde de brun sur ses quatre cotes. */ padding: 0; } .carrousel__vue { grid-area: 1 / 1; display: grid; grid-template-areas: "pile"; opacity: 0; visibility: hidden; /* 700 ms : un fondu de diaporama, pas une interaction. Plus court, le changement claque et rompt le calme que la page vend. */ transition: opacity 700ms var(--sortie), visibility 0s linear 700ms; } .carrousel__vue--active { opacity: 1; visibility: visible; transition-delay: 0s; } /* position: relative pour que le degrade se cale sur le fond, et non sur la premiere ascendance positionnee trouvee par hasard plus haut. */ .carrousel__fond { grid-area: pile; position: relative; overflow: hidden; } /* ⚠ LE REPERE DE LECTURE SEULE EST HORS DU CONTENU, ET C'EST OBLIGATOIRE `.carrousel__contenu` porte `z-index: 1` : il cree un CONTEXTE D'EMPILEMENT, et tout ce qu'il contient s'empile a l'interieur. Le repere y avait beau porter `z-index: 3`, il restait sous le voile de lecture seule (z-index 2), qui est un enfant de la diapositive -- un enfant ne peut pas sortir du contexte de son parent, quel que soit son z-index. Il est donc pose en frere du contenu, dans la meme cellule de grille. Le `pointer-events` du contenu n'est pas touche : le voile, lui, est transparent aux clics. */ /* L'IMAGE EST SORTIE DU FLUX, ET C'EST LA REGLE QUI A MORDU TROIS FOIS En flux, « height: 100% » contre un parent en hauteur automatique est IGNORE : l'image reprend son rapport natif et impose sa hauteur au bloc. Une photo 1920x1280 faisait 1233 px de haut sur un grand ecran, et le bandeau devenait un tunnel. Hors flux elle ne pese plus rien : la hauteur vient du min-height, object-fit se charge du recadrage. */ .carrousel__fond img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Un degrade plutot qu'un voile uniforme : le bas s'assombrit pour porter le texte, le haut reste lisible. Un voile a plat eteint toute la photo. */ .carrousel__fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--ombre-photo-rgb) / .82) 0%, rgb(var(--ombre-photo-rgb) / .55) 38%, rgb(var(--ombre-photo-rgb) / .18) 70%, rgb(var(--ombre-photo-rgb) / .28) 100%); } /* Le contenu est cale en bas : il ne passe donc pas sous la barre. Mais une diapositive au texte long remonterait -- ce retrait ne coute rien tant qu'il ne sert pas. */ .carrousel__contenu { padding-top: var(--header-height); grid-area: pile; align-self: end; /* le texte en bas, le fond plein */ position: relative; z-index: 1; padding-block: var(--e-16) var(--e-24); color: var(--sur-photo); } /* L'enveloppe de la v1 : 90 %, 1200 px. Le bandeau doit tomber sur les memes marges que les sections qui le suivent, sinon la page se decale au premier defilement. */ .carrousel .enveloppe { width: 90%; max-width: 1200px; margin-inline: auto; padding-inline: 15px; } .carrousel__titre { max-width: 18ch; margin: 0; color: var(--sur-photo); /* ⚠ `--font-primary` N'EXISTE PAS Le jeton du site s'appelle `--font-main`. La valeur de repli -- Playfair en dur -- s'appliquait donc TOUJOURS : le titre du carrousel restait en serif meme apres un changement de police, et rien ne l'aurait signale. */ /* ⚠ LE TITRE DE CARROUSEL EST UN

, ET LE SITE HABILLE LES

`css/style.css` porte deux regles sur l'ELEMENT, non sur une classe : `h2 { text-align: center }` et `h2::after` -- un filet menthe de 80 px. Elles sont faites pour les titres de section, et elles tombaient aussi sur le titre du carrousel : centre dans sa boite de 18ch, avec un filet dessous que la reference n'a pas. On ne les corrige pas a la source : ces deux regles sont justes pour les sections. C'est ici qu'il faut dire qu'un titre de carrousel n'est pas un titre de section. */ text-align: left; font-family: var(--font-main); font-size: var(--t-3xl); line-height: 1.05; } .carrousel__titre::after { content: none; } .carrousel__sous-titre { max-width: 46ch; margin: var(--e-4) 0 0; color: rgb(var(--sur-photo-rgb) / .86); font-size: var(--t-l); } /* LE BOUTON N'EST PAS DEFINI ICI Il l'etait -- la pilule bleue de la v1 -- et `css/boutons.css` le redefinit pour tout le site. Les deux regles visaient `.carrousel .bouton`, a EGALITE de specificite : c'est alors l'ordre de chargement qui tranche, et cette feuille etant chargee apres, le bouton du carrousel gardait l'ancien aspect pendant que tous les autres changeaient. Une seule definition, dans `boutons.css`. Ce qui reste ici est ce qui ne concerne que le carrousel : la marge au-dessus. */ .carrousel__bouton { margin-top: var(--e-8); } /* --- les commandes --- */ .carrousel__commandes { position: absolute; left: 0; right: 0; bottom: var(--e-8); z-index: 2; display: flex; align-items: center; gap: var(--e-4); } .carrousel__points { display: flex; gap: var(--e-2); } .carrousel__point { width: 2rem; height: 3px; padding: 0; border: 0; border-radius: var(--r-pilule); background: rgb(var(--sur-photo-rgb) / .35); cursor: pointer; transition: background-color var(--v-moyen) var(--glisse); } .carrousel__point--actif { background: var(--menthe); } .carrousel__fleche { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid rgb(var(--sur-photo-rgb) / .3); border-radius: var(--r-pilule); background: rgb(var(--sur-photo-rgb) / .08); color: var(--sur-photo); cursor: pointer; transition: background-color var(--v-court) var(--glisse), transform var(--v-court) var(--sortie); } @media (hover: hover) { .carrousel__fleche:hover { background: rgb(var(--sur-photo-rgb) / .2); } } .carrousel__fleche:active { transform: scale(0.94); } /* --- le titre en mots, decoupe cote serveur --- */ /* Le titre arrive deja en morceaux : il n'y a pas d'instant ou l'on voit la phrase entiere sauter en pieces. Chaque mot est un bloc en ligne, un nu ne se laissant pas transformer. */ .carrousel .mot { display: inline-block; animation: monte-mot 900ms var(--sortie) both; animation-delay: calc(var(--i, 0) * 70ms); } @keyframes monte-mot { from { opacity: 0; transform: translateY(0.9em) rotate(1.5deg); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .carrousel .mot { animation: mot-simple 300ms var(--sortie) both; animation-delay: 0s; } @keyframes mot-simple { from { opacity: 0; } } } /* --- l'invite, en mode modification seulement --- */ /* En ::before et non dans le contenu : une invite ecrite dans le document serait du texte comme un autre, et finirait enregistree collee a ce que la cliente vient de taper. */ .carrousel [data-invite]:empty::before { content: attr(data-invite); opacity: .55; font-style: italic; } /* ========================================================================= L'EN-TETE FLOTTE SUR LA PHOTO — SUR L'ACCUEIL SEULEMENT Cette feuille n'est chargee que par index.php : les regles ci-dessous ne touchent donc aucune autre page, sans avoir besoin d'une classe sur . POURQUOI CE N'EST PAS QU'UNE COULEUR DE FOND Rendre la barre transparente ne suffit pas : ses liens sont bruns et son trait de soulignement bleu, poses la pour un fond blanc. Sur une photo sombre ils disparaissent. Tout ce qui portait une couleur pensee pour le blanc doit donc basculer -- et rebasculer des qu'on defile. LE SEUIL EST BAS, ET C'EST VOULU 40 px : la barre reprend son fond des le premier geste de defilement, avant meme que la photo ait quitte l'ecran. Attendre la fin du carrousel laisserait une barre transparente au-dessus du texte des prestations. L'ombre portee sur le texte n'est pas un effet : une photo claire peut passer sous la barre, et un lien blanc y devient invisible. Elle coute une ombre de 1 px et ne se voit pas sur un fond sombre. ========================================================================= */ header { background-color: transparent; box-shadow: none; /* On nomme ce qui bouge : « all » ferait surveiller des proprietes qu'on n'a pas voulu animer. */ transition: background-color var(--v-moyen, 240ms) ease, box-shadow var(--v-moyen, 240ms) ease; } /* Les liens de premier niveau seulement : ceux du menu deroulant restent sur leur fond blanc, et doivent y rester lisibles. */ /* ⚠ LES ICONES DE RESEAU N'ETAIENT PAS DANS CETTE REGLE Elle ne visait que `.nav-links > li > a` et `.menu-toggle i`. Les deux pastilles de reseau, elles, portent `color: inherit` : sur la barre transparente elles heritaient donc l'encre du corps -- sombre sur une photo sombre, invisibles. Elles suivent le meme traitement que les liens : blanches, avec l'ombre courte qui les detache d'une photo claire. */ header .nav-links > li > a, header .nav-reseaux a, header .menu-toggle i { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); } /* DEUX FONDS, DEUX MENTHES Barre transparente sur la photo : le fond est sombre, l'aigue-marine franche y tranche -- et c'est la couleur d'entree active de la reference. Barre posee (blanche) : le meme aigue-marine y mesure 1,64:1, illisible ; c'est `--menthe-lisible` qui prend le relais, 5,10:1. L'entree active etait blanche comme les autres : rien ne disait ou l'on est. */ /* SUR LA PHOTO, LA PASTILLE EST UN VOILE -- PAS UN APLAT DE COULEUR On ne sait pas ce qu'il y a dessous : feuillage sombre, ciel clair, une diapositive change tout. Un aplat de la palette y serait tantot lisible, tantot noye. Un voile clair s'accorde a n'importe quelle photo, et le texte reste aigue-marine, qui tranche sur du sombre. */ /* Sur la photo, l'entree ouverte est simplement AIGUE-MARINE -- c'est la reference. Le voile, lui, ne repond qu'au survol : on ne sait pas ce qu'il y a dessous (feuillage sombre, ciel clair, une diapositive change tout), et un voile clair s'accorde a n'importe quelle photo la ou un aplat de la palette serait tantot lisible, tantot noye. */ header .nav-links > li > a.active { color: var(--menthe); } @media (hover: hover) and (pointer: fine) { header:not(.est-posee) .nav-links > li > a:hover, header:not(.est-posee) .dropdown:hover > a { background-color: rgba(255, 255, 255, .16); color: var(--menthe); } } /* ⚠ CE VOILE EST CELUI DE LA BARRE EN LIGNE, PAS DU PANNEAU Sous 64rem le menu devient un panneau blanc, et `header:not(.est-posee)` reste vrai : la regle ci-dessus, plus specifique (0,3,3) que celle du panneau (0,2,1), y reprenait la main et rallumait le parent du sous-menu pendant tout le depliage. La borne dit ce que la regle a toujours voulu dire : elle habille la barre quand elle est en ligne. */ @media (min-width: 64.0625rem) { header:not(.est-posee) .nav-links > li > a:hover, header:not(.est-posee) .dropdown:hover > a { background-color: rgba(255, 255, 255, .16); } } header .nav-reseaux { border-left-color: rgba(255, 255, 255, .35); } /* Le logo est cercle de turquoise sur fond clair ; sur une photo sombre le cercle se perd. Un halo tres court le detache sans l'habiller. */ header .logo-img { box-shadow: 0 2px 10px rgba(0, 0, 0, .35); } /* --- des qu'on defile, la barre reprend son fond et ses couleurs --- */ header.est-posee { background-color: rgba(255, 255, 255, .95); box-shadow: 0 2px 10px rgba(0, 0, 0, .1); } header.est-posee .nav-reseaux a, header.est-posee .nav-links > li > a, header.est-posee .menu-toggle i { color: var(--light-brown); text-shadow: none; } header.est-posee .nav-links > li > a.active { color: var(--menu-actif); } @media (hover: hover) and (pointer: fine) { header.est-posee .nav-links > li > a:hover { background-color: var(--green); color: var(--dark-brown); } } header.est-posee .nav-reseaux { border-left-color: rgba(58, 42, 29, .18); } header.est-posee .logo-img { box-shadow: none; }