/* ========================================================================= SOCLE « BASCULE » — feuille commune aux deux univers. Extrait de interieur.html : aucune regle n'est dupliquee entre PRO et PARTICULIER, seuls les jetons changent. ========================================================================= */ /* ========================================================================= LES DEUX UNIVERS. Une seule feuille, deux jeux de jetons, choisis par l'attribut `data-univers` sur . C'est le mecanisme que le theme WordPress reprendra tel quel : aucune regle n'est dupliquee. Chaque arret des degrades porteurs de texte blanc tient au moins 4,5 : PRO #2B5BE0 5,7 · #7B3FD4 6,0 · #C2410C 5,2 PART #C2410C 5,2 · #B03A6E 5,8 · #2B5BE0 5,7 ========================================================================= */ :root[data-univers="pro"]{ --acc:#2B5BE0; --acc-vif:#4C7DFF; --acc-clair:#8FB4FF; --acc-voile:#EAF0FF; --sec:#FF8A2B; --sec-fonce:#C2410C; --sec-clair:#FFC489; --sec-voile:#FFF1E4; --autre:#FF9A44; /* la couleur de l'autre univers */ --signal:linear-gradient(100deg,#2B5BE0 0%,#7B3FD4 52%,#C2410C 100%); --signal-90:linear-gradient(90deg,#2B5BE0 0%,#7B3FD4 55%,#FF8A2B 100%); --signal-180:linear-gradient(180deg,#8FB4FF 0%,#2B5BE0 34%,#7B3FD4 68%,#FF8A2B 100%); --signal-clair:linear-gradient(100deg,#4C7DFF 0%,#A78BFA 50%,#FF8A2B 100%); --signal-nuit:linear-gradient(100deg,#8FB4FF 0%,#C9B8FF 46%,#FFC489 100%); --nuee-1:#D7E4FF; --nuee-2:#FFE1C6; --nuee-3:#E6D9FF; --mediane:#A78BFA; /* l'arret central des degrades */ } :root[data-univers="part"]{ --acc:#C2410C; --acc-vif:#F97316; --acc-clair:#FDBA74; --acc-voile:#FFF3E8; --sec:#4C7DFF; --sec-fonce:#2B5BE0; --sec-clair:#8FB4FF; --sec-voile:#EAF0FF; --autre:#4C7DFF; --signal:linear-gradient(100deg,#C2410C 0%,#B03A6E 50%,#2B5BE0 100%); --signal-90:linear-gradient(90deg,#C2410C 0%,#B03A6E 55%,#4C7DFF 100%); --signal-180:linear-gradient(180deg,#FDBA74 0%,#C2410C 34%,#B03A6E 68%,#4C7DFF 100%); --signal-clair:linear-gradient(100deg,#F97316 0%,#E0629B 50%,#4C7DFF 100%); --signal-nuit:linear-gradient(100deg,#FDBA74 0%,#F0A9CE 46%,#8FB4FF 100%); --nuee-1:#FFE1C6; --nuee-2:#D7E4FF; --nuee-3:#FFD9E8; --mediane:#E0629B; } /* ========================================================================= DIRECTION « BASCULE » — univers PROFESSIONNELS. ------------------------------------------------------------------------- Le contenu vient du corpus (_refonte/corpus/accueil-pro.md), dans son ORDRE d'origine. Rien n'est invente, rien n'est reordonne. Troisieme passe, apres « ca manque d'effet de section enchaine ». Le probleme n'etait pas le style des sections mais leur ISOLEMENT : sept blocs poses bout a bout, chacun commencant a zero. Trois dispositifs les relient desormais : 1. LE FIL. Un trait vertical court le long de toute la page, se remplit au defilement et allume un noeud a chaque section atteinte. Il donne au visiteur la carte de la page et relie physiquement les blocs. 2. LES COUTURES. Aucune section ne commence par un bord droit : peigne de tiges, diagonale, ou remontee de la nuit. La section suivante mord toujours sur la precedente. 3. LA CONTINUITE DU MOTIF. Le champ de tiges du portail traverse la page : en 3D dans la tete, en CSS dans les coutures et derriere les chiffres. C'est le meme objet, vu de plusieurs facons. Trois regles tenues, comme sur le portail : - rien ne nait invisible : aucune animation ne part d'`opacity: 0` ; - la page est complete sans WebGL, sans JavaScript, au clavier ; - zero appel a un tiers : Three.js, Outfit et les 21 logos sont ici. ========================================================================= */ @font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap; src:url('vendor/fonts/outfit-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap; src:url('vendor/fonts/outfit-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} :root{ --encre:#070A12; --encre-2:#0B1223; --encre-3:#0E1830; --papier:#FFFFFF; --papier-2:#F3F6FC; --trait:#D9E0EC; --texte:#0D1420; --texte-2:#43536D; /* L'ORANGE. Il etait reserve a l'univers Particulier ; il devient la couleur d'energie commune a IF2M. Les deux univers restent distincts par leur couleur DOMINANTE — bleu ici, ambre en face — pas par exclusivite. avec du blanc : tout texte blanc sur orange emploie la version foncee. */ /* Les degrades. Chaque arret d'un degrade portant du texte blanc tient au moins 4,5 : #2B5BE0 → 5,7 · #7B3FD4 → 6,0 · #C2410C → 5,2. */ --r:18px; --t:cubic-bezier(.22,.61,.36,1); --ressort:cubic-bezier(.34,1.56,.64,1); --accgression:0; /* 0 → 1, ecrit par le script au defilement */ /* Les ombres : jamais du noir pur, toujours teintees de l'encre. */ --ombre-1:0 1px 2px rgba(13,20,32,.05), 0 6px 18px -12px rgba(13,20,32,.22); --ombre-2:0 2px 6px rgba(13,20,32,.06), 0 30px 60px -34px rgba(13,20,32,.55); } /* Le grain. 1,4 Ko de SVG en ligne, aucune requete. Il casse le lisse des degrades — sans lui, un aplat large « bande » sur les grands ecrans. */ body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")} /* Le fond « nuee » : trois taches de couleur diffuses au lieu d'un blanc plat. C'est ce qui fait la difference entre une page propre et une page dessinee, et ca ne coute aucune image. */ .nuee{background: radial-gradient(42% 38% at 10% 4%, var(--nuee-1) 0%, transparent 66%), radial-gradient(38% 34% at 92% 10%, var(--nuee-2) 0%, transparent 68%), radial-gradient(46% 42% at 74% 96%, var(--nuee-3) 0%, transparent 68%), var(--papier)} .nuee-2{background: radial-gradient(40% 40% at 86% 6%, var(--nuee-2) 0%, transparent 66%), radial-gradient(44% 40% at 6% 88%, var(--nuee-1) 0%, transparent 68%), var(--papier-2)} *,*::before,*::after{box-sizing:border-box} /* La barre d'action collee au bas de l'ecran mesure ~90 px sous 820 px : sans reserve basse, le navigateur amene l'element « dans le viewport » et le laisse DERRIERE elle — l'anneau de focus devient invisible. */ html{scroll-behavior:smooth;scroll-padding-top:5.5rem;scroll-padding-bottom:6.5rem} body{margin:0;background:var(--papier);color:var(--texte); font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:350; font-size:clamp(1rem,.4vw + .92rem,1.09rem);line-height:1.62;-webkit-font-smoothing:antialiased; overflow-x:hidden} img{max-width:100%;height:auto} h1,h2,h3{line-height:1.03;letter-spacing:-.03em;margin:0;font-weight:300} h2{font-size:clamp(2rem,4.6vw,3.9rem)} h3{font-size:1.22rem;font-weight:500;letter-spacing:-.015em;line-height:1.2} p{margin:0} .large{width:min(1240px,100% - 2.5rem);margin-inline:auto} .etroit{width:min(780px,100% - 2.5rem);margin-inline:auto} section{padding-block:clamp(3.6rem,8vw,7rem);position:relative} .oeil{font-size:.75rem;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--acc); display:flex;align-items:center;gap:.6rem} .oeil::before{content:"";width:2.4rem;height:2px;border-radius:2px;flex:0 0 auto; background:var(--signal-clair)} .nuit .oeil::before{background:var(--signal-nuit)} .nuit .oeil{color:var(--acc-clair)} .nuit{background:var(--encre);color:#fff} /* ========================================================================= 1. LE FIL — la colonne vertebrale de la page ========================================================================= */ /* ========================================================================= 2. LES COUTURES — aucune section ne commence par un bord droit ========================================================================= */ /* Le peigne : les tiges du portail, vues de face, qui montent dans la nuit. */ .couture-peigne{position:absolute;left:0;right:0;height:clamp(70px,9vw,130px);pointer-events:none;z-index:1} .couture-peigne::before{content:"";position:absolute;inset:0; background:repeating-linear-gradient(90deg,transparent 0 8px,currentColor 8px 10px,transparent 10px 19px)} .couture-peigne--haut{top:0;color:color-mix(in oklab,var(--acc-clair) 34%,transparent)} .couture-peigne--haut::before{-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)} .couture-peigne--bas{bottom:0;color:color-mix(in oklab,var(--acc-clair) 30%,transparent)} .couture-peigne--bas::before{-webkit-mask-image:linear-gradient(180deg,transparent,#000);mask-image:linear-gradient(180deg,transparent,#000)} /* La diagonale : la section suivante mord sur la precedente. */ .couture-diagonale{clip-path:polygon(0 clamp(28px,4.2vw,74px),100% 0,100% 100%,0 100%); margin-top:calc(-1 * clamp(28px,4.2vw,74px))} .couture-diagonale-inv{clip-path:polygon(0 0,100% clamp(28px,4.2vw,74px),100% 100%,0 100%); margin-top:calc(-1 * clamp(28px,4.2vw,74px))} /* ========================================================================= En-tete ========================================================================= */ /* Le fond de l'en-tete etait assez transparent pour que le contraste des liens depende de ce qui defile dessous : mesure a 4,01 sur certaines zones grises, et 2,94 pour la rubrique active. Un fond n'est pas une variable d'ambiance quand du texte est pose dessus. */ /* C9 — la pile du site : .remonter 45 < .barre-action 46. Le panneau du mega menu doit passer au-dessus des deux. .entete est collee en haut, ils sont colles en bas : ils ne se recouvrent jamais, la montee est donc sans condition — et sans :has(), que Firefox ne connait que depuis la 121. */ .entete{position:sticky;top:0;z-index:47;background:rgba(255,255,255,.94); backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid transparent; transition:background .35s var(--t),border-color .35s var(--t),box-shadow .35s var(--t)} /* L'en-tete ne s'annonce qu'une fois qu'on a quitte le haut : au repos elle flotte sur l'en-tete sombre, ensuite elle se pose sur le papier. */ .entete.posee{background:rgba(255,255,255,.98);border-bottom-color:var(--trait);box-shadow:var(--ombre-1)} .entete .rang{display:flex;align-items:center;gap:.9rem;padding-block:.65rem; transition:padding .35s var(--t)} .entete.posee .rang{padding-block:.42rem} .logo{display:flex;align-items:baseline;gap:.45rem;text-decoration:none;color:var(--texte); font-weight:700;font-size:1.25rem;letter-spacing:-.03em;flex:0 0 auto} .logo span{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);font-weight:700} .menu{display:flex;gap:.05rem;margin-left:auto;flex-wrap:nowrap} .menu a{padding:.44rem .5rem;border-radius:9px;text-decoration:none;color:var(--texte-2); font-size:.845rem;font-weight:450;white-space:nowrap;transition:background .2s,color .2s} .menu a:hover,.menu a:focus-visible{background:var(--acc-voile);color:var(--acc)} .menu a[aria-current]{color:var(--acc);font-weight:600} .bascule-lien{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .8rem;border-radius:99px; border:1px solid var(--trait);text-decoration:none;color:var(--texte-2);font-size:.82rem;white-space:nowrap} .bascule-lien:hover{border-color:var(--autre);color:var(--sec-fonce); background:color-mix(in oklab,var(--autre) 12%,#fff)} .bascule-lien i{width:.5rem;height:.5rem;border-radius:50%;background:var(--autre);display:inline-block} /* Au telephone, l'intitule long faisait passer la pastille sur son propre rang et l'en-tete tenait sur trois lignes. */ .bascule-lien .court{display:none} @media (max-width:560px){ .bascule-lien .long{display:none} .bascule-lien .court{display:inline} } /* --------------------------------------------------------------------- A. LE MÉGA MENU — « le plan de l'atelier » Le panneau est un
natif : sans JavaScript il s'ouvre au clic, au clavier, et tous les liens restent atteignables. Le script n'ajoute que l'ouverture au survol et la fermeture par Échap. ------------------------------------------------------------------ */ .menu--mega{align-items:center;gap:.04rem} .menu--mega .mm-simple{padding:.44rem .46rem;border-radius:9px;text-decoration:none; color:var(--texte-2);font-size:.82rem;font-weight:450;white-space:nowrap; transition:background .2s,color .2s} .menu--mega .mm-simple:hover,.menu--mega .mm-simple:focus-visible{background:var(--acc-voile);color:var(--acc)} .menu--mega .mm-simple[aria-current]{color:var(--acc);font-weight:600} /* CINQ ENTREES AU LIEU DE NEUF : la barre tombe de 770 a 527 px (mesure a 1280 px, interieur.html). Le seuil ou l'intitule long de la pastille doit ceder passe donc de 1360 a 1080 px. Mesure du pire cas — pvente.html, dont la pastille dit « La boutique, cote particuliers » : le rang y demande 936 px, et `.large` en offre 1040 a 1080 px de viewport. */ @media (max-width:1080px){ .bascule-lien .long{display:none} .bascule-lien .court{display:inline} } /* `.menu a` pose white-space:nowrap — juste pour les entrees de la BARRE, faux pour tout ce qui vit dans un panneau. Mesure a 390 px, tiroir ouvert, panneau « Se faire connaitre » : le titre « Affichage dynamique et ecran interactif » et « Nos realisations sur les reseaux sociaux » sortaient de 57 px, et `overflow-x:hidden` sur le tiroir les COUPAIT en plein mot au lieu de les signaler — la page ne debordait pas, le controle passait au vert. */ .mm-panneau a{white-space:normal} .mm-groupe{position:static} .mm-groupe:not([open])>.mm-panneau{display:none} .mm-titre{display:inline-flex;align-items:center;gap:.24rem;padding:.44rem .46rem; border-radius:9px;color:var(--texte-2);font-size:.82rem;font-weight:450; white-space:nowrap;cursor:pointer;list-style:none;user-select:none; transition:background .2s,color .2s} .mm-titre::-webkit-details-marker{display:none} .mm-titre:hover,.mm-titre:focus-visible{background:var(--acc-voile);color:var(--acc)} .mm-titre:focus-visible{outline:2px solid var(--acc);outline-offset:2px} .mm-groupe[open]>.mm-titre{background:var(--acc-voile);color:var(--acc);font-weight:600} .mm-titre svg{width:.58rem;height:.58rem;flex:0 0 auto;fill:none;stroke:currentColor; stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round; transition:transform .28s var(--t)} .mm-groupe[open]>.mm-titre svg{transform:rotate(180deg)} /* Le panneau. `.entete` porte un backdrop-filter : elle est donc déjà le bloc conteneur de ses descendants absolus. On s'y ancre, pleine largeur. */ .mm-panneau{position:absolute;left:0;right:0;top:100%; background:var(--papier);border-top:1px solid var(--trait); border-bottom:1px solid var(--trait);box-shadow:var(--ombre-2); padding-block:1.8rem 1.5rem;max-height:calc(100vh - 5rem);overflow-y:auto; background-image: radial-gradient(34% 60% at 6% 0%,var(--nuee-1) 0%,transparent 70%), radial-gradient(30% 60% at 96% 8%,var(--nuee-2) 0%,transparent 72%), radial-gradient(40% 70% at 62% 100%,var(--nuee-3) 0%,transparent 70%), linear-gradient(var(--papier),var(--papier))} /* AUCUNE PISTE DE CE MENU N'EST DIMENSIONNEE PAR SON CONTENU : partout `minmax(0,1fr)`, jamais `1fr`. `1fr` vaut `minmax(auto,1fr)`, et ce minimum `auto` est le min-content de la colonne : un mot trop long, une adresse, un libelle qui ne se coupe pas, et la piste devient plus large que le panneau qui la contient. Mesure a 390 px avant correction : 330,7 px de piste dans un conteneur de 273,2. Le garde-fou reste meme une fois la cause traitee. */ .mm-plan{display:grid;gap:1.4rem 2.6rem; grid-template-columns:minmax(15rem,20rem) minmax(0,1fr);align-items:start} .mm-tete{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start} .mm-glyphe{width:72px;height:72px;flex:0 0 auto;color:var(--acc); fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .mm-oeil{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700; color:var(--texte-2);margin:0 0 .3rem} .mm-pilier{display:inline-flex;align-items:baseline;gap:.45rem;font-size:1.3rem; font-weight:600;letter-spacing:-.025em;color:var(--texte);text-decoration:none;line-height:1.14} /* LA REGLE PRECEDENTE NE POSE NI COULEUR NI GRAISSE NI TAILLE, et c'est un piege de specificite : le titre vit dans `.menu`, ou `.menu a` (0,1,1) surclasse `.mm-pilier` (0,1,0). Mesure a 1280 px avant correction : le titre de colonne rendait rgb(67,83,109) en graisse 450 pendant que les mots d'appel de sa PROPRE liste rendaient rgb(13,20,32) en graisse 600 — la hierarchie sur laquelle repose toute la composition a trois colonnes etait exactement inversee, et le seul titre correct etait celui du 3e panneau, parce que c'est un

que `.menu a` n'atteint pas. Tout ce qui doit gagner passe donc par (0,2,0). La taille reste tenue par `.mm-colonne .mm-pilier`, pose plus bas a specificite egale ; le survol reste celui de `.menu a:hover` (0,2,1), volontairement. */ .menu--mega .mm-pilier{color:var(--texte);font-weight:600;font-size:1.3rem} .mm-pilier:hover{color:var(--acc)} /* « L'atelier » est un THEME, pas un pilier : il n'a pas de page a lui. Son titre a donc le poids d'un titre de pilier, sans etre un lien. */ .mm-theme{margin:0;font-size:1.3rem;font-weight:600;letter-spacing:-.025em; color:var(--texte);line-height:1.14} .mm-resume{margin:.5rem 0 0;font-size:.87rem;line-height:1.5;color:var(--texte-2);max-width:34ch} /* Hors colonne — c'est-a-dire dans « L'atelier », le seul panneau a tete unique — la liste tient en DEUX colonnes serrees, remplies DE HAUT EN BAS. Le remplissage par rangs (le defaut de la grille) faisait lire les huit entrees en zigzag, et `auto-fill` sur 1fr ecartait les deux colonnes de 400 px. Une liste se lit vers le bas. Quatre rangs : c'est le partage des huit entrees en 4 + 4. */ .mm-liste{list-style:none;margin:0;padding:0 0 0 2.4rem;display:grid;gap:.15rem .9rem; grid-template-rows:repeat(4,auto);grid-auto-flow:column; grid-auto-columns:minmax(0,20rem);justify-content:start; border-left:1px solid var(--trait)} /* --- LES COLONNES DE PILIER -------------------------------------------- Trois piliers dans un panneau, ce n'est pas trois listes collees. Chaque pilier tient une COLONNE : son dessin, son nom, sa phrase, puis ses pages. L'oeil traverse les tetes, choisit sa colonne, puis descend. Le filet qui separe deux colonnes est pose au MILIEU de la gouttiere par un pseudo, et non en border-left : sinon les colonnes n'ont plus la meme largeur utile. */ .mm-plan--3{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch} /* Deux piliers seulement, et huit liens en tout : le plan doit s'arreter la ou le contenu s'arrete. Il garde donc la largeur de `.large` et n'occupe que DEUX de ses TROIS pistes — jamais un `max-width` sur ce meme element, qui porte aussi `.large`, donc `margin-inline:auto` : le retrecir ne l'arrete pas a gauche, il le fait GLISSER vers la droite. Mesure avant correction, bord gauche du premier bloc : 176 px a 1280, 256 a 1440, 496 a 1920, contre 20 / 100 / 340 pour le logo — soit 156 px de saut de tout le contenu du panneau, bande de pied comprise, en passant d'un theme a l'autre. Trois pistes plutot que deux, aussi, pour que les colonnes tombent exactement sur celles du panneau a trois piliers. */ .mm-plan--2{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch} .mm-colonne{position:relative;display:grid;grid-template-columns:minmax(0,1fr); align-content:start;gap:.55rem} .mm-colonne+.mm-colonne::before{content:"";position:absolute;left:-1.3rem;top:.1rem;bottom:.1rem; width:1px;background:var(--trait)} .mm-colonne .mm-pilier{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;align-items:center; font-size:1.05rem;letter-spacing:-.02em;line-height:1.2} .mm-colonne .mm-glyphe{width:42px;height:42px} .mm-colonne .mm-nom i{font-style:normal;color:var(--acc);display:inline-block; transition:transform .24s var(--t)} .mm-colonne .mm-pilier:hover .mm-nom i{transform:translateX(3px)} /* min-height de DEUX lignes : sans elle, la phrase d'un pilier tient sur une ligne, celle du voisin sur deux, et les trois listes ne demarrent plus a la meme hauteur. On lit alors trois listes cote a cote, pas une composition. */ .mm-colonne .mm-resume{margin:0;font-size:.81rem;line-height:1.45;max-width:40ch; min-height:2.9em} /* Dans une colonne de pilier, la liste est deja la colonne : un seul rang de large, remplie par rangs. On defait le remplissage par colonnes pose plus haut pour « L'atelier ». */ .mm-colonne .mm-liste{grid-template-columns:minmax(0,1fr);grid-template-rows:none; grid-auto-flow:row;grid-auto-columns:auto;gap:0;padding:.45rem 0 0; border-left:0;border-top:1px solid var(--trait);margin-top:.15rem} /* UN LIBELLE EST UNE PHRASE, PAS DEUX COLONNES. Le lien etait un conteneur flex : le mot en gras et sa suite y devenaient deux elements cote a cote, et des que la place manquait ils se repliaient CHACUN de leur cote. Mesure a 390 px : « Nos realisations sur les reseaux sociaux » se lisait sur deux colonnes de deux lignes. Le lien revient donc au flux normal, la pastille devient une PUCE PENDANTE : `text-indent` negatif de la largeur de la pastille plus son ecart (.32rem + .5rem = .82rem), retrait gauche d'autant en plus. La pastille pend dans la marge, toutes les lignes s'alignent, et le texte demarre au meme pixel qu'avant : 9,6 px de retrait + 5,12 de pastille + 8 d'ecart = 22,72 px, soit 1,42rem. Rien a recalculer quand le retrait change au tiroir — seul le padding-left suit. */ .mm-liste a{display:block;padding:.4rem .6rem .4rem 1.42rem;text-indent:-.82rem; border-radius:9px;text-decoration:none;color:var(--texte-2);font-size:.875rem; line-height:1.35;transition:background .18s,color .18s} .mm-liste a::before{content:"";display:inline-block;text-indent:0; width:.32rem;height:.32rem;border-radius:50%;margin-right:.5rem; background:var(--acc-clair);translate:0 -.18em;transition:background .18s,scale .18s} .mm-liste a:hover,.mm-liste a:focus-visible{background:var(--acc-voile);color:var(--acc)} .mm-liste a:hover::before{background:var(--sec-fonce);scale:1.5} /* Un lien du menu qui traverse vers l'autre univers porte la pastille de l'autre univers. `.db-autre::before` seule perdait contre `.mm-liste a::before`, plus specifique : la pastille restait de la couleur d'ici et seul le libelle disait le passage. */ .mm-liste a.db-autre::before{background:var(--autre)} .mm-liste a.db-autre:hover::before{background:var(--autre)} /* Le flux normal donne une espace de mot la ou la grille flex donnait .5rem : on rend l'ecart, sinon le mot d'appel se colle a sa suite. */ .mm-liste a b{font-weight:600;color:var(--texte);margin-right:.25rem} .mm-liste a:hover b{color:var(--acc)} /* LA PAGE COURANTE. `.mm-liste a b` (0,2,0) bat la couleur HERITEE de `.menu a[aria-current]` (0,1,1) : le mot d'appel reste noir. Une entree dont TOUT le libelle tient dans le — « Boutique », « Actualites » — ne portait donc aucune marque au bureau, le fond `[aria-current]` ne vivant que sous 1024 px ; mesure sur pvente.html a 1280 px : lien rgb(43,91,224), rgb(13,20,32), fond transparent. Sur un libelle a deux temps, seule la QUEUE virait au bleu et la tete restait noire. Meme demi-application au clavier : `:hover b` existait, `:focus-visible b` non — le meme lien ne se lisait pas pareil a la souris et au Tab. */ .mm-liste a[aria-current]{background:var(--acc-voile)} .mm-liste a[aria-current] b, .mm-liste a:focus-visible b{color:var(--acc)} .mm-note{grid-column:1/-1;margin:0;font-size:.8rem;color:var(--texte-2)} .mm-appui{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center; justify-content:flex-start;gap:.55rem 1.4rem; margin-top:.4rem;padding-top:.9rem;border-top:1px solid var(--trait); font-size:.83rem;color:var(--texte-2)} .mm-appui>*{flex:0 0 auto} .mm-appui b{color:var(--texte);font-weight:600} .mm-appui a{color:var(--acc);text-decoration:none;font-weight:500} .mm-appui a:hover{text-decoration:underline} .mm-appui .mm-tel{display:inline-flex;align-items:center;gap:.4rem;padding:.34rem .8rem; border-radius:99px;border:1px solid var(--trait);background:var(--papier);color:var(--texte)} .mm-appui .mm-tel:hover{border-color:var(--acc);color:var(--acc);text-decoration:none} /* Un pilier n'a pas de lien en barre : c'est un

. Il se declare courant comme les autres entrees, sinon la barre ne dit jamais ou l'on est. */ .mm-titre[aria-current]{color:var(--acc);font-weight:600} /* ========================================================================= Tete : on est DANS le couloir, la 3D continue ========================================================================= */ .tete{position:relative;background:var(--encre);color:#fff;overflow:hidden;isolation:isolate; min-height:min(86vh,760px);display:grid;align-items:end; padding-block:clamp(4rem,11vw,8rem) clamp(3.5rem,8vw,6rem)} #couloir{position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%} .tete::before{content:"";position:absolute;inset:0;z-index:-3; background: repeating-linear-gradient(90deg,transparent 0 9px,color-mix(in oklab,var(--acc-vif) 30%,transparent) 9px 11px,transparent 11px 22px), radial-gradient(80% 70% at 50% 100%,color-mix(in oklab,var(--acc) 35%,transparent),transparent 65%), linear-gradient(180deg,#05080F,#0A1226); -webkit-mask-image:linear-gradient(180deg,transparent 12%,#000 70%); mask-image:linear-gradient(180deg,transparent 12%,#000 70%)} /* LE VOILE DE LISIBILITE. Le texte de la tete vit dans la colonne GAUCHE ; les scenes 3D, elles, occupent toute la largeur. Sur six pages, l'objet passait sous le titre et sous le paragraphe — et la sonde de contraste ne pouvait pas le voir : elle lit les fonds CSS, le canevas WebGL lui est invisible. On garantit donc la lisibilite par construction, avec un voile horizontal du cote du texte, qui ne depend pas de ce que fait la scene. */ /* Sous 900 px le texte occupe TOUTE la largeur : un voile horizontal n'y peut rien, il faut donc assombrir franchement la bande ou il se pose. La scene reste lisible au-dessus et en dessous. */ .tete::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg,rgba(7,10,18,.94) 0%,rgba(7,10,18,.86) 30%, rgba(7,10,18,.8) 62%,rgba(7,10,18,.9) 84%,rgba(7,10,18,.97) 100%)} @media (min-width:900px){ .tete::after{background: linear-gradient(90deg,rgba(7,10,18,.97) 0%,rgba(7,10,18,.93) 26%,rgba(7,10,18,.66) 44%,rgba(7,10,18,.18) 60%,transparent 72%), linear-gradient(180deg,rgba(7,10,18,.9) 0%,rgba(7,10,18,.32) 38%,rgba(7,10,18,.5) 72%,rgba(7,10,18,.96) 100%)} /* Le texte reste dans les deux premiers tiers : au-dela, la scene respire. */ .tete h1,.tete .chapo{max-width:min(46rem,58%)} } /* ========================================================================= LE MENU AU DOIGT ------------------------------------------------------------------------- Neuf entrees dans 350 px : le menu defilait horizontalement, sans aucune affordance, et cinq entrees sur neuf etaient inatteignables. Le bouton est ajoute par le socle a l'execution, donc les 88 pages en beneficient sans qu'une seule ligne de balisage change. ========================================================================= */ .menu-bouton{display:none;align-items:center;justify-content:center;gap:.28rem; width:2.7rem;height:2.7rem;border-radius:11px;flex-direction:column; border:1px solid var(--trait);background:var(--papier);cursor:pointer; transition:.24s var(--t)} .menu-bouton span{display:block;width:1.05rem;height:2px;border-radius:2px;background:var(--texte); transition:.28s var(--ressort)} .menu-bouton:hover{border-color:var(--acc)} .menu-bouton:focus-visible{outline:2px solid var(--acc);outline-offset:2px} .entete.menu-ouvert .menu-bouton span:nth-child(1){transform:translateY(6px) rotate(45deg)} .entete.menu-ouvert .menu-bouton span:nth-child(2){opacity:0} .entete.menu-ouvert .menu-bouton span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* Le fil d'Ariane est CLAIR par defaut et blanc seulement dans la tete sombre. Ecrit en blanc sans portee, il sortait invisible sur les 71 pages generees, dont le fond est du papier. Meme faute que le bouton contour. */ .fil-ariane{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap; font-size:.8rem;color:var(--texte-2);margin-bottom:1.6rem} .fil-ariane a{color:var(--acc);text-decoration:none} .fil-ariane a:hover{text-decoration:underline} .tete .fil-ariane{color:rgba(255,255,255,.5)} .tete .fil-ariane a{color:rgba(255,255,255,.72)} .tete .fil-ariane a:hover{color:#fff;text-decoration:none} .tete h1{font-size:clamp(2.3rem,6.6vw,5.4rem);font-weight:200;max-width:17ch;margin-block:.6rem 1.1rem} /* Le degrade du titre se DEPLACE, tres lentement. C'est le seul mouvement perpetuel de la page hors 3D, et il suffit a la rendre vivante. */ .tete h1 b{font-weight:500;background:var(--signal-nuit);background-size:220% 100%; -webkit-background-clip:text;background-clip:text;color:transparent; animation:derive 14s ease-in-out infinite alternate} @keyframes derive{from{background-position:0% 0}to{background-position:100% 0}} /* La lueur chaude : l'orange entre par la lumiere, pas par un aplat. */ .tete .halo{position:absolute;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(38% 46% at 82% 22%,color-mix(in oklab,var(--sec) 34%,transparent),transparent 68%), radial-gradient(46% 52% at 8% 74%,color-mix(in oklab,var(--acc-vif) 32%,transparent),transparent 70%)} .tete .chapo{color:rgba(255,255,255,.78);max-width:52ch;font-size:clamp(1.02rem,1.3vw,1.2rem)} .boutons{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2.2rem} .bouton{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.5rem;border-radius:99px; text-decoration:none;font-weight:500;font-size:.97rem;border:1px solid transparent; cursor:pointer;font-family:inherit;transition:.24s var(--t)} /* Le degrade du bouton est double : le fond nominal reste un aplat bleu, de sorte qu'un navigateur sans `background-image` garde un contraste tenu. */ .bouton--plein{background-color:var(--acc);background-image:var(--signal); background-size:180% 100%;background-position:0 0;color:#fff} .bouton--plein:hover{background-position:100% 0;transform:translateY(-2px); box-shadow:0 14px 32px -14px color-mix(in oklab,var(--sec-fonce) 70%,transparent)} /* Le bouton contour est CLAIR par defaut et blanc seulement sur la nuit. L'inverse etait pose au depart, avec une exception `.clair` : des qu'il est apparu ailleurs — dans une carte tarifaire — il s'est retrouve blanc sur blanc, a 1,09 de contraste. Le defaut doit couvrir le cas le plus frequent. */ .bouton--fil{border-color:var(--trait);color:var(--texte);background:transparent} .bouton--fil:hover{background:var(--papier-2);transform:translateY(-2px);border-color:var(--acc)} .tete .bouton--fil,.nuit .bouton--fil{border-color:rgba(255,255,255,.3);color:#fff;background:transparent} .tete .bouton--fil:hover,.nuit .bouton--fil:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55)} /* La descente : un signe que la page continue. */ .descente{position:absolute;left:50%;bottom:1.4rem;translate:-50% 0;z-index:3; width:1px;height:2.6rem;background:linear-gradient(180deg,transparent,rgba(255,255,255,.6));overflow:hidden} .descente::after{content:"";position:absolute;inset:0;background:var(--acc-clair); animation:goutte 2.4s var(--t) infinite} @keyframes goutte{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}} /* Le bandeau qui court sous la tete */ .bandeau{position:relative;z-index:2;background:var(--encre-3); border-block:1px solid color-mix(in oklab,var(--acc-clair) 18%,transparent);overflow:hidden;padding-block:.85rem} .bandeau ul{display:flex;gap:2.6rem;margin:0;padding:0;list-style:none;white-space:nowrap; color:rgba(255,255,255,.62);font-size:.83rem;letter-spacing:.13em;text-transform:uppercase; animation:defile 34s linear infinite;width:max-content} .bandeau li::before{content:"◆";color:var(--acc-vif);margin-right:.7rem;font-size:.6em;vertical-align:middle} .bandeau li:nth-child(odd)::before{color:var(--sec)} .marque:hover{border-color:var(--sec);background:var(--sec-voile)} @keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ========================================================================= Services : colonne collante + mur de portes ========================================================================= */ .intro{display:grid;gap:1rem;max-width:64ch} .intro p:not(.oeil){color:var(--texte-2);font-size:clamp(1.02rem,1.2vw,1.15rem)} .nuit .intro p:not(.oeil){color:rgba(255,255,255,.76)} .deux-colonnes{display:grid;gap:clamp(2rem,4vw,3.4rem);align-items:start} @media (min-width:1080px){.deux-colonnes{grid-template-columns:minmax(280px,.82fr) 2fr}} .colonne-collante{position:sticky;top:6.5rem;display:grid;gap:1.4rem} .compteur-section{display:flex;align-items:baseline;gap:.5rem;font-weight:200;letter-spacing:-.04em; line-height:1} .compteur-section b{font-size:clamp(3rem,5vw,4.6rem);font-weight:200; background:var(--signal);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent} .compteur-section span{font-size:1.1rem;color:var(--texte-2)} /* --- Les objets 3D animes --------------------------------------------- Deux scenes en plus du couloir. Chacune se met en pause des qu'elle sort de l'ecran, et le bloc entier disparait si WebGL manque : ce sont des ornements, jamais du contenu. */ .scene-objet{display:block;width:100%;aspect-ratio:1/.86;border-radius:var(--r); background: radial-gradient(60% 60% at 30% 25%,var(--acc-voile),transparent 70%), radial-gradient(58% 58% at 76% 78%,var(--sec-voile),transparent 72%); border:1px solid var(--trait)} .nuit .scene-objet,.manufacture .scene-objet{border-color:rgba(255,255,255,.14); background: radial-gradient(58% 58% at 28% 24%,color-mix(in oklab,var(--acc-vif) 20%,transparent),transparent 70%), radial-gradient(58% 58% at 78% 80%,color-mix(in oklab,var(--sec) 16%,transparent),transparent 72%)} .socle-objet{position:relative} /* La legende est posee sur une pastille : sans fond, elle passait sous l'objet et l'on n'en lisait plus que la moitie. */ .socle-objet figcaption{position:absolute;left:.8rem;bottom:.8rem;font-size:.7rem; letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--texte-2); background:rgba(255,255,255,.86);backdrop-filter:blur(6px); padding:.3rem .66rem;border-radius:99px;border:1px solid var(--trait); max-width:calc(100% - 1.6rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nuit .socle-objet figcaption,.manufacture .socle-objet figcaption{ color:rgba(255,255,255,.82);background:rgba(10,15,31,.72);border-color:rgba(255,255,255,.16)} @media (max-width:1079px){.colonne-collante .socle-objet{display:none}} .mur{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))} /* La grille dictee par Cedric en reunion : Informatique en grand, puis Fibre et Telephonie cote a cote, Agence Web et Manufacture, Affichage et Mobile. Il faut DEUX colonnes strictes — en `auto-fit`, un ecran large en met trois et les paires qu'il a demandees ne sont plus des paires. */ @media (min-width:900px){ .mur--dicte{grid-template-columns:repeat(2,1fr)} } /* La bordure est un DEGRADE, pas un trait gris : deux fonds superposes, l'un cale sur la boite interieure, l'autre sur la bordure. Aucun pseudo-element n'est mobilise, donc les deux restent libres pour la lumiere. */ .pOrte{--mx:50%;--my:0%; position:relative;display:flex;flex-direction:column;gap:.85rem; padding:1.7rem 1.6rem 1.5rem;text-decoration:none;color:inherit; border:1px solid transparent;border-radius:var(--r); background: linear-gradient(var(--papier),var(--papier)) padding-box, linear-gradient(140deg,color-mix(in oklab,var(--acc) 12%,#fff),color-mix(in oklab,var(--acc-clair) 22%,#fff) 46%,color-mix(in oklab,var(--sec) 18%,#fff)) border-box; box-shadow:var(--ombre-1); overflow:hidden;isolation:isolate; transition:transform .36s var(--ressort),box-shadow .36s var(--t),background .36s var(--t)} .pOrte::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;z-index:-1; background:var(--signal-clair); transform:scaleX(0);transform-origin:left;transition:transform .42s var(--t)} /* La lueur qui SUIT LE CURSEUR : la carte cesse d'etre une surface morte. Deux variables suffisent, ecrites au pointeur. */ .pOrte::after{content:"";position:absolute;inset:0;z-index:-2;opacity:0; background: radial-gradient(230px 230px at var(--mx) var(--my),color-mix(in oklab,var(--sec) 24%,transparent),transparent 70%), radial-gradient(360px 300px at calc(100% - var(--mx)) 120%,color-mix(in oklab,var(--acc-vif) 18%,transparent),transparent 72%); transition:opacity .4s var(--t)} .pOrte:hover,.pOrte:focus-visible{transform:translateY(-7px); background: linear-gradient(var(--papier),var(--papier)) padding-box, var(--signal-clair) border-box; box-shadow:var(--ombre-2),var(--ombre-chaude)} .pOrte:hover::after,.pOrte:focus-visible::after{opacity:1} .pOrte:hover svg{color:var(--sec-fonce)} .pOrte:hover .aller{color:var(--sec-fonce)} .pOrte:hover::before,.pOrte:focus-visible::before{transform:scaleX(1)} .pOrte:focus-visible{outline:2px solid var(--acc);outline-offset:3px} .pOrte .haut{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem} /* #93A3BE ne donnait que 2,50 de contraste sur le papier : le numero d'ordre reste discret, mais il se lit. */ .pOrte .num{font-size:.78rem;font-weight:600;letter-spacing:.2em;color:#64738F} .pOrte svg{width:60px;height:60px;flex:0 0 auto;color:var(--acc); transition:color .3s var(--t),transform .5s var(--t)} .pOrte:hover svg{transform:translateY(-2px) scale(1.05)} .pOrte p{color:var(--texte-2);font-size:.95rem;flex:1} .pOrte .aller{font-weight:500;color:var(--acc);font-size:.94rem;display:inline-flex;align-items:center;gap:.4rem} .pOrte .aller svg{width:1.05rem;height:1.05rem} .pOrte:hover .aller svg{transform:translateX(3px)} .pOrte--phare{background:linear-gradient(158deg,color-mix(in oklab,var(--acc-voile) 52%,#fff),var(--acc-voile));border-color:color-mix(in oklab,var(--acc) 22%,#fff)} .pOrte--phare .num{color:var(--acc)} /* Le meme gris assombri pour tenir sur le papier tombe a 3,99 sur une section de nuit : la couleur du numero suit donc son fond. */ .nuit .pOrte .num,.sombre .pOrte .num{color:#A9B6CE} @media (min-width:1300px){ .pOrte--phare{grid-column:span 2} .pOrte--phare h3{font-size:1.6rem;font-weight:400;letter-spacing:-.03em} .pOrte--phare svg{width:76px;height:76px} } /* ========================================================================= Chiffres : tres grands, sur la nuit, avec le champ derriere ========================================================================= */ .chiffres{overflow:hidden;isolation:isolate} .chiffres .fond{position:absolute;inset:-10% 0 -10% 0;z-index:-1;opacity:.8; background:repeating-linear-gradient(90deg,transparent 0 10px,color-mix(in oklab,var(--acc-vif) 42%,transparent) 10px 12px,transparent 12px 24px); -webkit-mask-image:radial-gradient(70% 80% at 50% 60%,#000,transparent 78%); mask-image:radial-gradient(70% 80% at 50% 60%,#000,transparent 78%)} /* Une braise chaude sous les chiffres : l'orange arrive par la lumiere. */ .chiffres .braise{position:absolute;inset:auto 0 -30% 0;height:80%;z-index:-1;pointer-events:none; background:radial-gradient(50% 60% at 72% 60%,color-mix(in oklab,var(--sec) 30%,transparent),transparent 70%)} .rangee{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-top:2.8rem} .chiffre b{display:block;font-size:clamp(3.2rem,8vw,6.4rem);font-weight:200;letter-spacing:-.05em; line-height:.9;font-variant-numeric:tabular-nums; color:#fff;background:linear-gradient(150deg,#FFFFFF 18%,var(--sec-clair) 96%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .chiffre span{color:var(--acc-clair);font-size:.95rem} .chiffre:nth-child(2) b{background:linear-gradient(150deg,#FFFFFF 12%,var(--sec-clair) 90%); -webkit-background-clip:text;background-clip:text} .chiffre:nth-child(4) b{background:linear-gradient(150deg,#FFFFFF 12%,var(--acc-clair) 92%); -webkit-background-clip:text;background-clip:text} /* ========================================================================= Piliers : panneaux alternes, gros chiffre fantome ========================================================================= */ .piliers{border-block:1px solid var(--trait); background: radial-gradient(40% 40% at 88% 6%, var(--nuee-2) 0%, transparent 66%), radial-gradient(44% 40% at 4% 86%, var(--nuee-1) 0%, transparent 68%), var(--papier-2)} .pilier{position:relative;background:var(--papier);border:1px solid var(--trait);border-radius:var(--r); padding:1.8rem 1.7rem;display:flex;flex-direction:column;gap:.7rem;overflow:hidden} /* Le chiffre fantome tient DANS la carte : deborde en haut, il paraissait tronque par accident plutot que cadre. */ .pilier::before{content:attr(data-num);position:absolute;right:.9rem;top:.7rem; font-size:4rem;font-weight:200;letter-spacing:-.06em;color:var(--acc-voile);line-height:1;z-index:0} .pilier>*{position:relative;z-index:1} .puces{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.9rem} .puce{font-size:.78rem;padding:.26rem .66rem;border-radius:99px;background:var(--acc-voile); color:var(--acc);font-weight:500} .mots-cles{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem} .mots-cles span{font-size:.8rem;padding:.3rem .74rem;border:1px solid var(--trait);border-radius:99px; color:var(--texte-2);background:var(--papier)} .conclusion{margin-top:2.4rem;font-size:clamp(1.1rem,1.7vw,1.42rem);font-weight:300;max-width:60ch; border-left:3px solid var(--acc-vif);padding-left:1.3rem;line-height:1.42} /* ========================================================================= Les marques : les VRAIS logos, en deux rubans contraires ========================================================================= */ .marques{overflow:hidden;padding-bottom:clamp(2.6rem,5vw,4rem); background: radial-gradient(42% 38% at 8% 6%, var(--nuee-1) 0%, transparent 66%), radial-gradient(38% 34% at 94% 14%, var(--nuee-2) 0%, transparent 68%), var(--papier)} /* Le voile commence a 12 % : a 9 %, le fil passait sur une tuile encore visible et l'on croyait a une collision. */ .ruban{position:relative;overflow:hidden;margin-top:1.4rem; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .ruban ul{display:flex;gap:1rem;margin:0;padding:.4rem 0;list-style:none;width:max-content; animation:defile 44s linear infinite} .ruban--retour ul{animation-duration:52s;animation-direction:reverse} .ruban:hover ul{animation-play-state:paused} .marque{position:relative;display:grid;place-items:center;width:184px;height:104px;flex:0 0 auto; border:1px solid var(--trait);border-radius:12px;background:var(--papier); transition:.3s var(--t)} .marque img{max-width:124px;max-height:52px;width:auto;height:auto; filter:grayscale(1);opacity:.5;transition:.3s var(--t)} .marque:hover{border-color:var(--acc-clair);background:var(--acc-voile);transform:translateY(-4px); box-shadow:0 18px 34px -26px rgba(13,20,32,.7)} .marque:hover img{filter:none;opacity:1} .marque figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} /* ========================================================================= LA PROSE — le gabarit des pages terminales ------------------------------------------------------------------------- Articles, pages legales, fiches produit et pages de formulaire : leur contenu est du HTML SEMANTIQUE NU, sans classe. On l'habille donc par ses balises, pas par des classes. C'est ce qui permet de generer 71 pages sans en dessiner une seule a la main — et ce qui les rendra reprises telles quelles par l'editeur WordPress plus tard. ========================================================================= */ .contenu{max-width:74ch;font-size:1.04rem;line-height:1.72} .contenu>*+*{margin-top:1.1rem} .contenu h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:400;margin-top:2.8rem;letter-spacing:-.025em} .contenu h3{font-size:1.22rem;font-weight:500;margin-top:2rem} .contenu h4{font-size:1.05rem;font-weight:600;margin-top:1.6rem;color:var(--acc)} .contenu h2+*,.contenu h3+*,.contenu h4+*{margin-top:.6rem} .contenu p,.contenu li{color:var(--texte-2)} .contenu strong,.contenu b{color:var(--texte);font-weight:600} .contenu a{color:var(--acc);text-underline-offset:.18em;text-decoration-thickness:1px} .contenu a:hover{color:var(--sec-fonce)} .contenu ul,.contenu ol{padding-left:1.3rem;display:grid;gap:.45rem} .contenu li::marker{color:var(--acc)} .contenu blockquote{margin-left:0;padding-left:1.2rem;border-left:3px solid var(--acc-vif); font-size:1.1rem;color:var(--texte)} .contenu img{border-radius:12px;border:1px solid var(--trait)} .contenu figure{margin:1.6rem 0} .contenu figcaption{font-size:.86rem;color:var(--texte-2);margin-top:.5rem} .contenu hr{border:0;border-top:1px solid var(--trait);margin-block:2.4rem} .contenu table{margin-top:1rem} /* Un tableau large ne doit jamais faire deborder la PAGE : on l'enferme. */ .contenu .tableau-cadre{max-width:none} .contenu section{margin-top:2.4rem} .contenu section:first-child{margin-top:0} /* Les formulaires des pages de demande, en balises nues. */ .contenu form{display:grid;gap:1rem;margin-top:1.6rem;max-width:none} .contenu label{display:grid;gap:.34rem;font-size:.86rem;font-weight:500;color:var(--texte-2)} .contenu button{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.5rem;border-radius:99px; font-weight:500;font-size:.97rem;border:0;cursor:pointer;font-family:inherit; background-color:var(--acc);background-image:var(--signal);color:#fff;justify-self:start} .contenu button:hover{transform:translateY(-2px)} /* La colonne laterale des pages terminales : sommaire et rappel de contact. */ .aparte{position:sticky;top:6.5rem;display:grid;gap:1.2rem;font-size:.94rem} .aparte .carte{padding:1.3rem 1.35rem;border-radius:var(--r);border:1px solid var(--trait); background:var(--papier);box-shadow:var(--ombre-1)} .aparte h2{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700; color:var(--acc);margin:0 0 .8rem} .aparte a{display:block;padding-block:.3rem;color:var(--texte-2);text-decoration:none;font-size:.93rem} .aparte a:hover{color:var(--acc)} /* Le lien de liste et le bouton d'appel sont deux objets differents : la couleur de liste ecrasait le blanc du bouton plein (0-1-1 contre 0-1-0) et le numero de telephone tombait a 1,36 de contraste sur son degrade. */ .aparte a.bouton{display:inline-flex;padding-block:.8rem} .aparte a.bouton--plein,.aparte a.bouton--plein:hover{color:#fff} @media (max-width:1079px){.aparte{position:static}} /* ========================================================================= LES COMPOSANTS DES PAGES PILIERS Tarifs, comparatif, arguments numerotes, renvoi d'article et FAQ. Ils servent les sept piliers PRO comme les cinq Particulier. ========================================================================= */ /* --- Les offres chiffrees ---------------------------------------------- */ .tarifs{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));margin-top:2.4rem} .tarif{position:relative;display:flex;flex-direction:column;gap:.9rem;padding:1.8rem 1.6rem 1.6rem; border:1px solid transparent;border-radius:var(--r); background:linear-gradient(var(--papier),var(--papier)) padding-box, linear-gradient(150deg,color-mix(in oklab,var(--acc) 14%,#fff),color-mix(in oklab,var(--sec) 18%,#fff)) border-box; box-shadow:var(--ombre-1);transition:transform .34s var(--ressort),box-shadow .34s var(--t)} .tarif:hover{transform:translateY(-5px);box-shadow:var(--ombre-2)} .tarif--phare{background:linear-gradient(158deg,color-mix(in oklab,var(--acc-voile) 55%,#fff),var(--acc-voile)) padding-box, var(--signal-clair) border-box} .tarif .marqueur{align-self:flex-start;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase; font-weight:700;padding:.28rem .7rem;border-radius:99px; background:var(--acc-voile);color:var(--acc)} .tarif--phare .marqueur{background:var(--signal);color:#fff} .tarif h3{font-size:1.5rem;font-weight:400} .tarif .prix{display:flex;align-items:baseline;gap:.35rem;font-weight:300;letter-spacing:-.03em; background:var(--signal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .tarif .prix b{font-size:clamp(2.1rem,3.4vw,2.9rem);font-weight:300} .tarif .prix span{font-size:1rem;-webkit-text-fill-color:var(--texte-2)} .tarif>p{color:var(--texte-2);font-size:.96rem} .tarif ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem;font-size:.94rem} .tarif li{display:flex;gap:.55rem;align-items:flex-start;color:var(--texte-2)} .tarif li::before{content:"";flex:0 0 auto;width:1.05rem;height:1.05rem;margin-top:.22rem;border-radius:50%; background:var(--acc-voile); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/78% no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/78% no-repeat; background-color:var(--acc)} .tarif .pour{margin-top:auto;padding-top:.9rem;border-top:1px dashed var(--trait); font-size:.88rem;color:var(--texte-2)} .note{margin-top:1.4rem;font-size:.84rem;color:var(--texte-2);max-width:70ch} /* --- Le comparatif ------------------------------------------------------ Enferme dans son propre cadre defilant : une table large ne doit jamais faire deborder la PAGE. */ .tableau-cadre{margin-top:2.4rem;overflow-x:auto;border:1px solid var(--trait);border-radius:var(--r); background:var(--papier);box-shadow:var(--ombre-1)} table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.94rem} caption{text-align:left;padding:1.1rem 1.3rem .2rem;font-weight:600;color:var(--texte)} th,td{padding:.85rem 1.3rem;text-align:left;vertical-align:top;border-top:1px solid var(--trait)} thead th{border-top:0;font-weight:600;color:var(--acc);white-space:nowrap} tbody th{font-weight:500;color:var(--texte-2);width:14rem} tbody tr:nth-child(odd) td,tbody tr:nth-child(odd) th{background:color-mix(in oklab,var(--acc-voile) 45%,transparent)} /* --- Les arguments numerotes ------------------------------------------- */ .arguments{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:2.2rem} .argument{position:relative;padding:1.5rem 1.4rem;border-radius:var(--r); border:1px solid var(--trait);background:var(--papier);box-shadow:var(--ombre-1); display:flex;flex-direction:column;gap:.5rem} .argument .rang{font-size:.78rem;font-weight:700;letter-spacing:.18em;color:var(--acc)} .argument h3{font-size:1.08rem} .argument p{color:var(--texte-2);font-size:.94rem} .nuit .argument{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);box-shadow:none} .nuit .argument p{color:rgba(255,255,255,.72)} .nuit .argument .rang{color:var(--acc-clair)} /* --- Le renvoi vers un article ----------------------------------------- */ .pour-aller-plus-loin{display:flex;gap:1.1rem;align-items:flex-start;margin-top:2.2rem; padding:1.35rem 1.5rem;border-radius:var(--r);text-decoration:none;color:inherit; border:1px solid transparent; background:linear-gradient(var(--papier),var(--papier)) padding-box, linear-gradient(100deg,color-mix(in oklab,var(--acc) 16%,#fff),color-mix(in oklab,var(--sec) 22%,#fff)) border-box; box-shadow:var(--ombre-1);transition:.3s var(--t)} .pour-aller-plus-loin:hover{transform:translateY(-3px);box-shadow:var(--ombre-2); background:linear-gradient(var(--papier),var(--papier)) padding-box,var(--signal-clair) border-box} .pour-aller-plus-loin .etiquette{flex:0 0 auto;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase; font-weight:700;color:var(--acc);padding-top:.2rem} .pour-aller-plus-loin h3{font-size:1.12rem;margin-bottom:.3rem} .pour-aller-plus-loin p{color:var(--texte-2);font-size:.94rem} .pour-aller-plus-loin .aller{display:inline-block;margin-top:.5rem;color:var(--acc);font-weight:500;font-size:.92rem} .nuit .pour-aller-plus-loin{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);color:#fff} .nuit .pour-aller-plus-loin p{color:rgba(255,255,255,.72)} .nuit .pour-aller-plus-loin .etiquette,.nuit .pour-aller-plus-loin .aller{color:var(--acc-clair)} /* --- La FAQ ------------------------------------------------------------ `
` natif : elle s'ouvre sans JavaScript, se navigue au clavier, et son contenu est trouvable par la recherche du navigateur meme replie. Aucune reponse ne nait a `opacity: 0`. */ .faq{display:grid;gap:.7rem;margin-top:2.2rem} .faq details{border:1px solid var(--trait);border-radius:14px;background:var(--papier); box-shadow:var(--ombre-1);overflow:hidden;transition:border-color .3s var(--t)} .faq details[open]{border-color:color-mix(in oklab,var(--acc) 34%,var(--trait))} .faq summary{display:flex;align-items:flex-start;gap:.9rem;padding:1.1rem 1.3rem;cursor:pointer; font-weight:500;font-size:1.02rem;list-style:none;transition:background .25s var(--t)} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{background:var(--acc-voile)} .faq summary:focus-visible{outline:2px solid var(--acc);outline-offset:-2px} .faq summary::after{content:"";flex:0 0 auto;margin-left:auto;width:1.1rem;height:1.1rem;margin-top:.22rem; background:var(--acc);transition:rotate .3s var(--ressort); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat} .faq details[open] summary::after{rotate:135deg} .faq .reponse{padding:0 1.3rem 1.2rem 1.3rem;color:var(--texte-2);font-size:.98rem;max-width:78ch} /* ========================================================================= Formulaire ========================================================================= */ .contact{border-top:1px solid var(--trait); background: radial-gradient(46% 44% at 12% 8%, var(--nuee-1) 0%, transparent 68%), radial-gradient(40% 40% at 90% 88%, var(--nuee-2) 0%, transparent 68%), var(--papier-2)} /* Le formulaire sur une plaque de verre, pas a meme le fond. */ .contact form{background:color-mix(in oklab,var(--papier) 76%,transparent); backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.7); box-shadow:var(--ombre-1);border-radius:var(--r);padding:clamp(1.3rem,3vw,2rem)} form{display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-top:2rem} form .plein{grid-column:1/-1} label{display:grid;gap:.34rem;font-size:.86rem;font-weight:500;color:var(--texte-2)} input,select,textarea{font:inherit;font-size:.98rem;padding:.78rem .9rem;border:1px solid var(--trait); border-radius:11px;background:var(--papier);color:var(--texte);width:100%} input:focus,select:focus,textarea:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:transparent} textarea{min-height:8.5rem;resize:vertical} .mention{font-size:.82rem;color:var(--texte-2)} /* ========================================================================= Manufacture ========================================================================= */ .manufacture{background:linear-gradient(158deg,#0A0F1F 0%,#12203F 58%,#0C1428 100%);color:#fff; overflow:hidden;isolation:isolate} .manufacture h2{max-width:20ch;background:var(--signal-nuit); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .manufacture .chapo{color:rgba(255,255,255,.78);max-width:60ch;margin-top:1.2rem} .manufacture .mur{margin-top:2.6rem} @media (min-width:1000px){ .manufacture .deux-colonnes{grid-template-columns:1.5fr .95fr !important} } .manufacture .pOrte{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.15);color:#fff} .manufacture .pOrte:hover{border-color:color-mix(in oklab,var(--acc-clair) 55%,transparent);box-shadow:none;background:rgba(255,255,255,.08)} .manufacture .pOrte p{color:rgba(255,255,255,.72)} .manufacture .pOrte svg{color:var(--acc-clair)} .manufacture .pOrte .num{color:rgba(255,255,255,.45)} .produits{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:2rem} .produits span{font-size:.85rem;padding:.34rem .8rem;border-radius:99px; border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.84)} /* ========================================================================= Pied ========================================================================= */ .pied{background:var(--encre);color:rgba(255,255,255,.7);padding-block:3.4rem 2rem} .pied .rangee{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2rem;margin-top:0} .pied h3{color:#fff;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.9rem;font-weight:700} .pied a{color:rgba(255,255,255,.7);text-decoration:none;display:block;padding-block:.2rem;font-size:.92rem} .pied a:hover{color:#fff} .pied .bas{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem; margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);font-size:.84rem} /* ========================================================================= Apparition au defilement — TRANSFORM SEULEMENT Rien ne part d'`opacity: 0`. Si le script ne tourne pas, si l'observateur ne se declenche jamais, le texte est deja la et deja lisible. ========================================================================= */ .monte{transform:translateY(20px);transition:transform .75s var(--t)} .monte.vu{transform:none} /* 20 px, ET PAS 26 : c'est exactement le retrait de `.large` (`width:min(1240px,100% - 2.5rem)`, soit 20 px de chaque cote). Un bloc colle au bord droit de `.large` n'a que ces 20 px devant lui ; a 26 il depasse de 6, et `body{overflow-x:hidden}` MASQUE ce debordement au lieu de le signaler. Mesure au chargement frais, une page neuve par largeur, avec `overflow-x` neutralise (un simple redimensionnement ne le montre pas : l'animation a deja remis `transform` a `none`) : +6 px sur interieur.html a 901, 960, 1024, 1080 et 1120 px, et sur interieur-part.html aux memes largeurs plus 1180 et 1280 — 1280 etant la derniere ou `.large` vaut encore « 100% - 2.5rem ». Au-dela, la marge s'ouvre et le probleme disparait tout seul. Meme chiffre que `.monte`, meme raison. */ .glisse-g{transform:translateX(-20px);transition:transform .8s var(--t)} .glisse-d{transform:translateX(20px);transition:transform .8s var(--t)} /* Au telephone, meme cause a une autre echelle : le decalage lateral pousse la carte hors du cadre tant qu'elle n'est pas revelee. La montee dit la meme chose sans deborder. */ @media (max-width:900px){.glisse-g,.glisse-d{transform:translateY(20px)}} .glisse-g.vu,.glisse-d.vu{transform:none} /* ========================================================================= UX : deux ajouts qui ne relevent pas du decor ========================================================================= */ /* Retour en haut — la page fait 6 700 px, la remonter a la molette est une corvee. Il ne parait qu'une fois la moitie franchie. */ .remonter{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:45; width:3rem;height:3rem;display:grid;place-items:center;border-radius:50%; background:color-mix(in oklab,var(--papier) 78%,transparent);backdrop-filter:blur(14px); border:1px solid var(--trait);box-shadow:var(--ombre-1);color:var(--texte); translate:0 140%;opacity:.001;transition:translate .5s var(--ressort),opacity .35s var(--t), background .3s,border-color .3s} .remonter.parait{translate:0;opacity:1} .remonter:hover{background:var(--papier);border-color:var(--sec);color:var(--sec-fonce)} .remonter svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} /* Barre d'action au telephone : appeler ou ecrire sans remonter la page. Sur un site de depannage, c'est l'element le plus utile de la page. */ .barre-action{position:fixed;left:0;right:0;bottom:0;z-index:46;display:none; gap:.55rem;padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom)); background:color-mix(in oklab,var(--papier) 88%,transparent);backdrop-filter:blur(16px); border-top:1px solid var(--trait)} .barre-action a{flex:1;display:flex;align-items:center;justify-content:center;gap:.45rem; padding:.8rem .6rem;border-radius:12px;text-decoration:none;font-weight:600;font-size:.92rem} .barre-action .appeler{background-color:var(--acc);background-image:var(--signal);color:#fff} .barre-action .ecrire{border:1px solid var(--trait);color:var(--texte)} @media (max-width:820px){ .barre-action{display:flex} body{padding-bottom:4.6rem} .remonter{bottom:5.4rem} } @media (prefers-reduced-motion:reduce){ .monte,.glisse-g,.glisse-d{transform:none;transition:none} .bandeau ul,.ruban ul,.descente::after,.tete h1 b{animation:none} .fil,.remonter{transition:none} *{transition-duration:.01ms !important} } /* LE SEUIL DU TIROIR PASSE DE 1180 A 1024 PX. Il etait a 1180 parce que neuf entrees demandaient 770 px ; cinq n'en demandent plus que 527 (mesure a 1280 px, interieur.html). Mesure du point de rupture, pastille courte et tiroir neutralise, sur pvente.html : le rang y demande 814 px, tient jusqu'a 857 px de viewport et deborde a 856. Avec la pastille LONGUE — meme page, rang de 936 px — il tient jusqu'a 977. Le seuil est donc pose a 1024 px, largeur d'une tablette en paysage : entre 1024 et 1180 px, on gagne une vraie barre horizontale la ou il y avait un hamburger. `body{overflow-x:hidden}` MASQUE un debordement au lieu de le signaler : ces chiffres viennent de la mesure, pas de l'oeil. Sous le seuil, chaque theme devient un accordeon et le panneau reprend le flux normal. ⚠ socle.js porte la meme borne en `matchMedia('(min-width:1025px)')` (le survol n'a de sens que quand la barre est horizontale) : les deux se changent ENSEMBLE. */ @media (max-width:1024px){ .entete .rang{flex-wrap:wrap;gap:.55rem .7rem} .menu-bouton{display:flex;order:2;margin-left:auto} .bascule-lien{order:3} .entete .menu{display:none;order:4;width:100%;margin-left:0;flex-wrap:wrap; overflow:visible;padding:.35rem 0 .5rem;border-top:1px solid var(--trait)} /* Le tiroir porte cinq entrees : fermees elles tiennent (245 px mesures a 390 px, pour 769 visibles), mais un panneau ouvert le fait deborder de l'ecran — 1444 px pour « Faire tourner l'entreprise ». L'en-tete est collante : faire glisser la page ne rattrape rien, les entrees basses restent inatteignables. Le tiroir defile donc lui-meme. */ .entete.menu-ouvert .menu{display:flex;max-height:calc(100dvh - 4.6rem); overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain; padding-inline:4px;scrollbar-width:thin} .entete .menu a{width:100%;padding:.68rem .55rem;border-radius:10px} .entete .menu a[aria-current]{background:var(--acc-voile)} /* CORRECTION D'UN DÉFAUT EXISTANT : socle.css met « .entete .menu » en display:none sous le seuil, sans condition. Sans JavaScript, la navigation des 90 pages qui portent une en-tete (62 PRO + 28 PART) disparaissait sans moyen de la révéler. */ html:not(.js) .entete .menu{display:flex} /* Sans script, le tiroir ne peut pas s'ouvrir : le menu reste donc a l'ecran. Il y tient en deux rangs serres plutot qu'en cinq lignes pleine largeur, et chaque theme s'ouvre au clic, nativement. */ html:not(.js) .menu--mega .mm-simple, html:not(.js) .mm-titre{width:auto;padding:.45rem .6rem;font-size:.86rem;font-weight:450} html:not(.js) .mm-groupe{width:auto} html:not(.js) .mm-groupe[open]{width:100%} html:not(.js) .mm-groupe[open]>.mm-titre{font-weight:600} .menu--mega{gap:.1rem} .menu--mega .mm-simple{width:100%;padding:.68rem .55rem;border-radius:10px} .mm-groupe{width:100%} .mm-titre{width:100%;justify-content:space-between;padding:.68rem .55rem;border-radius:10px; font-size:.95rem;font-weight:500} .mm-titre svg{width:.7rem;height:.7rem} /* max-height ET overflow SONT REMIS A ZERO. Le panneau de bureau est un tiroir deroulant plafonne a « 100vh - 5rem » ; laisse tel quel dans le tiroir, il devient un SECOND defileur imbrique, sans poignee visible. Mesure a 390 px, panneau « Faire tourner l'entreprise » ouvert : le panneau demandait 1021 px, en montrait 764, et la colonne Telephonie plus la bande telephone-adresse etaient injoignables — la page etait pourtant servie entiere et le controle passait au vert. Le seul defileur est desormais le tiroir. */ .mm-panneau{position:static;box-shadow:none;border:0;border-radius:12px; background-image:none;background:var(--papier-2); padding:.9rem .9rem 1rem;margin:.25rem 0 .5rem; max-height:none;overflow:visible} .mm-plan{grid-template-columns:minmax(0,1fr);gap:.9rem} /* Les colonnes s'empilent. Le filet vertical de la gouttiere n'a plus de gouttiere : il devient le trait horizontal qui separe deux piliers. */ .mm-plan--2,.mm-plan--3{grid-template-columns:minmax(0,1fr)} .mm-colonne+.mm-colonne::before{display:none} .mm-colonne+.mm-colonne{border-top:1px solid var(--trait);padding-top:.8rem} .mm-colonne .mm-glyphe{width:34px;height:34px} .mm-colonne .mm-pilier{font-size:1rem;gap:.6rem} /* Les colonnes sont l'une SOUS l'autre : rien a aligner, et une ligne vide de plus par pilier coute cher dans un tiroir qui defile deja. */ .mm-colonne .mm-resume{min-height:0} .mm-glyphe{width:46px;height:46px} .mm-pilier{font-size:1.08rem} .mm-liste{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row; grid-auto-columns:auto;gap:0;padding-left:0;border-left:0; border-top:1px solid var(--trait);padding-top:.4rem} /* Le retrait gauche garde la place de la puce pendante : .5rem de retrait + .82rem de puce. Sans ca, la pastille se pose sur la premiere lettre. */ .mm-liste a{padding:.6rem .5rem .6rem 1.32rem} /* socle.css pose « .entete .menu a{width:100%} » sous 1024 px. C'est bon pour les entrees du tiroir, pas pour la pastille de telephone ni pour le nom du pilier : on leur rend leur largeur de contenu. */ .entete .menu .mm-pilier{width:auto;padding:0;border-radius:0} .entete .menu .mm-appui a{width:auto} .entete .menu .mm-appui .mm-tel{padding:.34rem .85rem} .mm-appui{margin-top:.2rem} } @media (max-width:560px){ .entete .rang{gap:.5rem} .bascule-lien{font-size:.76rem;padding:.36rem .66rem} } @media (max-width:820px){ form{grid-template-columns:1fr} .tete{min-height:auto} .pilier::before{font-size:5.5rem} } /* ========================================================================= LES DEUX COMPOSANTS FUSIONNÉS — ils étaient deux feuilles à part. Ils arrivent EN FIN DE FEUILLE, et nulle part ailleurs : c'est la place exacte qu'ils occupaient quand les pages les chargeaient après le socle. Entre deux règles de même poids, c'est la dernière lue qui gagne — les remonter plus haut changerait l'arbitrage, donc l'écran. ========================================================================= */ /* ========================================================================= COMPOSANT FORMULAIRE — maquette de bascule. Les classes sont celles que `class-if2m-forms-rendu.php` ecrit deja (`if2m-form-*`) : la maquette et le site rendent le meme balisage, le portage se reduit donc a poser cette feuille dans le theme. Rien n'est invente ici qui n'existe pas cote PHP. Trois partis pris tiennent tout le fichier : 1. RIEN NE SE REMPLIT. Le repere d'etapes est une liste numerotee : pastilles, rang courant marque, etapes faites cochees. Aucune jauge, aucune barre qui progresse — refusees deux fois sur ce projet. 2. SANS SCRIPT, TOUT EST LA. Les
d'etape sont visibles a la suite ; ce sont le script et lui seul qui posent `hidden`. Aucune regle de cette feuille ne masque une etape, sinon le repli sans JavaScript afficherait un formulaire vide. 3. AUCUN CONTENU NE NAIT INVISIBLE. Pas d'`opacity: 0` de base. Le seul element sorti de l'ecran est le piege a robots, qui n'est pas du contenu, et les libelles reserves aux lecteurs d'ecran. POURQUOI TOUT EST PREFIXE PAR `.if2m-form-bloc` : le socle habille deja les formulaires ecrits a la main, avec des selecteurs de la forme `.contenu label` ou `.contenu ol`. A poids egal, c'est la derniere regle qui gagne. Le prefixe donne au composant le poids qu'il faut pour tenir dans une page d'article comme dans une section de contact, quelle que soit la regle du socle qu'il croise. ========================================================================= */ /* Le socle pose `form{display:grid;grid-template-columns:1fr 1fr}` pour les formulaires ecrits a la main. Le composant gere sa propre grille, etape par etape : on lui rend un flux normal. */ .if2m-form-bloc .if2m-formulaire, .contenu .if2m-form-bloc .if2m-formulaire { display: block; grid-template-columns: none; margin-top: 0; max-width: none; } .if2m-form-bloc { --if2m-fond: var(--papier); --if2m-fond-2: var(--papier-2); --if2m-trait: var(--trait); --if2m-texte: var(--texte); --if2m-texte-2: var(--texte-2); --if2m-alerte: #B42318; --if2m-alerte-voile: #FEF3F2; --if2m-succes: #05603A; --if2m-succes-voile: #ECFDF3; color: var(--if2m-texte); margin-top: 1.6rem; } /* Sur fond sombre le formulaire remonte sur une plaque claire : un champ de saisie blanc pose a meme la nuit fait tache, et un champ sombre fait fuir. */ .nuit .if2m-form-bloc, .manufacture .if2m-form-bloc { background: var(--if2m-fond); border-radius: var(--r); padding: clamp(1rem, 2.6vw, 1.6rem); box-shadow: var(--ombre-2); } /* ------------------------------------------------------------------------- Le formulaire, sa plaque et ses mentions ---------------------------------------------------------------------- */ .if2m-form-bloc .if2m-form-intro { color: var(--if2m-texte-2); font-size: .95rem; margin: 0 0 1.2rem; max-width: 62ch; } /* La mention de maquette est permanente et non pliable : le visiteur doit savoir avant de saisir quoi que ce soit que rien ne partira. */ .if2m-form-bloc .if2m-form-maquette { margin: 0 0 1.2rem; padding: .6rem .85rem; border-radius: 11px; border: 1px dashed var(--if2m-trait); background: var(--if2m-fond-2); color: var(--if2m-texte-2); font-size: .82rem; line-height: 1.5; } .if2m-form-bloc .if2m-form-maquette b { color: var(--if2m-texte); font-weight: 700; } /* ------------------------------------------------------------------------- Le repere d'etapes. Une liste numerotee, jamais une jauge. ---------------------------------------------------------------------- */ .if2m-form-bloc .if2m-form-fil { margin: 0 0 1.7rem; } .if2m-form-bloc .if2m-form-fil-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem .5rem; } .if2m-form-bloc .if2m-form-fil-item { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .85rem .3rem .32rem; border: 1px solid var(--if2m-trait); border-radius: 99px; background: var(--if2m-fond); color: var(--if2m-texte-2); font-size: .84rem; line-height: 1.25; transition: border-color .3s var(--t), color .3s var(--t), background .3s var(--t); } .if2m-form-bloc .if2m-form-fil-item::marker { content: none; } /* `display` pose ici l'emporte sur le `display:none` que le navigateur donne a `[hidden]` : sans cette ligne, une etape sautee par une condition reste affichee dans le repere alors qu'on ne la traversera jamais. */ .if2m-form-bloc .if2m-form-fil-item[hidden] { display: none; } .if2m-form-bloc .if2m-form-fil-rang { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--if2m-fond-2); color: var(--if2m-texte-2); font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; } /* L'etape en cours : marquee par la couleur et par le trait, pas par un remplissage progressif. */ .if2m-form-bloc .if2m-form-fil-item--courante { border-color: var(--acc); color: var(--texte); background: var(--acc-voile); font-weight: 600; } .if2m-form-bloc .if2m-form-fil-item--courante .if2m-form-fil-rang { background: var(--acc); color: #fff; } /* Une etape deja traversee garde son chiffre — lisible pour qui ne distingue pas la couleur — et gagne une coche. */ .if2m-form-bloc .if2m-form-fil-item--faite { border-color: color-mix(in oklab, var(--acc) 40%, var(--trait)); } .if2m-form-bloc .if2m-form-fil-item--faite .if2m-form-fil-rang { background: color-mix(in oklab, var(--acc) 18%, var(--papier)); color: var(--acc); } .if2m-form-bloc .if2m-form-fil-item--faite .if2m-form-fil-titre::after { content: " ✓"; color: var(--acc); font-weight: 700; } /* ------------------------------------------------------------------------- Les etapes ---------------------------------------------------------------------- */ .if2m-form-bloc .if2m-form-etape { border: 0; margin: 0; padding: 0; min-inline-size: 0; /* un fieldset refuse de retrecir sans cette ligne */ } /* Le filet entre deux etapes n'a de sens que quand elles se suivent a l'ecran, c'est-a-dire SANS JavaScript. Des que le script n'en montre qu'une, la precedente porte `hidden` : le filet s'efface, sinon un trait flotterait au-dessus d'une etape seule. */ .if2m-form-bloc .if2m-form-etape + .if2m-form-etape { margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid var(--if2m-trait); } .if2m-form-bloc .if2m-form-etape[hidden] + .if2m-form-etape { margin-top: 0; padding-top: 0; border-top: 0; } .if2m-form-bloc .if2m-form-etape-legende { display: block; float: none; width: 100%; padding: 0 0 1rem; margin: 0; } .if2m-form-bloc .if2m-form-etape-rang { display: block; /* Le repere d'etape est le SEUL indicateur de position du formulaire : il ne peut pas etre le plus petit texte de l'ecran. */ font-size: .88rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--acc); } .if2m-form-bloc .if2m-form-etape-titre { margin: .3rem 0 0; /* Le titre recoit le focus au changement d'etape : sur toute la largeur, son anneau ressemblerait a un champ de saisie. Il se serre sur le texte. */ width: fit-content; max-width: 100%; font-size: 1.34rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.2; color: var(--if2m-texte); } /* Le script pose le focus sur ce titre au changement d'etape : il doit se voir, sinon le repere est perdu pour qui navigue au clavier. */ .if2m-form-bloc .if2m-form-etape-titre:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; border-radius: 6px; } /* ------------------------------------------------------------------------- Les sections, a l'interieur d'une etape ---------------------------------------------------------------------- */ .if2m-form-bloc .if2m-form-partie + .if2m-form-partie, .if2m-form-bloc .if2m-form-grille + .if2m-form-partie, .if2m-form-bloc .if2m-form-partie + .if2m-form-grille { margin-top: 1.5rem; } .if2m-form-bloc .if2m-form-partie-titre { margin: 0 0 .75rem; font-size: 1rem; font-weight: 600; color: var(--if2m-texte); } .if2m-form-bloc .if2m-form-partie-texte { margin: -.5rem 0 .85rem; font-size: .88rem; color: var(--if2m-texte-2); } /* ------------------------------------------------------------------------- La grille de champs. Douze colonnes, comme la largeur enregistree en base. ---------------------------------------------------------------------- */ .if2m-form-bloc .if2m-form-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.05rem; align-items: start; } .if2m-form-bloc .if2m-form-grille:empty { display: none; } .if2m-form-bloc .if2m-form-champ { grid-column: span 12; min-width: 0; } .if2m-form-bloc .if2m-form-champ--6 { grid-column: span 6; } .if2m-form-bloc .if2m-form-champ--4 { grid-column: span 4; } .if2m-form-bloc .if2m-form-champ--3 { grid-column: span 3; } @media (max-width: 760px) { .if2m-form-bloc .if2m-form-champ, .if2m-form-bloc .if2m-form-champ--6, .if2m-form-bloc .if2m-form-champ--4, .if2m-form-bloc .if2m-form-champ--3 { grid-column: span 12; } } /* ------------------------------------------------------------------------- Les controles ---------------------------------------------------------------------- */ .if2m-form-bloc .if2m-form-etiquette { display: block; margin: 0 0 .34rem; /* Ce qu'on demande au visiteur se lit sans effort : au-dessus de 14 px. */ font-size: .95rem; font-weight: 500; line-height: 1.4; color: var(--if2m-texte-2); } .if2m-form-bloc .if2m-form-requis { color: var(--sec-fonce); } .if2m-form-bloc .if2m-form-champ input, .if2m-form-bloc .if2m-form-champ select, .if2m-form-bloc .if2m-form-champ textarea { font: inherit; font-size: .98rem; width: 100%; padding: .74rem .9rem; border: 1px solid var(--if2m-trait); border-radius: 11px; background: var(--if2m-fond); color: var(--if2m-texte); } .if2m-form-bloc .if2m-form-champ textarea { min-height: 7rem; resize: vertical; } .if2m-form-bloc .if2m-form-champ input:focus, .if2m-form-bloc .if2m-form-champ select:focus, .if2m-form-bloc .if2m-form-champ textarea:focus { outline: 2px solid var(--acc); outline-offset: 1px; border-color: transparent; } .if2m-form-bloc .if2m-form-aide { margin: .35rem 0 0; font-size: .82rem; color: var(--if2m-texte-2); } .if2m-form-bloc .if2m-form-message-erreur { margin: .35rem 0 0; /* Pourquoi ca bloque se lit aussi bien que ce qu'on demande. */ font-size: .9rem; font-weight: 500; color: var(--if2m-alerte); } .if2m-form-bloc .if2m-form-champ--erreur input, .if2m-form-bloc .if2m-form-champ--erreur select, .if2m-form-bloc .if2m-form-champ--erreur textarea { border-color: var(--if2m-alerte); background: var(--if2m-alerte-voile); } /* Cases a cocher, boutons radio, consentement */ .if2m-form-bloc .if2m-form-case { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; margin: 0; font-size: .9rem; font-weight: 400; line-height: 1.45; color: var(--if2m-texte-2); cursor: pointer; } .if2m-form-bloc .if2m-form-champ .if2m-form-case input { width: 1.15rem; height: 1.15rem; margin-top: .16rem; padding: 0; accent-color: var(--acc); } /* Le lien de la politique vit hors du